RankEngineQuick answer: Image SEO on Shopify is mostly a speed problem, not a keyword problem. Product photos are the largest thing on the page and usually the Largest Contentful Paint element, so picture file size, pixel dimensions and loading priority move rankings more than filenames do. Upload at 2048 px on the longest edge, keep the first image under about 200 KB, set width and height, lazy-load only below the fold, and let Shopify’s CDN serve the resized WebP variants. This guide covers sizes, file sizes, resolution, resizing and formats; for alt text see product image alt text, for the share preview see social sharing images.
Shopify serves images through its own CDN and generates responsive variants automatically, which means a lot of generic image-SEO advice does not apply here. What is left is a short list, and most of it is about weight and dimensions.
Why images dominate Shopify Core Web Vitals
On a typical product page the hero image is the LCP element — the largest thing in the viewport, and the thing Google times. If it takes 3.5 seconds to paint, the page fails LCP no matter how fast the rest of the theme is.
Two things make it slow: the file is bigger than the space it renders into, and it is not prioritised. A 2400 px image displayed at 800 px wastes three quarters of the bytes. Shopify's image_url filter with a width parameter fixes this, and most modern themes already use it — but images inserted into rich-text fields, blog bodies and custom sections usually bypass it entirely.
Image size, file size and resolution are three different things
Most image advice fails because it mixes these up.
- Image size is pixel dimensions — 2048 × 2048. It decides how sharp the image can be and how large it can be displayed.
- File size is bytes on disk — 180 KB. It decides how long the image takes to download. It depends on dimensions, format, compression and how much detail the photo contains.
- Resolution (DPI) is a print instruction. Browsers ignore it. A 1600 px image at 72 DPI and the same image at 300 DPI are the same web image; the "save at 72 DPI for web" rule changes nothing but the metadata.
The variable that does matter alongside pixels is device pixel ratio. A phone with a 2× screen needs roughly twice the CSS width in real pixels to look crisp: an 400 px wide product card wants an 800 px image on that device and a 400 px image on a 1× monitor. That is what srcset and sizes are for — the theme lists the variants Shopify can generate and the browser picks the one that fits. Themes built on Shopify's image_tag filter emit these automatically; a hand-written img tag in a custom section gets one size for everyone.
Picture file size targets by placement
A single "keep images under 100 KB" rule is wrong in both directions — too loose for thumbnails, too tight for a full-width banner. Work by placement:
| Placement | Typical display width | Working file-size target | Why |
|---|---|---|---|
| Homepage hero / full-width banner | 1600–2000 px | ≤ 200 KB (WebP), ≤ 300 KB (JPEG) | Almost always the LCP element on the homepage |
| First product image (gallery lead) | 800–1200 px | ≤ 200 KB | LCP element on the product page |
| Additional gallery images | 800–1200 px | ≤ 100–150 KB | Loaded on interaction or lazily |
| Collection-grid cards | 300–500 px | ≤ 50 KB | Dozens per page; the sum is what hurts |
| Blog inline images | 700–900 px | ≤ 100 KB | Usually bypass the theme's variant logic |
| Logos, icons, badges | ≤ 300 px | ≤ 10 KB, SVG where possible | Repeated on every page |
These are working targets, not laws: a detailed fabric close-up will need more bytes than a product on a white background at the same dimensions. The test that matters is whether the first image on the page clears the LCP budget.
Formats: JPEG, PNG, WebP and what Shopify does for you
- JPEG for photographs. Export quality 75–82 is the range where a product photo stops visibly changing but the file keeps shrinking.
- PNG only for flat graphics that need transparency — logos, badges, illustrations with hard edges. A PNG photograph is routinely five times the size of the same JPEG.
- WebP is smaller than both for the same visual quality, and Shopify's CDN serves WebP automatically to browsers that accept it. Converting before upload therefore gains nothing on the storefront; what does help is that an app which replaces an oversized original with a WebP version shrinks every variant Shopify generates from it.
- SVG for logos and icons: resolution-independent and usually a few kilobytes.
Resizing images for Shopify: where to do it
There are three places to resize, and they are not interchangeable.
Before upload (preferred for new images). Resize to 2048 px on the longest edge, then compress. Any image editor or a free web compressor does this, and it means the original Shopify keeps is already lean. Batch-export a whole shoot at the same size and aspect ratio so the collection grid stays even.
Inside Shopify, by the theme. Shopify's variants are the delivery layer: the theme requests a width and the CDN returns that size. This is automatic and correct, but it only shrinks dimensions — a heavy, noisy original still produces heavier variants than a clean one would.
By an app that rewrites the original. This is the only route that fixes images already in the catalog without re-uploading. RankEngine's Autopilot has an Auto Image Compression rule that converts oversized product images to WebP and replaces the original through the Admin API (productCreateMedia, then productDeleteMedia), and its activity log records each conversion with the size before and after — see Setting up Autopilot rules. Re-uploading manually has a cost the app route avoids: it changes the image URL, which breaks links and cached references to the old file.
The performance-versus-quality trade-off, honestly
Compression guides tend to promise no visible loss. The honest version: there is a loss, and the question is whether a shopper can see it at the size the image is displayed. Check the result on the real product page at 100%, on a phone, not in the editor's zoomed preview. Banding in a smooth gradient, halos on hard edges and mushy fabric texture are the three tells; if you see them, step the quality up five points and export again. The gain from 82 down to 60 is small in bytes and large in artefacts, which is why the useful range is narrow.
What to actually do
Upload at 2048 px on the longest edge. Shopify generates smaller variants from the original, so uploading larger wastes storage without improving anything. Uploading smaller means the zoom view is soft.
Let Shopify serve WebP. It does this automatically based on the browser's Accept header. Manually converting before upload gains nothing and costs you the JPEG fallback.
Set width and height attributes. Missing dimensions cause layout shift as the image loads, which is a direct CLS penalty. Themes that use image_tag get this free; hand-written img tags in a custom section usually do not.
Lazy-load everything below the fold — and nothing above it. A lazy attribute on the hero image delays the LCP element and makes the score worse. The first image should carry a high fetch priority instead.
| Image position | Loading strategy | Reason |
|---|---|---|
| Above the fold (hero / LCP element) | fetchpriority="high", no lazy loading | Lazy-loading moves the largest visible paint element later and makes the score worse |
| Above the fold (other images) | Eager (the default) | Visible images should not be deferred |
| Below the fold | loading="lazy" | Off-screen images are deferred, reducing initial page weight and freeing bandwidth for the LCP element |
Compress before upload if the source is a camera file. Shopify's processing is not aggressive. A 6 MB DSLR JPEG becomes a 900 KB variant; the same image run through a compressor first becomes 200 KB with no visible difference.
Filenames and alt text: the honest version
Filenames are a weak signal. Renaming IMG_4821.jpg to blue-merino-scarf.jpg is worth doing when you are uploading anyway, and is not worth a bulk re-upload project — re-uploading breaks existing image URLs and any links to them.
Alt text matters more, mostly for accessibility and Google Images, and it is covered properly in product image alt text. The free alt-text generator writes it one image at a time in the browser.
The one thing worth measuring
Run a product page through PageSpeed Insights and look at only two numbers: the LCP element (it will name the image) and its size. If the LCP element is an image over 200 KB, that is the whole project.
Everything else — filenames, sitemaps, EXIF data — is rounding error next to the image that takes two seconds to paint.
Doing it across a catalogue
The per-page version of this is straightforward. The catalogue version is not: on 800 products the oversized images are a subset, usually the oldest ones or a batch imported from a supplier feed.
RankEngine's speed audit reports per-URL LCP with the offending image named, and its image tools flag oversized files and missing dimensions across the catalogue rather than per page; the compression and alt-text rules then fix them on the daily Autopilot run within the per-store fix cap, with each change verified against the store and revertible from the log.
Checklist for your next image batch
- Same aspect ratio for every image in the collection.
- 2048 px on the longest edge, exported at JPEG quality 75–82 (or WebP).
- First image on the page under 200 KB; grid thumbnails under 50 KB.
- Descriptive filename if you are uploading anyway; never a re-upload just to rename.
- Alt text written for the product, not the keyword.
- After publishing: PageSpeed Insights on one product page — confirm the LCP element and its size.
Related
- Product image alt text — what alt text does, what it does not, and how to write it.
- Social sharing images — the Open Graph preview, which is a different image with different rules.
- Free SEO audit — what the store audit checks beyond images, including per-URL LCP.