Shopify product image optimization in 2026 — specs, SEO, and Core Web Vitals
2026 Shopify image specs, WebP vs JPEG vs PNG, alt-text formulas, Core Web Vitals impact, and how AI-generated product photos plug into your variant image workflow without breaking page speed.
By the AngleForge team
Shopify will serve your image at whatever quality you give it, but Google's Lighthouse score, your conversion rate, and your Google Shopping placement all depend on whether you gave it the right one. This is the 2026 spec sheet.
Shopify's documentation lists technical maximums but does not tell you what to actually ship. The numbers below are practical targets, tuned for the intersection of brand polish, mobile speed, and Google Shopping eligibility.
The 2026 Shopify image specs cheat-sheet
- Master size: 2048×2048 square is the conversion sweet spot — sharp on 4K monitors, sane on mobile.
- Aspect ratio: 1:1 for PDP gallery, 4:5 for collection thumbnails, 16:9 for Instagram/Pinterest cross-posts. Generate all three from one source.
- File size target: under 500 KB. Above that, mobile LCP suffers (more below).
- Maximum dimensions: 4472 × 4472 — Shopify will reject above this.
- Maximum file size on upload: 20 MB.
WebP vs JPEG vs PNG — what Shopify actually serves
Upload PNG or JPEG; Shopify's CDN automatically generates and serves WebP variants to compatible browsers (every browser shipped after 2021). You should not pre-convert to WebP yourself — Shopify's CDN is smarter about per-image quality settings than most local tools, and pre-WebP uploads sometimes confuse the CDN's transformation cache. The exception: PNG for transparent backgrounds (alpha channel). Use PNG only where transparency matters.
Core Web Vitals — the image dimension that affects SEO
Google's Core Web Vitals — LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint) — are ranking signals. On a Shopify PDP, the hero image is almost always the LCP element. A slow-loading hero pulls down your search rank directly.
- 1Set fetchpriority='high' on the hero <img>. Most Shopify themes shipped after late 2024 do this automatically — verify in Lighthouse.
- 2Preload the hero in the theme's <head> with <link rel='preload' as='image'>. This shaves 200–600 ms off mobile LCP.
- 3Specify width and height on every <img>. Prevents CLS — Shopify's image_tag helper does this by default.
- 4Lazy-load every image below the fold. loading='lazy' on the <img>; Shopify's image_tag handles this when you pass loading: 'lazy'.
- 5Serve responsive widths with srcset — let mobile devices download the 750-px variant instead of the 2048-px master.
Alt text — the underused SEO multiplier
Shopify reads alt text into structured product schema, accessibility tools, and Google Image search ranking. Most stores ship empty alt text or duplicate the product title across every image. The formula that wins is: '[Primary keyword] [angle/context] on [background]'. Examples: 'Hammered copper hoop earrings, side profile on linen'; 'Lavender shampoo bottle, label macro on ivory'; 'Oak dining chair, 45 degree editorial in lifestyle scene'. Three to twelve words. Different alt text per image.
Variant images — the Shopify-only quirk
Shopify lets you assign one image per variant. When a buyer changes the colour drop-down, that image swaps into the gallery. Most stores upload one variant image (the front-facing colour swap) and leave the rest of the gallery static. The high-converting setup: assign a different hero image per variant. Photograph each colourway once (a flat, even-lit frame is enough) and generate that colour's angles from it with the same settings as the others. This way the buyer sees the right colour in the right gallery, and your photographer shoots one simple frame per colour instead of a full set. See our colourway playbook for the workflow.
Google Shopping feed compatibility
Shopify's Google channel app pushes your product images to Google Merchant Center. The feed-eligibility rules are stricter than Shopify's display rules: minimum 250 × 250, recommended 1200 × 1200, no watermarks, no text overlays in the primary image, no promotional badges. Use the gallery hero (untouched product on neutral background) as the Merchant Center 'image_link' and reserve marketing overlays for an 'additional_image_link'. AngleForge's Google Shopping export preset outputs 1000 × 1000 images on white, with IPTC metadata marking them as AI-generated.
IPTC and C2PA metadata — what to check
Since 2024, Google has surfaced IPTC metadata in image search results. From August 2026, the EU AI Act expects AI-generated imagery to be marked in a machine-readable way; C2PA content credentials and the IPTC 'digital source type' field are the common ways to do it. Image CDNs often strip embedded metadata when they resize, so check whether the files your theme serves still carry it. Check what your tools write, too: AngleForge adds the IPTC AI tag (DigitalSourceType = trainedAlgorithmicMedia) to its Google Shopping exports only, and it doesn't write C2PA. Most generic AI image generators write neither.
File naming conventions that compound
Shopify stores the uploaded filename and uses it in the asset URL. Google reads URLs for context. Three rules: use lowercase hyphenated names with the primary keyword and angle suffix (hammered-copper-earrings-side.jpg); never use Shopify's auto-generated random hashes; standardise across the catalog so similar SKUs sort together in the admin.
A 30-minute Shopify image audit
- 1Run any PDP through PageSpeed Insights mobile. Note the LCP element and time.
- 2Open the LCP image directly. Is it served as WebP? Is the file size under 500 KB? Is the resolution appropriate (i.e. you're not shipping a 4K image to a 320-pixel mobile slot)?
- 3View source on the PDP. Confirm width / height are set on the hero, fetchpriority='high' is present, and lazy-loading is on for below-the-fold images.
- 4Open the Liquid image_tag in your theme. Confirm it generates srcset with at least three breakpoints (375, 750, 1500).
- 5Audit alt text on a sample of ten products. Anything empty, duplicated, or template-default is a fix.
- 6Open Google Merchant Center → Diagnostics. Image-related warnings are silent demotions of your Shopping ads.
Where AngleForge fits in a Shopify pipeline
Generate each variant's angle set with AngleForge, then export it with the Shopify preset: 2048 × 2048 JPEG masters, sized for the square PDP gallery. Rename the files to your keyword-and-angle convention, then upload through Shopify's bulk media import or Matrixify if you run thousands of SKUs. The conversion-side wins compound: faster catalog cycles and consistent variant imagery.