Images account for 50–70% of total page weight on most ecommerce stores. Unoptimised images are the primary cause of slow page loads, failed Core Web Vitals assessments, and poor mobile experiences. For Shopify stores, where product photography is central to the shopping experience, image optimisation is not optional — it is one of the highest-impact performance improvements you can make.
But image optimisation is not just about speed. Images are also a significant source of organic traffic through Google Image Search. Properly optimised images with descriptive alt text and file names can drive thousands of additional visits from image search queries.
This guide covers both sides of the equation: how to optimise images for speed performance and how to optimise them for search visibility. The two goals are complementary, not conflicting. For the broader speed context, see our guide on fixing Shopify site speed.
Why image optimisation matters
Image optimisation impacts three critical areas: page speed, SEO rankings, and accessibility.
Page speed and Core Web Vitals
The Largest Contentful Paint (LCP) metric — one of Google’s Core Web Vitals — is almost always determined by the largest image on the page. On product pages, this is typically the main product image. On collection pages, it is often the hero banner. If these images are not optimised, your LCP score will fail, which directly impacts rankings.
Google Image Search traffic
Google Image Search drives significant traffic for ecommerce queries. Customers often start their product research by searching for images. If your product images appear in image search results, you gain an additional traffic channel. Alt text, file names, and structured data all contribute to image search visibility.
Accessibility
Alt text is not just for SEO — it is essential for accessibility. Screen readers use alt text to describe images to visually impaired users. Writing good alt text serves both SEO and accessibility goals simultaneously. This is central to our approach on every SEO project.
Step 1: Prepare images before uploading
Image optimisation starts before you upload anything to Shopify. Properly preparing images reduces file sizes dramatically without visible quality loss.
Choose the right format
Use JPEG for product photographs and any image with complex colour gradients. Use PNG for graphics with transparency, logos, and images with text overlays. Shopify’s CDN converts images to WebP automatically, so you do not need to upload WebP files. Avoid using BMP or TIFF formats — they are unnecessarily large.
Resize before uploading
Upload images at the largest size they will be displayed, not the original camera resolution. Product images should be no larger than 2048x2048 pixels. Hero banners should be no wider than 1920px. A 6000x4000 pixel image from a DSLR camera is far larger than needed and wastes bandwidth even after Shopify’s CDN resizes it.
Compress images
Use compression tools before uploading. For JPEG, 80–85% quality is the sweet spot — the quality difference from 100% is imperceptible to most viewers, but the file size difference is substantial. Tools include:
- TinyPNG / TinyJPG: Free online compression with excellent results
- Squoosh: Google’s free image compression tool with fine-grained control
- ImageOptim: Desktop app for Mac that batch-compresses without quality loss
- ShortPixel: Bulk compression with Shopify integration
Target file sizes
Aim for these maximum file sizes per image:
- Product images: under 200KB
- Hero banners: under 300KB
- Collection thumbnails: under 100KB
- Blog post images: under 150KB
Step 2: Write effective alt text
Alt text serves two purposes: it describes the image to search engines and screen readers, and it provides context when images fail to load.
Be descriptive and specific
Write alt text that genuinely describes what the image shows. Include the product name, colour, material, and any distinctive visual features. Compare these examples:
- Bad: “product image”
- Bad: “blue jacket mens jacket winter jacket warm jacket” (keyword stuffing)
- Good: “Navy blue waterproof hiking jacket with hood, front zip pockets, shown on a male model”
Include product details naturally
Include relevant keywords naturally, but never at the expense of accuracy. The primary purpose is description, not keyword insertion. If your alt text reads like a natural description and includes the product name, you are doing it correctly.
Vary alt text across product images
If a product has multiple images, write different alt text for each one describing what that specific image shows. The first image might describe the product from the front. The second might describe it from the side. The third might show a close-up of a detail.
How to add alt text in Shopify
In the Shopify product editor, click on any product image. A sidebar opens where you can add or edit the alt text. For theme images and custom sections, alt text is added through the theme editor or directly in the Liquid code. See our technical SEO guide for implementation details.
Step 3: Name files descriptively
Image file names provide additional context to search engines about what the image depicts.
Use descriptive, keyword-rich file names
Rename image files before uploading to Shopify. Use hyphens to separate words and include the product name and key attributes.
// Bad file names
IMG_4521.jpg
DSC_0023.png
product-1.jpg
// Good file names
navy-waterproof-hiking-jacket-front.jpg
merino-wool-hiking-socks-charcoal.jpg
organic-cotton-baby-bodysuit-white-0-3-months.jpgBe consistent
Use a consistent naming convention across all product images. A pattern like [product-name]-[colour]-[view].jpg works well. This makes images easier to manage and provides predictable, keyword-rich URLs.
Shopify file name behaviour
Shopify does not allow you to change image file names after upload. The file name becomes part of the image URL on Shopify’s CDN. Getting file names right before upload is essential because there is no way to rename them without re-uploading.
Step 4: Leverage Shopify’s image CDN
Shopify serves all images through its global CDN, which provides automatic optimisations. Understanding how to leverage these features maximises performance.
Automatic format conversion
Shopify’s CDN detects the browser’s supported formats and automatically serves WebP when available. This provides 25–35% smaller file sizes compared to JPEG with comparable quality. You do not need to upload multiple format versions.
Responsive image URLs
Shopify’s CDN supports on-the-fly image resizing through URL parameters. When you use the image_tag or image_url Liquid filters with a width parameter, Shopify generates resized versions automatically.
{{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', width: 600, height: 600 }}Preload critical images
For your hero image and main product image (the LCP element), add a preload link in the document head. This tells the browser to start downloading the image as early as possible, before it encounters the image tag in the HTML.
<link rel="preload" as="image" href="{{ product.featured_image | image_url: width: 800 }}">Step 5: Implement lazy loading correctly
Lazy loading defers the download of off-screen images until the user scrolls near them. This reduces initial page weight and speeds up the first render.
Use native lazy loading
Add loading="lazy" to image tags for below-the-fold images. This is supported by all modern browsers and requires no JavaScript.
Do not lazy-load above-the-fold images
The hero image, main product image, and any images visible in the initial viewport should use loading="eager" (or simply omit the loading attribute). Lazy loading these images delays the LCP, making performance worse, not better.
Always include width and height attributes
Specify width and height attributes on every image tag. Without them, the browser cannot reserve space for the image before it loads, causing layout shifts (CLS issues) as images appear and push content around. This connects directly to our product page SEO approach.
Step 6: Serve responsive images
Different devices need different image sizes. Serving a 2048px image to a 375px mobile screen wastes bandwidth and slows the page.
Use srcset and sizes attributes
Modern HTML supports the srcset attribute, which provides multiple image sizes for the browser to choose from based on the device’s screen size and resolution.
<img
srcset="{{ image | image_url: width: 375 }} 375w,
{{ image | image_url: width: 750 }} 750w,
{{ image | image_url: width: 1100 }} 1100w,
{{ image | image_url: width: 1500 }} 1500w"
sizes="(max-width: 749px) 100vw, (max-width: 1100px) 50vw, 33vw"
src="{{ image | image_url: width: 750 }}"
alt="{{ image.alt }}"
width="750"
height="750"
loading="lazy">Use Shopify’s image_tag filter
Shopify’s image_tag Liquid filter automatically generates responsive srcset attributes when used with the widths parameter. This is the easiest way to implement responsive images on Shopify without writing manual srcset attributes.
Step 7: Audit and fix existing images
If your store has been live for a while, you likely have images that were uploaded without optimisation. Here is how to audit and fix them.
Run a site crawl for image issues
Use Screaming Frog to crawl your site and check for images missing alt text, images over 200KB, and images without width/height attributes. Export the results and prioritise fixes by page importance.
Prioritise by traffic
Start with your highest-traffic pages. Product pages that rank well or receive significant traffic should be optimised first, as they have the most to gain from improved performance.
Bulk update alt text
For products with many images missing alt text, use Shopify’s bulk editor or a CSV export/import to update alt text efficiently. Shopify allows product image alt text to be included in product CSV exports.
Re-upload oversized images
For images that are significantly oversized (over 500KB or over 4000px), download them, resize and compress, then re-upload. Update any hardcoded references to the old image URLs in your theme code.
Image optimisation is the single highest-impact speed improvement on most Shopify stores. It requires no custom development, no app purchases, and no theme changes — just discipline in how you prepare, name, and upload images. The results are immediate and measurable.
Andrew Simpson, Founder
Bringing it together
Optimising images on Shopify is a systematic process: prepare and compress images before uploading, write descriptive alt text, use descriptive file names, leverage Shopify’s CDN features, implement lazy loading correctly, serve responsive images, and audit existing images for issues.
The compounding effect of image optimisation is significant. Each optimised image improves page speed slightly, and across a store with hundreds of product images, the cumulative improvement is dramatic. Combined with the SEO benefits of proper alt text and file names, image optimisation delivers measurable improvements to both rankings and conversion rates.
If you need help optimising images across your Shopify store, get in touch. We include image optimisation as part of our technical SEO and performance work.