Why Image Optimisation Matters
Product images are typically the largest files on your Shopify store. A single unoptimised image can be several megabytes, while an optimised version of the same image might be under 100KB with no visible quality loss.
This matters because page load time directly affects both user experience and search rankings. Google uses page speed as a ranking factor, and studies show that conversion rates drop significantly as pages take longer to load.
The Impact of Page Speed
- •1-second delay reduces conversions by approximately 7%
- •40% of visitors abandon sites that take more than 3 seconds to load
- •Images account for 50-70% of total page weight on average ecommerce sites
- •Core Web Vitals (Google's speed metrics) include image loading as a key factor
The Good News
Image optimisation is one of the easiest and most impactful speed improvements you can make. Even basic optimisation can reduce page load times by 50% or more.
File Formats
Choosing the right file format is the first step in image optimisation. Different formats are suited to different types of images.
JPEG (.jpg)
Best for photographs and complex images with many colours and gradients.
Use for: Product photos, lifestyle images, backgrounds
PNG (.png)
Best for images requiring transparency or sharp edges like logos and graphics.
Use for: Logos, icons, graphics with transparency, screenshots
WebP (.webp)
Modern format offering better compression than JPEG and PNG with similar quality. Supported by all modern browsers.
Use for: Any image where browser support allows. Shopify automatically serves WebP when available.
AVIF (.avif)
Newest format with even better compression than WebP. Browser support is growing rapidly.
Note: Shopify's CDN will serve AVIF to supporting browsers automatically.
Format Recommendation
Upload high-quality JPEG or PNG files to Shopify. The platform's CDN will automatically convert and serve WebP or AVIF to browsers that support them, giving you the best of both worlds.
Image Compression
Compression reduces file size by removing unnecessary data from images. There are two types: lossy (removes some quality) and lossless (preserves all quality).
Compression Tools
- •TinyPNG/TinyJPG (free online tool for quick compression)
- •Squoosh (Google's free tool with advanced controls)
- •ImageOptim (Mac app for batch compression)
- •Shopify apps like Crush.pics or TinyIMG for automatic optimisation
Quality Settings
For product images, a JPEG quality setting of 80-85% typically provides an excellent balance between file size and visual quality. Most viewers cannot distinguish between 85% and 100% quality.
Target File Sizes
Image Dimensions
Uploading images at the correct dimensions prevents unnecessary scaling and ensures sharp display on all devices.
Recommended Dimensions
Product Images
2048 x 2048 pixels (square) is Shopify's recommendation. This provides enough resolution for zoom functionality whilst being manageable in file size.
Collection Images
1920 x 1080 pixels for header/banner images. Maintain aspect ratio consistency across collections.
Homepage Hero
1920 x 1080 pixels or your theme's recommended dimensions. Check your theme documentation for specific requirements.
Consistency Matters
Use consistent dimensions and aspect ratios across all product images. Inconsistent sizes create visual jarring in collection grids and can cause layout shifts that hurt Core Web Vitals scores.
Alt Text for SEO
Alt text describes images for search engines and screen readers. It is one of the most overlooked SEO opportunities in ecommerce.
Writing Effective Alt Text
- 1Be Descriptive and Specific
Describe what is actually in the image. "Blue cotton Oxford shirt front view" is better than "shirt".
- 2Include Product Details
Include colour, material, style, and other relevant details that someone might search for.
- 3Keep It Under 125 Characters
Screen readers may cut off longer alt text. Be concise whilst remaining descriptive.
- 4Avoid Keyword Stuffing
Write for humans first. Natural descriptions that include relevant keywords perform best.
Alt Text Examples
"Product image"
"Blue shirt men's shirt blue Oxford shirt cotton shirt"
"Men's blue cotton Oxford shirt with button-down collar, front view"
File Naming
Search engines use image file names as a ranking signal for image search. Descriptive file names help your products appear in Google Images results.
File Naming Best Practices
- •Use hyphens to separate words (not underscores or spaces)
- •Include the product name and key descriptors
- •Keep names lowercase for consistency
- •Avoid generic names like "IMG_001.jpg" or "photo.png"
File Name Examples
Bad: IMG_2847.jpg, product.jpg, 1.png
Good: blue-oxford-shirt-front.jpg, mens-leather-wallet-brown.jpg
Lazy Loading
Lazy loading defers the loading of images until they are about to enter the viewport. This significantly speeds up initial page load, especially on pages with many images like collection pages.
How Lazy Loading Works
Instead of loading all images when the page loads, lazy loading only loads images as the user scrolls towards them. Images below the fold load just before they become visible.
Native Lazy Loading
Most modern Shopify themes support native browser lazy loading using the loading="lazy" attribute. Check your theme settings or contact your developer to ensure it is enabled.
Important Note
Do not lazy load images above the fold (visible without scrolling). Your hero image and first few product images should load immediately to prevent layout shift and ensure fast Largest Contentful Paint scores.
Shopify CDN
Shopify automatically serves your images through its global Content Delivery Network (CDN). This means images are delivered from servers geographically close to your customers, reducing load times.
Automatic Optimisations
- •Format conversion: WebP and AVIF served to supporting browsers
- •Responsive sizing: Images resized to match display size
- •Caching: Images cached at edge servers worldwide
- •Compression: Basic compression applied automatically
