Image Optimization for Web: Faster Pages Without Sacrificing Quality

The Image Weight Problem

On a typical ecommerce product page, images account for 60 to 80 percent of total page weight. A single product with six unoptimized photos can add 10 to 30 megabytes to the page, turning what should be a two-second experience into a ten-second ordeal.

The irony is that most of this weight is invisible to visitors. An image compressed from 3 MB to 200 KB looks identical to the human eye at screen resolution. The quality difference between a lossless original and a well-compressed web image is imperceptible, but the speed difference is dramatic.

Image optimization is the single highest-impact performance improvement you can make to your ecommerce store. No other optimization provides as much speed gain for as little effort.

Image Formats Explained

JPEG

JPEG has been the web standard for photographs since the 1990s. It handles photographic images well with good compression and universal browser support. However, it does not support transparency, and its compression algorithm is lossy, meaning quality degrades with each re-save.

For ecommerce, JPEG remains a viable fallback format but should be secondary to WebP for modern browsers.

PNG

PNG supports transparency and lossless compression, making it ideal for logos, icons, and graphics with sharp edges or text. However, PNG files are significantly larger than JPEG or WebP for photographic images, often three to five times larger.

Use PNG only for images that require transparency or pixel-perfect sharpness, like your logo or trust badge icons. Never use PNG for product photos.

WebP

WebP, developed by Google, provides 25 to 35 percent smaller file sizes than JPEG at equivalent visual quality and supports both lossy and lossless compression plus transparency. Browser support is now universal across all modern browsers.

WebP should be your default format for all product images, hero images, and lifestyle photography. The quality-to-size ratio is superior to both JPEG and PNG for photographic content.

AVIF

AVIF is the newest image format, offering even better compression than WebP, typically 20 percent smaller at equivalent quality. Browser support is growing rapidly and covers over 85 percent of global users as of 2026.

AVIF is excellent for stores pushing the performance envelope. Use it as the primary format with WebP and JPEG fallbacks for older browsers.

SVG

SVG is a vector format ideal for logos, icons, and simple illustrations. SVG files are typically tiny because they describe shapes mathematically rather than storing pixel data. They scale to any size without quality loss and can be styled with CSS.

Use SVG for your logo, navigation icons, trust badge icons, and any graphic that is not a photograph.

Compression Techniques

Lossy Compression

Lossy compression removes image data that the human eye is unlikely to notice. A JPEG compressed to 80% quality is visually indistinguishable from the original for most viewers, but the file size is 50 to 70 percent smaller.

For product images, lossy compression at 75 to 85 percent quality provides the optimal balance. Below 70 percent, compression artifacts become visible, particularly around text and sharp edges. Above 90 percent, the quality improvement is invisible but the file size increase is substantial.

Lossless Compression

Lossless compression reduces file size without removing any image data. The compressed image is pixel-identical to the original. Tools like OptiPNG and lossless WebP encoding can reduce PNG and WebP file sizes by 10 to 30 percent without any quality change.

Apply lossless compression to images where visual fidelity is critical, like your logo and any image containing text.

Dimension Optimization

The most overlooked compression technique is simply resizing images to appropriate dimensions. A 4000 by 4000 pixel product image displayed at 800 by 800 pixels on your store is carrying 25 times more pixel data than necessary.

Determine the maximum display size for each image context on your store. Hero images rarely need to exceed 1920 pixels wide. Product images rarely need more than 1200 pixels on any dimension. Resize all images to their maximum display dimensions before applying compression.

Responsive Image Delivery

Different devices need different image sizes. A 1920-pixel hero image is appropriate for a desktop monitor but wasteful for a 375-pixel phone screen. Responsive image delivery serves appropriately sized images based on the visitor's device.

The srcset Attribute

HTML's srcset attribute lets you specify multiple image sizes for different viewport widths. The browser selects the most appropriate size automatically. Create three to four sizes for each image: a mobile size (750 pixels), a tablet size (1200 pixels), and a desktop size (1920 pixels).

The picture Element

The picture element extends srcset by allowing different image formats for different browsers. Serve AVIF to browsers that support it, WebP to those that support WebP, and JPEG as a final fallback. This ensures every visitor gets the optimal format their browser can handle.

Platform Automation

Modern ecommerce platforms, including Strive Commerce, handle responsive image delivery automatically. They generate multiple sizes and formats from your uploaded original and serve the optimal version based on the visitor's device and browser. If your platform provides this, leverage it rather than managing responsive images manually.

Lazy Loading

Lazy loading defers image loading until the image is about to enter the viewport. For a product page with twenty images, only the first three or four load initially. The remaining images load as the visitor scrolls toward them.

Implement lazy loading with the loading lazy HTML attribute, which is supported by all modern browsers with no JavaScript required. For more control, use the Intersection Observer API to trigger loading when images approach the viewport.

Never lazy load above-the-fold images. Your hero image, logo, and any product images visible on initial page load should load eagerly to ensure fast visual rendering.

Image CDN Services

Image CDNs like Cloudflare Images, Imgix, and Cloudinary provide on-the-fly image transformation, optimization, and delivery from edge servers worldwide. You upload your originals, and the CDN automatically serves optimized versions in the best format and size for each visitor.

These services eliminate the need to manually create multiple image sizes and formats. They add a small per-image cost but save significant development time and often achieve better optimization than manual processes.

Tools for Image Optimization

Before Upload

Squoosh from Google provides browser-based compression with real-time quality previews. Drag an image in, adjust compression, and compare the result side-by-side with the original.

ImageOptim for Mac optimizes images in batch without quality loss. Drag a folder of images in and it compresses them all using the best available algorithms.

Sharp for Node.js is a high-performance image processing library that handles resizing, format conversion, and compression programmatically. Ideal for automated workflows.

Quality Comparison

When optimizing images, always compare the compressed version with the original at the actual display size. Viewing a 200KB compressed image at 100% zoom on a 4K monitor will reveal artifacts that are invisible at the 800-pixel display size on your store.

The goal is not the smallest possible file. It is the smallest file that looks identical to the original at the size it will be displayed.

Measuring Image Performance

Use Google PageSpeed Insights to identify unoptimized images on your store. The tool specifically flags images that could be smaller and estimates the potential savings in both file size and load time.

Monitor your total page weight across key pages. A well-optimized product page should weigh under 1.5 MB total, with images accounting for no more than 800 KB. A homepage or collection page should target similar numbers per visible viewport.

Track your Largest Contentful Paint metric, which is usually determined by your largest visible image. If LCP is above 2.5 seconds, your hero or primary product image likely needs optimization.

Image optimization is not glamorous work. It does not produce visible design changes or exciting new features. But it is the single most impactful performance improvement available to any ecommerce store, and in a market where speed directly translates to revenue, it is work that pays for itself many times over.