Shopify Image SEO: Alt Text, Formats, and the 2026 Playbook

On the average Shopify store we audit, images account for 68 percent of total page weight and roughly 80 percent of the Largest Contentful Paint time on mobile. Fixing images is the single highest-leverage SEO and performance move you can make, and yet most stores still upload a 4200 pixel wide JPEG from the product photographer and call it done. This post is the 2026 playbook for how to actually do image SEO on Shopify, from alt text to structured data.

TL;DR

• Alt text describes the image for a user who cannot see it. Stuffing keywords in it hurts rankings and accessibility audits, both.
• Filenames matter for Google Image search. Use hyphenated, descriptive filenames before upload, because Shopify's CDN preserves them in the alt fallback and in some indexing signals.
• WebP is the default in 2026, AVIF is worth turning on for hero images, and Shopify's img_url filter does the conversion for you if your theme is modern.
• Only two things move LCP on a product page: the hero image format and whether it has fetchpriority="high". Everything else is a rounding error.

Alt text that ranks, the anti-stuffing rule

Alt text has one primary job: describe the image to a screen reader user. It has a secondary job: give search engines a text equivalent for the image so they can index it. Those two jobs align almost perfectly, which is why keyword-stuffed alt text fails at both.

Here is what keyword stuffing looks like, and why Google has been quietly downranking it since the 2023 helpful content update.

alt="organic cotton t-shirt buy cheap tshirts men women unisex cotton organic
tshirt sale discount best tshirt online store"

That is not a description. It is a list of keywords. A screen reader would read it verbatim, which is a terrible user experience, and Google's image understanding models flag it as low quality because the vision model can see the image is just a plain gray t-shirt on a white background.

Here is what good alt text for the same image looks like:

alt="Heather gray organic cotton crew-neck t-shirt on white background"

Thirteen words. Describes what is actually in the frame. Includes the material and color because those are relevant product attributes, not because they are keywords. Ranks better, passes WCAG audits, and does not embarrass you if a blind customer uses VoiceOver on your product page.

The 4-part alt text formula

For product imagery on Shopify, we use a four-part formula across every store we run SEO for. It scales to thousands of SKUs without anyone having to think about it.

Subject + attribute + context + brand-if-useful.

• Subject: What the thing actually is. "Crew-neck t-shirt," "walnut dining table," "running shoe."
• Attribute: The single most distinguishing visual feature. Color, material, size relative to frame, print, finish.
• Context: Where or how it is shown. "On white background," "worn by model," "on reclaimed oak floor," "close-up of stitching."
• Brand-if-useful: Only include the brand name if the product is brand-searchable (Nike, Le Creuset, Aesop). Do not stuff your own store name into every alt tag. Google already knows whose site it is.

Example for a lifestyle shot on a PDP:

alt="Model wearing navy wool overshirt over white tee, outdoor winter setting"

Example for a packaging shot:

alt="Aesop Resurrection hand wash 500ml amber glass bottle on marble counter"

Example for a studio shot of a furniture SKU:

alt="Walnut mid-century dining table, four-seat length, on white seamless"

None of those read as SEO copy. They read as descriptions. That is the point.

Filenames, dimensions, and upload rules

Before you hit upload on Shopify, three things need to be right, and fixing them after the fact is a pain because Shopify rewrites the URL on upload. Get it right the first time.

Filenames

Shopify preserves your original filename in the CDN URL. The filename ends up being part of the image URL and sometimes the fallback alt text. A filename like IMG_04382.jpeg tells Google nothing. A filename like heather-gray-cotton-tshirt-crewneck-front.jpg tells Google everything.

Rules for filenames before upload:

• All lowercase.
• Hyphens between words, no underscores and no spaces.
• Describe the product and the shot in 4 to 8 words.
• Include color, material, or variant when relevant.
• Never use sequential filenames from a camera. Rename before upload.

A batch-rename in Finder or Bridge takes 90 seconds per product shoot and pays off for the life of the store.

Dimensions

Do not upload the 6000 pixel wide raw file from the photographer. Shopify will compress it, but the compressed version is still larger than it needs to be, and you are paying bandwidth on every request.

Those file size targets assume WebP or AVIF format. JPEG at equivalent quality will be roughly 30 to 40 percent larger, which is why we push format conversion in the next section.

Upload rules

Upload once at the largest size a visitor will ever see on a 4K display. Shopify's img_url Liquid filter generates every smaller size on demand from that single source. Do not upload eight pre-sized versions, you are just duplicating storage and making your media library unmanageable.

WebP and AVIF on Shopify

Shopify's image CDN can serve WebP and AVIF, but it only does so if your theme asks for it. Older themes (anything built before Dawn, or custom themes written before 2022) often hardcode JPG or PNG output.

Check your theme. Look for how images are rendered in your product, collection, and section files. The modern pattern uses the image_url filter with format hints:

{{ product.featured_image | image_url: width: 2000 | image_tag:
   loading: 'eager',
   fetchpriority: 'high',
   sizes: '(min-width: 990px) 50vw, 100vw',
   widths: '400, 600, 800, 1200, 1600, 2000'
}}

The image_tag filter automatically outputs <picture> with WebP and AVIF fallbacks on modern Shopify themes, including Dawn 11+ and most Shopify-published themes released after 2024. If your theme predates that, you are either serving JPEG only or serving WebP only without AVIF. Both are leaving speed on the table.

If you need AVIF specifically, you can force the format with | image_url: width: 2000, format: 'avif', but be careful. AVIF compression is roughly 20 percent better than WebP for photographic content, but CPU decode time on low-end Android phones is higher. For a hero image, the byte savings outweigh the decode time. For a grid of 40 collection tiles, WebP usually wins overall.

Rule of thumb: use AVIF for the LCP image and WebP for everything else. Shopify's image_tag filter handles the negotiation for you via the <picture> element. Browsers that do not support AVIF fall back to WebP, then JPEG.

Lazy loading and LCP

Lazy loading is a one-line attribute that defers image loading until the image is near the viewport. It is almost free performance. Shopify's Dawn and most 2024+ themes apply loading="lazy" automatically to below-fold images, but there are three mistakes we see constantly.

Mistake 1: lazy loading the LCP image

If the first product image on a PDP loads lazily, you have just told the browser "do not prioritize this," which is exactly wrong. The LCP image on any Shopify page should have loading="eager" and fetchpriority="high". Everything else should be loading="lazy".

Mistake 2: no width and height attributes

Every image needs explicit width and height attributes, even when the CSS resizes them. Without those attributes, the browser does not know how much space to reserve, the page jumps when the image loads, and your Cumulative Layout Shift score tanks. The image_tag filter adds these for you. If you are writing raw HTML for any image, add them by hand.

Mistake 3: no sizes attribute

The sizes attribute tells the browser which variant from srcset to actually download. Without it, the browser guesses, usually poorly. For a PDP hero that is 50 percent of viewport on desktop and 100 percent on mobile:

sizes="(min-width: 990px) 50vw, 100vw"

For a 4-column collection grid on desktop, 2-column on mobile:

sizes="(min-width: 990px) 25vw, 50vw"

Get sizes right and the browser downloads the 800 pixel variant for a phone and the 1600 pixel variant for a desktop, instead of both devices grabbing the same file.

For a deeper dive on the speed side of this, see our Shopify speed optimization playbook, which covers theme code, third-party apps, and fonts in addition to images.

Image structured data

Google Image search has its own indexing pipeline. It reads structured data differently from regular web search, and adding image-specific schema is one of the few areas where the effort-to-return ratio is very high for ecommerce.

There are three types of image schema that matter for a Shopify store.

Product schema with image array

Every PDP should output Product schema with an image array containing all product gallery images, not just the featured image. Shopify's default theme outputs only the featured image, which is a missed opportunity.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Heather Gray Organic Cotton T-Shirt",
  "image": [
    "https://cdn.shopify.com/s/files/.../tshirt-front.jpg",
    "https://cdn.shopify.com/s/files/.../tshirt-back.jpg",
    "https://cdn.shopify.com/s/files/.../tshirt-detail-stitching.jpg",
    "https://cdn.shopify.com/s/files/.../tshirt-on-model.jpg"
  ],
  "description": "...",
  "sku": "TSHIRT-HGRY-M",
  "brand": { "@type": "Brand", "name": "YourBrand" },
  "offers": { "@type": "Offer", "price": "38.00", "priceCurrency": "USD", "availability": "https://schema.org/InStock" }
}

Google uses the image array to pick rich result thumbnails. Four images gives it four chances to pick a good one.

ImageObject schema for lifestyle and editorial images

For blog posts and editorial content, wrap the hero image in ImageObject schema inside the Article schema. This lets Google understand the image as a first-class entity, which matters for Google Discover and for image search.

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://cdn.shopify.com/s/files/.../lifestyle-hero.jpg",
  "creator": { "@type": "Organization", "name": "YourBrand" },
  "creditText": "Photo by Jane Doe",
  "copyrightNotice": "© 2026 YourBrand",
  "license": "https://yourbrand.com/image-license"
}

That last part matters more in 2026 than it did before. Google rolled out image licensing metadata as a ranking signal for commercial image search, and pairing it with visible creator credits improves inclusion in licensable image results.

BreadcrumbList alongside

Not strictly image schema, but pair every Product schema block with BreadcrumbList so Google can show the category path under the image rich result. That is a click-through-rate lift of roughly 15 to 20 percent in the categories we have measured it.

AI search engines (Perplexity, ChatGPT search, Google AI Overviews) lean on this structured data heavily because they often cannot or do not execute JavaScript. Server-render all of your schema blocks, never inject them from client-side JS. Same principle applies across every page type on your site, which we cover more in our D2C ecommerce SEO guide.

Alt text patterns per page type

Alt text guidance in the abstract is fine, but most ecommerce teams need per-template rules a merchandiser can follow without thinking. Here is what we bake into Shopify stores during a Shopify development engagement.

PDP (Product Detail Page)

Every PDP typically has 4 to 10 images. Assign a role to each slot and write alt text that matches the role.

• Slot 1, front hero: {Color} {material} {product type} front view Example: Heather gray organic cotton t-shirt front view
• Slot 2, back or reverse: {Color} {product type} back view showing {feature} Example: Heather gray t-shirt back view showing seamless yoke construction
• Slot 3, detail shot: Close-up of {specific feature} on {product} Example: Close-up of hemmed cuff on heather gray cotton t-shirt
• Slot 4, on-model lifestyle: Model wearing {product} in {setting/outfit context} Example: Model wearing heather gray t-shirt with dark jeans, outdoor setting
• Slot 5, scale or in-use: {Product} shown with {reference object or use case} Example: Heather gray t-shirt shown folded next to standard envelope for scale

Never use the same alt text on two images in the same gallery. Google sees that as thin and discards the duplicates from image search.

Collection pages

Collection tiles are tricky. If you write rich alt text for every tile, you get a crawlable, accessible collection page. If you leave alt blank or copy the product title, you get a collection page that is invisible to image search.

Rule: collection tiles should use the PDP slot-1 alt text by default, pulled dynamically from the product's featured image. Shopify's default theme does this if product.featured_image.alt is set on each product.

Collection hero banner

The big banner at the top of a collection page is a branding and context image. Write alt text that captures the collection's positioning, not the products in it.

Example for a collection called "Merino Essentials":

alt="Folded stack of merino wool sweaters in rust, charcoal, and cream on oak table"

Example for a seasonal banner:

alt="Winter outerwear collection, navy parkas and cream cable knits on snowy backdrop"

Blog posts

Blog images earn traffic from Google Image search and Pinterest, both of which read alt text as primary ranking signal. Every inline image in a blog post needs:

• A descriptive alt tag using the 4-part formula.
• A descriptive filename, hyphenated.
• A caption when the image conveys data or context a reader might quote. Captions are a stronger SEO signal than alt text for editorial content because they are visible on the page.

For infographics and charts, the alt text should summarize what the chart shows, not describe it visually. "Bar chart showing Q3 revenue growth of 24 percent year over year, with apparel leading at 31 percent" beats "bar chart with four bars."

What to do this week

• Audit your top 5 product pages. Open each PDP, open DevTools, filter by Images, and check that the hero image is WebP or AVIF, under 200 KB, and has fetchpriority="high".
• Run the home page and top collection page through PageSpeed Insights. Record the LCP image. If it is not a WebP or AVIF served at the correct size, that is the first fix.
• Pick one product that matters and rewrite all gallery alt text using the 4-part formula. Measure image search impressions for that product in Google Search Console 30 days later. If it works there, roll the pattern to the full catalog.
• Check your Product schema on three PDPs with Google's Rich Results Test. If image is returning only one URL, fix the theme to emit the full gallery.
• Add loading="lazy" to any blog images that do not already have it. This is a 10-minute theme edit in article-template.liquid.

FAQ

Does Shopify compress my images automatically?

Yes, Shopify's CDN compresses uploaded images and serves them in WebP to browsers that support it, as long as your theme uses the image_url filter with no explicit format override. It does not resize them beyond the dimensions you request, and it does not convert JPEG to AVIF unless your theme requests AVIF specifically. Upload at the largest size you need, let the CDN handle the rest.

Should I use underscores or hyphens in image filenames?

Hyphens. Google treats hyphens as word separators and underscores as part of the same word, per their own documentation. red-leather-wallet.jpg gets indexed as three words, red_leather_wallet.jpg gets indexed as one. Hyphens every time.

How many product images should a PDP have?

For apparel, 6 to 8 (front, back, detail, on-model, scale, texture, packaging, lifestyle). For homewares and furniture, 8 to 12 (more angles, more in-context shots). For consumables, 4 to 6 (packaging front and back, ingredient shot, in-use, lifestyle). More images correlate with higher conversion up to roughly 8 images on apparel and 12 on furniture, after which the effect flattens. All of them need unique alt text.

Can I keyword-stuff alt text if I do it subtly?

No. Google's image understanding models compare alt text to what the image actually contains. If your alt says "best organic cotton t-shirt for men" and the image is clearly a product shot of a t-shirt on a hanger, the mismatch gets flagged as low quality. Write accurate descriptions. Rankings follow. For more on how search engines parse your site at the structural level, see our SEO services page.

What about decorative images, do they still need alt text?

Decorative images (background patterns, visual dividers, purely aesthetic flourishes) should have an explicitly empty alt attribute: alt="". This tells screen readers to skip them and tells Google they are not content. Do not omit the alt attribute entirely, that is ambiguous. Empty alt is the correct pattern for decoration. Anything that conveys meaning, branding, or context needs real alt text.