Shopify Product Image SEO: File Names, Alt Text, and Format (AVIF vs WebP vs JPG)

What Shopify does automatically for images

Before touching anything manually, it's worth understanding what Shopify's platform already handles for you - because a surprising amount of "image SEO advice" online recommends redoing work Shopify is already doing correctly, and doing it worse.

First, format serving. Every image uploaded to Shopify is stored on Shopify's CDN and served through an automatic content-negotiation layer. When a browser requests an image, Shopify inspects the Accept header the browser sends and serves AVIF to browsers that support it, WebP to browsers that support that but not AVIF, and falls back to the original JPG or PNG for anything older. You upload one JPG; Shopify serves three different formats depending on who's asking. This has been default behaviour since 2021 and applies to every image on every Online Store 2.0 theme without any configuration.

Second, responsive resizing. Shopify's CDN accepts width, height, and crop parameters directly in the image URL (for example ?width=800) and themes built on the Online Store 2.0 architecture use the image_url and srcset Liquid filters to request differently sized versions of the same source image for mobile, tablet, and desktop breakpoints. You upload one high-resolution master file; the CDN generates and caches every size variant a template asks for. This means you should always upload the highest-quality source image you have - Shopify will downsize it as needed, but it can't upsize a low-resolution original without visible quality loss.

Third, lazy-loading. Since the Online Store 2.0 theme architecture became standard, Shopify's default theme templates apply the native loading="lazy" attribute to below-the-fold images automatically, deferring their download until the browser predicts the user is about to scroll to them. Above-the-fold hero images should be excluded from lazy-loading and instead marked with fetchpriority="high" so the browser prioritises them for Largest Contentful Paint - most themes handle this correctly out of the box, but custom sections built by app developers or freelancers sometimes lazy-load the hero image by mistake, which directly damages LCP scores. This is one of the most common template-level bugs we find on Shopify site audits.

None of this requires you to install a compression app, manually convert files to WebP before uploading, or rebuild your image pipeline. It requires you to check your theme isn't overriding the defaults in a way that breaks them - and then focus your actual effort on the three levers below, which Shopify does not automate.

The three levers you control

Once format serving, resizing, and lazy-loading are confirmed working, everything left in Shopify image SEO comes down to three inputs that the platform will not fill in for you.

File names matter because Google Images uses the URL slug of an image as a ranking signal in its own right, separately from the alt attribute and the surrounding page content. A file called IMG_4821.jpg or sku-88213.jpg gives Google Images nothing to work with. A file called sofia-bridal-dress-lace-front.jpg tells Google exactly what's in the photo before it even needs computer vision to confirm it.

Alt text matters for the same reason, plus accessibility compliance, plus it's one of the signals AI Overviews and shopping-style SERP features draw on when deciding which product image to surface for a given query. Format overrides matter least for most stores but most for stores where hero-image weight is dragging down Largest Contentful Paint on the homepage or top landing pages - see our Shopify page speed article for how LCP is scored.

Lever 1: File names - the framework

We use one framework across every Shopify image SEO engagement, because consistency at catalogue scale matters more than cleverness on any single file:

Each component earns its place. Brand anchors the image to a specific, searchable entity and helps disambiguate generic product types (a "lace dress" is one of millions; a "Sofia Bridal lace dress" is one specific product). Product type gives Google Images the category signal it needs to serve the image against category-level queries. Attribute is the differentiator - colour, material, pattern, or style detail - and is usually the highest-value keyword slot in the file name because it's what separates one SKU from another in a way shoppers actually search for. View (front, back, detail, lifestyle, swatch) prevents duplicate-looking file names across a product's image set and gives Google a hint about framing, which matters for visual search matching.

Worked example: a product titled "Sofia Bridal Dress with Lace Sleeves" in a UK 12, photographed from four angles, should produce four file names - sofia-bridal-dress-lace-front.jpg, sofia-bridal-dress-lace-back.jpg, sofia-bridal-dress-lace-detail.jpg, and sofia-bridal-dress-lace-lifestyle.jpg - rather than four variations of IMG_4821.jpg, IMG_4822.jpg, and so on, which is what a phone camera or a photographer's export folder produces by default.

On the tested impact: across the catalogues we've audited and rebuilt file names for, image-search-driven sessions increased in every case where the "before" state was camera-default or SKU-numeric naming, though the size of the lift depends heavily on category - visually distinctive products in categories where shoppers browse Google Images directly (fashion, homeware, jewellery) see a larger effect than commodity products bought on spec (cables, fixings, consumables).

A practical constraint: Shopify does not let you rename an image file after upload without re-uploading it, and re-uploading breaks any existing image URL that's been indexed or shared. Rename files on your local machine or in your DAM before upload, always, and treat a bulk rename-and-reupload of a live catalogue as something to batch and monitor for indexing disruption rather than something to do casually mid-week.

Try it: image name generator

Lever 2: Alt text - templating at scale

Alt text is not optional infrastructure - it's a direct ranking input for Google Images, a Core accessibility requirement, and increasingly a data source AI Overviews and shopping surfaces draw on to decide which product image to show against a query. Shopify leaves the field blank on every image, on every theme, by default. Nothing populates it automatically unless you build that automation yourself.

The approach depends entirely on catalogue size. For stores under roughly 100 SKUs, manual alt text is the right call: write one unique, descriptive sentence per image, in the merchandiser's or copywriter's own voice, covering what's in the photo and the key attribute a shopper searches for. This produces the highest-quality alt text and there's no meaningful efficiency gain from automating fewer than a hundred images.

For catalogues between roughly 100 and 500 SKUs, a hybrid model works best: manual alt text for your top-revenue products (the ones actually worth the writing time), and a metafield-driven template for the long tail. Above 500 SKUs, manual alt text stops being realistic as an ongoing process - new products get added faster than a human can write bespoke alt text for every image, and the field silently reverts to blank. This is where templating via metafields becomes essential rather than optional.

The templating pattern pulls from data that already exists on every product: the product title, the selected or first variant title, and - for images where the automatic combination reads awkwardly - a metafield-driven override that lets a merchandiser hand-correct specific images without touching the underlying template. This gives every image a reasonable, unique-enough alt text by default, with an escape hatch for the handful of images where "good enough, automatically" isn't good enough.

The Liquid pattern, by image role

Hero images, product images, and collection-grid images each need a slightly different template because the data available and the priority differs - a hero banner has no product variant to pull from, while a collection grid image needs the collection context baked in for disambiguation.

{% assign alt_text = product.title | append: ' - ' | append: product.selected_or_first_available_variant.title %}
{% if product.metafields.custom.alt_override != blank %}
  {% assign alt_text = product.metafields.custom.alt_override %}
{% endif %}
<img src="{{ image | image_url: width: 800 }}" alt="{{ alt_text | escape }}" loading="lazy">

Note the escape filter on every snippet - alt attributes containing unescaped apostrophes or ampersands from product titles (a common issue with names like "Women's" or "Bed & Bath") will silently break the HTML attribute and can drop the image from validation entirely. This is one of the five common mistakes covered further down.

Lever 3: Format and compression - AVIF vs WebP vs JPG

Here is the contrarian point most Shopify image SEO guides get backwards: they recommend manually converting every image to WebP or AVIF before uploading. For the overwhelming majority of Shopify stores, this is unnecessary work that duplicates what the CDN already does automatically, and it removes Shopify's ability to serve the original format to older browsers that don't support your manually-chosen format.

Shopify's CDN performs content negotiation on every request: it reads the requesting browser's Accept header and serves AVIF, WebP, or the original format accordingly, generated and cached on the fly. If you manually upload a WebP file instead of a JPG, you've locked every visitor into that one format regardless of what their browser actually supports best, and you've lost Shopify's ability to serve a smaller AVIF version to browsers that would prefer it. The correct default for the vast majority of product, thumbnail, and collection images is: upload a high-quality JPG or PNG original and let Shopify's CDN handle format negotiation.

The exception is hero and lifestyle imagery used above the fold on high-traffic landing pages, where every kilobyte affects Largest Contentful Paint at meaningful scale. For these specific images - typically fewer than a dozen per store - manually pre-compressing and testing an AVIF export against Shopify's automatic output can shave additional load time, because you can apply more aggressive, hand-tuned compression settings than a generic automatic pipeline will choose by default. This is a targeted override for a small number of high-impact images, not a blanket policy for the catalogue.

Bench-tested format data across 12 Shopify stores

To quantify the difference, we benchmarked AVIF, WebP, and JPG output across 12 live Shopify stores spanning fashion, homeware, and B2B catalogues, sampling hero, product, and thumbnail images from each. The chart below shows averaged file size by image type and format, plus relative encode time and current browser support.

Two things stand out. First, the file-size gap between AVIF and JPG is largest on hero images - roughly a 65% reduction - which is exactly where LCP-sensitive optimisation matters most, and exactly why a manual override is worth the effort only for that specific image type. Second, AVIF's encode time is meaningfully higher than WebP's, which is precisely why Shopify's automatic pipeline, running at platform scale across millions of stores, is generally a safer default than a bespoke manual conversion process that a smaller team has to maintain and re-run every time a new image is uploaded.

Browser support for AVIF now sits above 93% globally, which is why Shopify defaults to serving it wherever supported rather than treating WebP as the ceiling - a distinction that matters if you're benchmarking your store's image weight against guides written before AVIF support matured.

Image sitemap on Shopify

Shopify automatically includes image URLs inside its standard XML sitemap entries - each <url> block for a product page carries an <image:image> extension referencing the product's featured image, without any separate configuration. This is different from a dedicated image sitemap and, for the majority of stores, it's sufficient: Google discovers and indexes product images through the same crawl pass as the page itself.

The annotation worth noting: Shopify's automatic sitemap entry references only the single featured image per product, not every image in a product's gallery. For most stores this is a non-issue - Google Images primarily surfaces the featured image against product-style queries anyway. It becomes a genuine limitation for stores where secondary gallery images (a detail shot, a size-chart graphic, a lifestyle image showing the product in context) carry independent search value and aren't otherwise linked from anywhere else on the page.

In that specific situation - typically large fashion or homeware catalogues where detail and lifestyle shots each have distinct search demand - submitting a supplementary image sitemap that lists every gallery image explicitly, generated via a scheduled export or a lightweight app, gives Google a direct discovery path to images it would otherwise only find by rendering the page and parsing the gallery JavaScript. For the majority of stores below this scale, the standard automatic sitemap is enough and a supplementary sitemap is unnecessary maintenance overhead.

Common image SEO mistakes on Shopify

Automating image SEO with metafields and Liquid

For catalogues above 500 SKUs, the sustainable long-term approach is to treat alt text as a derived field rather than a manually maintained one. Set up a metafield definition for alt-text overrides (a simple single-line text field scoped to products), extend the product template's image loop to check the metafield first and fall back to the auto-generated pattern from product title and variant, and - critically - build this into your product-upload process documentation so new products inherit good defaults from day one rather than requiring a retroactive clean-up project every twelve months.

The same pattern extends to file names if you're managing bulk imports via CSV or a PIM (product information management) system feeding Shopify: build the file-name framework into your image-export step so files arrive at Shopify already correctly named, rather than relying on manual renaming inside the Shopify admin, which doesn't scale past a handful of products per week.

This automation-first approach is the same principle behind our broader Shopify SEO guide and the product page checklist: template-level fixes compound across every product automatically, while per-SKU manual work only ever covers the SKUs you had time to touch. Image SEO on a large catalogue is a template problem first and a content problem second.

Frequently asked questions