Images are the single biggest performance bottleneck on most Shopify stores and a direct factor in Core Web Vitals scores. Poor image SEO means slower pages, lower rankings, and higher bounce rates. The good news: Shopify handles a significant portion of image optimisation automatically — you just need to know what it does and what it leaves to you.
WebP vs JPEG vs PNG: File Size Comparison
| Format | Typical file size (800×800px product image) | Transparency | Best use case |
|---|---|---|---|
| JPEG | 80–200 KB | No | Photography, complex gradients |
| PNG | 150–500 KB | Yes | Logos, flat graphics with transparency |
| WebP (lossy) | 40–100 KB | Yes | All product images in modern browsers |
| WebP (lossless) | 80–180 KB | Yes | Flat graphics needing exact colour fidelity |
| AVIF | 30–70 KB | Yes | Next-generation; Shopify CDN serves when supported |
Shopify automatically converts uploaded images to WebP when serving them to browsers that support it (all modern browsers do). You do not need to convert to WebP before uploading — upload the highest quality JPEG or PNG you have and let Shopify’s CDN handle conversion and resizing.
File Naming Conventions for SEO
File names are a minor but real SEO signal, particularly for Google Image Search. Use descriptive, hyphenated file names that include your primary keyword. Bad: IMG_4521.jpg. Good: slim-tan-leather-bifold-wallet.jpg. Rename images before uploading — Shopify does not allow renaming after upload without deleting and re-uploading. Batch renaming tools (like Bulk Rename Utility on Windows or Renamer on Mac) make this manageable at scale.
Alt Text Formula
Alt text serves two purposes: accessibility for screen readers and SEO context for Google Image Search. The formula: [descriptive product name] [key attribute] — [brand]. For a second angle image of the same product, vary the description: focus on the material, the scale, or a specific feature rather than repeating the same text. Duplicate alt text across ten product images is a lost opportunity and marginally penalised by Google Image indexing algorithms.
For full technical speed and SEO implementation, our Shopify speed optimisation service covers image auditing, lazy loading configuration, and LCP remediation.
Image Sitemap
Shopify automatically generates a sitemap at /sitemap.xml that includes product images. This ensures Google can discover and index product images for Image Search. You do not need to create a separate image sitemap. Verify your sitemap includes image tags by inspecting the XML — look for <image:image> nodes within each URL entry.
Lazy Loading and LCP Core Web Vitals
Shopify themes added native lazy loading (loading="lazy") to product grid images in 2022. This improves load time for below-the-fold images significantly. The critical caveat: the hero image or first product image on a PDP should not be lazy loaded — it is the most likely candidate for your Largest Contentful Paint (LCP) element. Lazy loading the LCP image delays it, worsening your LCP score. Check your theme’s image rendering for the main product image and ensure it uses loading="eager" or no loading attribute at all.
LCP is one of Google’s three Core Web Vitals and a confirmed ranking factor. A product page with an LCP above 2.5 seconds is in the “needs improvement” zone; above 4 seconds is “poor.” Most Shopify LCP issues are caused by an unoptimised hero image or a large above-the-fold banner.
Frequently Asked Questions
Does Shopify automatically compress images?
Shopify compresses images when they are uploaded and serves them via its global CDN at the appropriate size for the requesting device. However, uploading a 10 MB RAW file is still wasteful — compress to under 2 MB before uploading. Shopify’s compression is not lossless; starting with a clean, well-compressed source file produces better results.
How many images should a product page have?
Research from Baymard Institute suggests 6–8 images is the optimal range for considered purchases (apparel, electronics, furniture). This typically covers: front, back, detail close-up, in-use/lifestyle, scale reference, and packaging. More images increase page weight without proportionate conversion lift beyond this range.
Do image file sizes affect mobile rankings?
Indirectly, yes. Google uses mobile-first indexing, and oversized images increase mobile page load times, degrading Core Web Vitals scores on mobile. Since Core Web Vitals are a ranking signal, poor mobile image performance can suppress your rankings across all devices, not just mobile.
Ready to Grow Your Shopify Store?
Our Shopify experts at OneOnic have helped hundreds of brands launch, optimise, and scale. Let’s talk about your project.
