400 Product Listings, 6-Second Load Times, and What Changing an Image Format Fixed

PNG: Lossless Compression and Its Cost

PNG, the Portable Network Graphics format, was developed in 1994 by a working group that included Thomas Boutell as primary author, as a replacement for GIF following a patent dispute over the LZW compression algorithm GIF used. The PNG specification was finalized and published as RFC 2083 in 1997. PNG uses the DEFLATE compression algorithm, which is also used in ZIP files, to compress image data without any loss of information. A PNG file decoded produces exactly the original pixel values, bit for bit.

This lossless property makes PNG ideal for images where pixel-perfect accuracy matters: screenshots with sharp text, logos with flat color areas, images that will be edited multiple times without quality degradation. For photographic product images, which have continuous-tone color and smooth gradients rather than sharp edges and flat colors, lossless compression is often unnecessary and always expensive in file size. The DEFLATE algorithm compresses continuous-tone photograph data poorly compared to what lossy formats achieve, because photographs have enormous pixel-to-pixel variation that DEFLATE cannot exploit efficiently.

A typical furniture product photo in PNG at 1800 by 1800 pixels weighs between 3 and 6 megabytes depending on image content. Multiply by 400 products with multiple angles each and the total storage and bandwidth consumption is in the hundreds of megabytes. Every megabyte must be downloaded by the browser before the corresponding image can appear.

How WebP Achieves Smaller File Sizes

Google announced WebP in September 2010 as an image format derived from the VP8 video codec, itself acquired through Google's $124.6 million purchase of On2 Technologies in 2010. VP8 used intra-frame prediction, a technique from video compression where blocks of pixels are predicted from neighboring blocks rather than stored independently. This prediction approach, adapted from H.264 video compression technology, compresses photographic image data far more efficiently than DEFLATE.

WebP's lossy compression mode achieves file sizes 25 to 34 percent smaller than JPEG at equivalent visual quality, according to Google's original benchmarks. Against PNG, the comparison is more dramatic. A 4-megabyte PNG product photograph converted to lossy WebP at quality 85 typically produces a file of 600 kilobytes to 1 megabyte: a reduction of 75 to 85 percent. The pixel values in the WebP file are approximations rather than exact copies of the originals, but the approximation is calibrated to be perceptually accurate, meaning the visual difference is imperceptible at normal screen viewing distances.

WebP also supports lossless compression, producing files that are approximately 26 percent smaller than equivalent PNG files while preserving exact pixel values. For web delivery of product images where photographic content is involved, lossy WebP at quality 80-90 is almost always the better choice. Lossless WebP is more appropriate for logos, screenshots, and images that must survive further editing.

The format additionally supports alpha channels (transparency) and animation. PNG-to-WebP conversion preserves alpha channels completely, which matters for product categories where transparent backgrounds are used to enable placement on different background colors or patterns without a white box visible around the product.

The Core Web Vitals Connection

Google's Core Web Vitals initiative, which began in 2020 and became a search ranking factor in May 2021 through the Page Experience update, introduced three primary metrics: Largest Contentful Paint (LCP), First Input Delay (FID, later replaced by Interaction to Next Paint), and Cumulative Layout Shift (CLS).

LCP measures the time from page navigation to when the largest visible element on the page finishes rendering. For product pages, the largest element is almost always the main product image. Google's guidance classifies LCP under 2.5 seconds as "good," 2.5-4 seconds as "needs improvement," and above 4 seconds as "poor." Pages rated "poor" on Core Web Vitals are ranked lower than competing pages with equivalent content quality and similar link authority.

Heavy PNG product images directly extend LCP because the browser cannot render the product image until the image file has been downloaded. A 4-megabyte PNG image on a mobile connection averaging 8 megabits per second takes approximately 4 seconds to download, before accounting for connection latency, TCP overhead, and other network factors. The equivalent WebP image at 800 kilobytes downloads in under a second on the same connection.

A 2019 Portent study found that site conversion rates drop by an average of 4.42 percent for each additional second of load time in the first five seconds. For an e-commerce site processing a meaningful transaction volume, the calculable revenue impact of reducing load time from 6 seconds to 2 seconds is substantial.

Browser Support and the Fallback Question

Browser support for WebP is now effectively universal. Chrome has supported WebP since 2011. Firefox added support in version 65, released January 2019. Apple's Safari added WebP support in version 14, released September 2020 alongside iOS 14. Internet Explorer 11, the last holdout browser still in any meaningful use, does not support WebP, but Microsoft's Edge browser does.

For the small percentage of visitors using Internet Explorer or very old browser versions, the correct approach is the HTML picture element with a WebP source and a PNG fallback. Modern web frameworks and e-commerce platforms including WooCommerce and Shopify provide server-side or plugin-based approaches to serving WebP to supporting browsers and PNG to non-supporting browsers, automatically, without requiring per-visitor detection in frontend code.

What to Convert and What to Keep

The workflow principle is: WebP is a delivery format; PNG is an archival format. Keep original PNG files as source assets for print, catalog production, and any workflow requiring further editing or resizing. Convert to WebP for all web delivery. Both versions belong in your asset management system, labeled clearly.

For sites hosted on WordPress, image optimization plugins including Imagify, ShortPixel, and Smush convert uploads to WebP automatically and serve them using the picture element pattern with PNG fallbacks. For other platforms, batch converting the PNG library to WebP before upload is often more reliable than runtime conversion. Shopify's CDN automatically converts images to WebP for supported browsers since 2021.

Elena converted her 400 product listings' images to WebP. Her average page load time dropped from 6.8 seconds to 2.9 seconds. Google Search Console began showing more pages rated as having "good" Core Web Vitals scores. She kept every original PNG file in a folder labeled "source" for print use and archival. Both formats served their intended purpose.

Conclusion

Image format is not a purely technical decision. For e-commerce, it is simultaneously a user experience decision, a conversion rate decision, and a search ranking decision. PNG provides archival fidelity. WebP provides delivery efficiency. Converting product images from PNG to WebP at quality 80-90 is one of the highest-impact, lowest-risk optimizations available for slow-loading e-commerce sites. ToolHQ's PNG to WebP converter processes your uploaded images on our servers and returns optimized WebP files ready for web deployment.

Frequently Asked Questions

Try These Free Tools