6 minute read · Practical marketing guidance
On this page 5 sections
Prepare a website photo for the place where it will appear, then check what the page actually shows and delivers. A smaller file is useful only if the crop and detail still do the photo’s job. Start with one approved image, one page section and one clear feature that must remain visible.
For a Las Vegas or Henderson business, preserve the feature that explains the service. Keep the original so a failed crop or export does not become the only version available.
Describe the placement before preparing the file
Find the page and section where the photo belongs. Ask the editor how that image area is intended to behave: does it show the whole picture, fill a fixed shape or change shape on a phone? A landscape service-page image and a square card can need different crops even when they start from the same photograph.
Write down the required detail. “Show the wheel rim beside the assessment indicator” gives the editor a concrete check. “Make it look professional” leaves the decision open to interpretation. Check that the crop preserves the detail the surrounding explanation depends on.
Approval and claims should already be settled. Our website-proof guide covers what an image can support and how to explain its origin. This preparation record starts with an image already approved for the intended use.
Separate pixels, file bytes and displayed size
A file’s pixel dimensions describe its image grid. Its byte count describes how much file data it contains. The size it occupies on the page is a third value. Shrinking its display in an editor does not establish that the source file became smaller.
The web.dev raster-image guide explains that encoding and compression affect file size, and that stretching a raster image beyond its source dimensions can produce blur or distortion. Compression involves a balance between visible detail and data that depends on the image content.
Record candidate dimensions and bytes, then inspect the detail at the intended display size. Compare like-for-like crops; a file may weigh less because an important part of the picture disappeared.
The web.dev responsive-image guide describes how pages can offer image candidates and rendering information for the browser to choose from. Explicit source rules can also provide different crops for different layouts. Ask the editor to record what the actual page selected instead of assuming that every visitor downloads the uploaded original.
No single byte limit or source-pixel multiplier settles this decision. The placement, the available source and the resulting detail all matter. If the subject becomes unclear, return to the export or layout rather than treating the lower byte count as an automatic pass.
A fictional comparison without an invented winner
Every business detail, source photo, export, dimension and planned display size in this example is invented. No actual photo has been exported, uploaded or tested, and no browser delivery has been observed.
Imagine a Henderson bicycle-service shop with an already approved workshop demonstration photo of a staff-owned wheel in a truing stand. The photo accompanies a wheel-assessment explanation. The feature to preserve is the rim beside the stand’s indicator; the demonstration does not document a customer result.
The fictional original is 4032 × 3024 pixels. The placement brief proposes a landscape 4:3 image displayed at 600 × 450 CSS pixels on desktop. Phone appearance and actual delivery remain pending. These are example planning values, not settings recommended for every website.
- Candidate A:
wheel-assessment-A.jpg, 1200 × 900 pixels, JPEG, 185,000 file bytes. Proposed crop keeps the rim and indicator. - Candidate B:
wheel-assessment-B.jpg, 1200 × 900 pixels, JPEG, 112,000 file bytes. Same proposed crop, with different export settings.
Neither candidate is accepted from these invented numbers. If an actual comparison later shows that B loses the indicator’s edge while A preserves it, that observation would support rejecting B for this placement. If both preserve the required detail, the editor can consider the smaller file alongside the actual delivery evidence. Until the checks happen, record both as candidates.
Likewise, a crop that looks clear in a separate file can fail when the phone layout hides the indicator. That finding calls for a different crop or layout treatment, followed by another check. It does not necessarily call for heavier compression or a larger source.
Keep one six-field acceptance record
Use this original record for one photo in one placement. Keep proposed values separate from observed values, and leave unperformed checks pending.
- Approved source and placement: Identify the original file and version, the page and the exact image area. Keep the approved original available.
- Crop and essential detail: Record the intended shape, retained region and feature that must remain recognizable. State what would make the crop unsuitable.
- Candidate files: Record each export’s identifier, pixel dimensions, format, exact file bytes and version. Avoid replacing those facts with labels such as optimized.
- Rendered appearance: Record the checked viewport, displayed image size in CSS pixels, visible crop and detail. Save the actual observation, including any obstruction or distortion.
- Delivered resource: Have the editor identify the selected image URL and its measured file dimensions and bytes. Label the measurement and its units clearly.
- Decision and upkeep: Mark proposed, needs correction or accepted. Add the evidence date, reviewer, responsible editor and unresolved issue. Recheck after changing the file, crop or layout.
A file-byte comparison does not measure the whole page’s loading time. Keep the conclusion as narrow as the evidence: which candidate preserved the detail, which resource was delivered and whether the placement needs correction.
Check the saved WordPress placement
Current WordPress Image block documentation distinguishes file editing from display controls. Media Editor cropping saves an edited version as a new file while retaining the original. Its Details tab shows file information, including size and dimensions. Resolution choices depend on the theme and uploaded image.
The block’s Styles aspect ratio changes appearance without editing the original file. Cover can crop the visible image to fill its area; Contain shows the whole image with possible empty space. A focal point helps select the part kept visible. Controls can vary, so ask your editor to identify the settings available on your site.
After the editor saves the intended change, open the viewer-facing page. Check the desktop placement and the relevant phone layout, then complete the rendered and delivered fields. If the crop loses the feature, adjust the crop or layout. If the feature remains but becomes blurred, inspect the chosen source and export. Retest the corrected placement before closing the issue.
Keep the photo’s alternative-text decision consistent with its final use; our service photo alt-text guide covers that separate review.
Rank.Vegas web design services can include image and page planning within agreed work. Email sales@rank.vegas with your website, one page placement and the image problem you want to resolve. Describe the missing or unclear detail without sending private customer files.