Shopify Image Optimization: What the Platform Does (and Doesn't Do) For You

Shopify stores are often blamed on a "heavy theme" when the real cause is a single collection banner uploaded at 8000×5000 pixels and 14 MB. Shopify will happily serve that file to every visitor's phone. The platform does a lot for image delivery — but not everything.

What Shopify Does Automatically

• ●WebP serving: Shopify's CDN automatically serves WebP to browsers that support it — without any action from you
• ●Global CDN: All images are served from Shopify's Fastly CDN — low latency globally
• ●Thumbnail generation: Shopify generates multiple sizes (100px, 160px, 240px, 480px, 640px, 1024px, 2048px) from your uploaded image
• ●Lazy loading: Most themes apply loading="lazy" to product images

What Shopify Does NOT Do

• ●Shopify won't refuse an oversized upload — a 15 MB, 8000×5000px image uploads successfully
• ●Shopify won't fix a poor quality source — if you upload a blurry, over-compressed JPEG, the CDN serves a blurry, over-compressed image
• ●Shopify won't add fetchpriority="high" to your LCP image — theme code controls this; most themes don't do it
• ●Shopify won't strip EXIF metadata — GPS coordinates, device info, and timestamps are preserved

The LCP Problem on Shopify Stores

The LCP element on most Shopify stores is the hero banner or the first product image. Common LCP failures:

• ●Banner image uploaded at 4000×2000px — Shopify CDN serves a large file even at 2× size
• ●loading="lazy" on the hero — deferred fetch delays LCP
• ●No fetchpriority="high" on the hero image
• ●Banner served as full-width 1920px image on a 390px phone screen

Practical Shopify Image Checklist

1. 1.Banner/hero images: Upload at exactly 1920×600px (standard banner) or 2048px max, compressed to under 300 KB
2. 2.Product main image: 2048×2048px, JPEG quality 80, under 400 KB
3. 3.Product gallery: Same as main — Shopify generates thumbnails from the same source
4. 4.Collection page images: Shopify renders these at ~450px — a 1200px source is plenty; aim for 100–200 KB
5. 5.Strip metadata before upload: Remove GPS, device info, and timestamps

{%- comment -%}
  Add fetchpriority="high" to the LCP hero image in your theme:
{%- endcomment -%}
{%- if section.index == 1 -%}
  {%- assign fetchpriority = "high" -%}
  {%- assign loading = "eager" -%}
{%- else -%}
  {%- assign fetchpriority = "auto" -%}
  {%- assign loading = "lazy" -%}
{%- endif -%}

<img
  src="{{ image | image_url: width: 1920 }}"
  loading="{{ loading }}"
  fetchpriority="{{ fetchpriority }}"
  width="1920" height="600"
  alt="{{ image.alt }}"
>

Before uploading to Shopify: resize banner images to 1920px wide and product images to 2048×2048px, then compress to under 400 KB. Compress your product images here — everything happens in your browser, nothing is uploaded.