What is the best image format for Shopify?

WebP for most product images — it delivers similar quality to JPEG at noticeably smaller file sizes and is supported by every current browser. Shopify's CDN serves WebP automatically to browsers that support it, so uploading high-quality JPEGs and letting Shopify convert is usually the right workflow.

Does image file name affect SEO?

Mildly, and mostly for image search. A descriptive file name like merino-base-layer-charcoal.jpg gives search engines a small additional signal versus IMG_4821.jpg. It matters far less than alt text and page speed, but it costs nothing to do at upload time.

How much do images affect Core Web Vitals?

A lot. Product images are typically the largest element on the page, which makes them the Largest Contentful Paint element on most product pages. Unsized images are also the most common cause of Cumulative Layout Shift. Image optimisation is usually the highest-impact page speed work available to a Shopify store.

Shopify Image SEO: The Complete Optimization Guide

On a typical Shopify product page, images account for the large majority of the page weight and almost none of the optimisation effort. That imbalance is worth fixing, because image work pays out in three places at once: page speed, image search traffic, and accessibility.

Here is the complete checklist.

1. Size Images Before Upload

Shopify's CDN will resize and serve responsive variants, but it cannot undo a badly sourced original.

Practical targets:

Product images: 2048×2048px maximum. Larger adds file size with no visible gain on any real display.
Hero and banner images: 1920px wide is plenty.
Thumbnails: let Shopify generate these — never upload separately.

Uploading a 6000px camera original for a 600px display slot is the single most common image mistake on Shopify stores.

2. Compress Before Upload

Aim for under 200KB per product image, under 500KB for a full-width hero.

Shopify applies some compression automatically, but starting from an already-optimised file produces better results than relying on it. Run originals through a compression tool before uploading — the quality difference is usually invisible and the size difference is often 60–70%.

3. Use Descriptive File Names

merino-base-layer-charcoal-front.jpg beats IMG_4821.jpg.

The effect is modest and limited mostly to image search, but it costs nothing at upload time and is essentially impossible to retrofit across a large catalog later.

Keep them lowercase, hyphenated, and descriptive of what is actually in the frame.

4. Write Alt Text for Every Image

The most-skipped item, and it costs on two fronts: screen reader users cannot perceive the image at all, and you forfeit image search visibility.

Good alt text describes what is visible:

alt="Charcoal merino wool base layer, front view, on a hanger"

Bad alt text stuffs keywords or states nothing:

alt="base layer merino wool thermal shirt buy online best price" alt="product image"

Keep it under 125 characters. Describe the image, not the product listing.

Decorative images — background textures, spacer graphics — should have empty alt (alt=""), which tells screen readers to skip them rather than announce a filename.

5. Set Explicit Dimensions

Images without width and height attributes cause layout shift: the page renders, then jumps as each image loads and claims its space.

That jump is measured directly as Cumulative Layout Shift, a Core Web Vital. Most modern Shopify themes set dimensions correctly; heavily customised sections frequently do not.

6. Lazy Load Below the Fold — But Not Above It

Lazy loading defers off-screen images until needed. Applied to your main product image, it delays the largest element on the page and actively hurts LCP.

Rule: eager-load the first product image and anything above the fold. Lazy-load everything below.

7. Serve Modern Formats

WebP delivers comparable quality at meaningfully smaller sizes than JPEG and is universally supported now.

Shopify's CDN handles conversion automatically for browsers that support it — which means your job is uploading good-quality originals and letting the CDN do format negotiation, not manually creating WebP files.

8. Use Responsive Image Sets

A phone should not download a 2048px image to display it at 400px wide. Shopify's image_url filter with srcset handles this, and current themes implement it — but custom sections added by an agency or a previous developer often do not.

Check by loading a product page on a mobile viewport and inspecting which image file actually downloads.

9. Include Images in Structured Data

Product schema should include an image field with a full absolute URL. This is required for most rich result formats — a product result without an eligible image loses the most visually prominent part of the listing.

10. Do Not Put Text Inside Images

Text baked into an image is invisible to search engines, unreadable by screen readers, untranslatable, and blurry on high-density displays.

If a banner needs a headline, it should be HTML text positioned over the image, not part of the JPEG.

Impact Summary

Task	Speed	Image search	Accessibility	Effort
Compress and size	High	—	—	Low
Alt text	—	High	High	Medium
Explicit dimensions	High (CLS)	—	—	Low
Lazy load correctly	High (LCP)	—	—	Low
Responsive srcset	High	—	—	Medium
Descriptive filenames	—	Low	—	Low
Modern formats	High	—	—	Low
Schema image	—	Medium	—	Low

Where the Effort Actually Goes

Items 1, 2, 5, 6, and 7 are largely one-time configuration — set the workflow correctly and they stay solved.

Alt text is the ongoing one. Every image, every new product, forever, at roughly a minute each. On a 300-product catalog with four images apiece, that is a 20-hour project nobody schedules — which is exactly why most stores have alt text on the homepage and nowhere else.

Wrivo AI generates alt text alongside product descriptions and SEO fields, so it gets written as part of the normal product workflow instead of as a separate project. Free plan, unlimited products.