Images account for more than half of the average webpage's data transfer, according to HTTP Archive. A single unoptimized product photo can add 3–5 seconds to a page load on a mobile connection. Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — are directly affected by image loading speed, and poor LCP scores push pages down in search rankings. Image compression is not optional for serious web projects; it is part of the baseline.
Why Image File Size Matters
Page speed affects conversion rates, not just rankings. Amazon found that every 100ms of page load time correlated with a 1% decrease in sales. For e-commerce sites with hundreds of product photos, unoptimized images compound this cost across every page. Reducing image sizes is the single highest-impact optimization for most sites because it directly reduces the amount of data the browser must download.
Mobile connections make this even more critical. While desktop users on fiber broadband may not notice a 2 MB page, mobile users on 4G or 3G connections do. The majority of global web traffic is mobile, and markets with growing internet populations — Latin America, Southeast Asia, Sub-Saharan Africa — often have slower average connection speeds. Optimizing images is inclusive design.
Google's PageSpeed Insights and Core Web Vitals measure LCP, which is the time until the largest visible element (often a hero image or product photo) finishes loading. An LCP under 2.5 seconds is "good," and images that take longer than that push the score into "needs improvement" or "poor" territory, directly affecting where you rank.
Choosing the Right Image Format
JPG (JPEG) is the right choice for photographs and complex images with millions of colors. It uses lossy compression, meaning it permanently discards some data to reduce file size. The quality loss is often imperceptible at 80–85% quality settings. JPG does not support transparency, so it cannot replace PNG for images with transparent backgrounds.
PNG uses lossless compression, which means every pixel is preserved exactly. This makes it ideal for logos, icons, screenshots, and illustrations with sharp edges and text. PNG also supports transparency (alpha channel), which is essential for images that need to sit on top of different background colors. The trade-off is file size — PNGs are often significantly larger than equivalent JPGs for photographic content.
WebP is a modern format developed by Google that achieves 25–34% smaller file sizes than JPG at equivalent visual quality, and supports both lossy and lossless compression as well as transparency. All modern browsers support WebP, making it the best default format for web images in 2025. When converting existing images, converting JPG to WebP and PNG to WebP almost always reduces file size without any perceptible quality change.
Lossy vs. Lossless Compression
Lossy compression reduces file size by permanently removing data the human eye is unlikely to notice. In JPEG compression, this means reducing the precision of color transitions, which is nearly invisible in natural photographs but can create artifacts on text, lines, and high-contrast edges. Higher compression = smaller file + more artifacts.
Lossless compression reduces file size by finding more efficient ways to store the same data, without discarding any. PNG compression is lossless — the decompressed image is pixel-identical to the original. Lossless compression is ideal for images that will be edited further, as each save cycle of lossy compression adds more artifacts.
The practical workflow: use lossy compression at 80–85% quality for photographs on the web. Use lossless compression for graphics, logos, and images with text. If you are unsure, start at 85% quality and view the image at actual size — the quality loss is usually invisible, but the file size reduction is substantial.
A Practical Image Optimization Workflow
Before compressing, resize the image to its display dimensions. A 4000×3000 pixel photo displayed at 800×600 on a webpage is sending 25× more pixels than necessary. Always resize first, then compress. Most image compressor tools handle this in one step.
Aim for specific file size targets based on image purpose. Hero images and full-width banners: under 200 KB. Product photos and article images: under 100 KB. Thumbnails and avatars: under 30 KB. These are starting targets — faster is always better if quality holds.
Batch process consistently. Set a workflow: when a designer sends assets, they go through the compressor before upload. Avoid the "I'll optimize later" pattern — unoptimized images almost never get revisited after going live. Make compression part of your pre-upload checklist alongside alt text and file naming.
Image optimization is the most accessible web performance improvement available to anyone — no server configuration, no code deployment, no infrastructure change. A compressed image loads faster for every visitor, on every device, forever. The time investment is under a minute per image, and the cumulative effect on page speed, user experience, and search rankings is significant. If your site has unoptimized images, starting there will produce faster results than almost any other optimization.