Search
Enter at least two characters without personal information.

    LibraryArticles & FAQ Your projectRequest a quote
    LanguageEN
    Practical guides

    Prepare useful images for web search

    A relevant image is more than its filename. Its page, nearby text and accessibility explain why it deserves to be shown.

    Go to the method

    Illustration of website project planning: Prepare useful images for web search

    Estimated reading time : 5 min · Published

    Choose an image that represents the page

    Connect the main photo to the actual subject and avoid recycling it across a list of different pages. A card should visually anticipate its destination. Check the subject survives mobile and sharing crops.

    For a product or case study, show several useful views instead of one generic image. The image preparation guide covers rights, placements and variants.

    • Subject matches the page.
    • Distinct visuals within a list.
    • Mobile and sharing crops checked.

    Provide accessible context

    Use an HTML image with a stable URL, descriptive name and alternative text suited to its role. Fictional example: a restored door photo is cropped to show only its handle; that variant’s alternative should describe the remaining visible detail. Nearby text and captions provide context and provenance. Keep empty alt text for decoration without information and avoid unrelated keywords.

    Google image guidance gives alt text and page context a central role. Stuffing keywords into alt text makes reading worse and does not explain the photo.

    Separate file discovery, page context and thumbnail preference. Google can discover an image through img and its src attribute; an image placed only in CSS background styling is not indexed as an image through that mechanism. With picture and srcset, retain an img with a fallback src URL. Nearby text and the alternative should explain the subject actually visible.

    To express a preferred image, Google documents primaryImageOfPage and og:image among other options. Choose a representative visual rather than systematically naming the site’s generic logo. max-image-preview:large permits a large preview but guarantees neither selection of that file nor appearance in results. Check crawler access, served file, metadata and preview rules separately before attributing a mismatch to missing keywords.

    • Image present in HTML.
    • Alt text fits its purpose.
    • Nearby text describes without artificial repetition.

    Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

    Images and search: four checks answering different questions
    Layer checkedUseful questionWhat the check does not prove
    HTML embeddingIs the file referenced by img and src with a usable fallback?The right subject or guaranteed indexing.
    File accessCan the crawler retrieve the real image in a supported format?Accurate captions or usage rights.
    Preferred imageDoes primaryImageOfPage or og:image represent this page?That Google must select this thumbnail.
    Preview permissionDoes max-image-preview match the publishing intention?That allowing a large preview forces it to appear.

    Serve the right file

    Diagram of a 1,200 CSS-pixel viewport, a 480 CSS-pixel image slot and an indicative 960-pixel requirement at density 2.
    Illustration · Raster-image calculation: the slot is 480 CSS pixels wide even in a 1,200-pixel viewport. At density 2, the reference becomes 960 × 540 pixels for this 16:9 crop.

    Prepare display-sized images, responsive variants and declared dimensions to reduce layout shifts. Compress without removing useful detail. Check that the first visible image actually loads on a slow connection.

    Do not lock essential information inside the image: embedded text, photographed tables or unexplained screenshots. Embedded metadata can document a genuine credit or licence, but it cannot replace a clear page.

    Fictional exercise: within a 1,200 CSS-pixel viewport, an image occupies a 480 CSS-pixel column. For a target density of 2, the indicative file width is 960 pixels, not 2,400. With srcset width descriptors, sizes states the intended display width. A 100vw hint would describe the whole viewport here and could overestimate the actual need.

    The 960w descriptor must match the file’s actual width; do not mix w and x descriptors within one srcset. The browser retains discretion according to conditions and available resources. Compare computed width, density and currentSrc with a documented cache state. Use lazy loading where appropriate, without accidentally delaying the essential first-screen image.

    • Weight and dimensions checked.
    • Variants fit different screens.
    • Important information available as text.

    Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

    Fictional examples: viewport, image slot and file width
    Viewport in CSS pixelsSlot × target densityIndicative file width
    360328 × 2656 px; viewport width alone does not give this result
    1,200480 × 2960 px; the image occupies only one column
    1,920720 × 1.51,080 px; then check the selected file

    Check the published result

    Check the page, image variants and rights information after publication. Fictional example: a project photograph is replaced with an illustration; also update captions, alternatives, sharing previews and translations identifying it as real work. Check file access and intended indexing. An old cached preview may differ; distinguish its refresh from updating the page itself.

    Review impressions and clicks by page in available search tools without crediting one field for every change. Fix missing, unloaded or context-free images first.

    • Sources and variants accessible.
    • Rights and credits accurate.
    • Result checked after publication.

    Reference documents

    Content updated on

    Separate the served file, displayed crop and external preview

    Fictional exercise: the site loads a wide product view, but its card shows only a detail. Three elements need separate checks.

    1. Identify the file actually served by img or picture. CSS cropping of the card does not automatically create a new image file.
    2. Check that the visible subject, alternative text and nearby copy remain consistent. If an essential detail disappears, prepare a suitable crop or shot.
    3. Check the image declared for sharing and preview directives. The crop seen on your page does not guarantee the crop chosen by an external service.

    Test what the formats actually cut off →

    Acceptance matrix to adapt to your project

    These proposed checks use synthetic cases. Decide the required behaviour with the team, record the result and assign unresolved gaps before release.

    Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

    Test cases, expected outcomes and useful evidence
    CaseExpected outcomeEvidence to retain
    A useful image lacks context and informative alternative text.The page explains its role and alternative text conveys necessary information.Image concerned, information conveyed, approved alternative text and surrounding explanation.

    Frequently asked questions

    Should alternative text stay the same after cropping?

    Only when visible information and purpose remain unchanged. A detail, overview and decorative image may need different alternatives even when they share one original. Review each variant in its actual placement and retain required credits and rights separately.

    Related topics