Shopify Image SEO: Alt Text, Compression, and Lazy Loading

Start with alt text because it does double duty: accessibility for screen readers and context for Google Images and AI answer engines. Describe what's in the image using natural language and the product's real name, not a keyword dump. Write "Matte black stainless steel water bottle, 750ml" instead of "water-bottle buy cheap best." In Shopify, edit alt text under Products > media, or in the theme editor for banners. Leave alt empty only for purely decorative images so screen readers skip them.

Compression is where most Shopify stores lose speed. Shopify serves images through its CDN and can output WebP automatically, but it does not shrink an oversized source file for you. A 3MB DSLR export stays heavy. Resize images to the largest size they'll actually display (product images rarely need to exceed 2048px wide) and compress before uploading with TinyPNG, Squoosh, or Shopify apps like Crush.pics or TinyIMG. Aim for under 100KB per product image and under 200KB for full-width banners.

Serve the right dimensions, not just a smaller file. Uploading one 2048px image and letting the browser scale it down on mobile still forces the full download. Shopify's image_url filter with width parameters and responsive srcset lets the theme pick the correct size per device. Most modern Shopify 2.0 themes (Dawn and its derivatives) already generate srcset, so keep that markup intact when editing Liquid rather than hardcoding a single src.

Lazy loading defers off-screen images until the user scrolls near them, which shrinks the initial payload and speeds up first paint. Add loading="lazy" to below-the-fold <img> tags. The critical exception: never lazy-load your Largest Contentful Paint element, usually the hero banner or first product image above the fold. Set loading="eager" (or fetchpriority="high") on that one, because lazy-loading it delays LCP and hurts your Core Web Vitals score.

File names matter more than merchants expect. Google reads the filename as a ranking signal for image search, so rename files before upload: "blue-linen-throw-pillow.jpg" beats "IMG_4021.jpg". You cannot rename a file after it's uploaded to Shopify without re-uploading, so fix names at the source. Use hyphens between words, keep names short and literal, and match them to the product.

Measure the impact instead of guessing. Run your key pages through PageSpeed Insights or Lighthouse and watch three numbers: LCP (target under 2.5s), total image bytes, and the "properly size images" and "efficiently encode images" audits. If LCP is slow, your hero image is almost always the culprit, either uncompressed or accidentally lazy-loaded. Re-test after each change so you know which fix moved the metric.

A practical order of operations: audit current image weight in Lighthouse, compress and resize your top 20 traffic-driving product and collection images first, write real alt text on every one, confirm your theme uses srcset, then add loading="lazy" to everything except the LCP image. This sequence gets you the biggest speed and ranking gains before you touch the long tail of your catalog.