Published February 10, 2026 · By Tom Cannon
Images typically account for 50-80% of a webpage's total download size. On a page that weighs 3 MB, images alone might be 2 MB or more. This means optimizing images is the single highest-impact performance improvement most websites can make. And the first decision — choosing the right image format — matters more than most developers realize.
Google's research shows that 53% of mobile users abandon a site that takes more than 3 seconds to load. Every 100ms of additional load time reduces conversion rates by about 7% (according to Akamai). And since images are the heaviest assets on most pages, they're usually the biggest contributor to slow load times.
The three Core Web Vitals that Google uses for ranking all relate to how fast content appears. Largest Contentful Paint (LCP) measures when the biggest element (usually an image) finishes loading. First Input Delay (FID) is affected by large images that block the main thread during decoding. Cumulative Layout Shift (CLS) is impacted by images without explicit dimensions that cause content to jump around as they load.
Let's compare the same high-quality photograph saved in each format. Using a 1920x1080 photograph as our test image: the uncompressed BMP is 5.9 MB, PNG (lossless) is 3.2 MB, JPEG quality 85 is 285 KB, WebP quality 85 is 204 KB, and AVIF quality 85 is 155 KB. The difference between the worst choice (BMP) and the best (AVIF) is 38x — the same image loads 38 times faster.
For a graphic with text and flat colors (like a chart or diagram): BMP is 1.8 MB, PNG is 95 KB (lossless compression is very efficient for flat colors), JPEG is 180 KB (actually larger than PNG and with visible artifacts around text edges), WebP lossless is 72 KB, and AVIF lossless is 58 KB.
Is it a photograph or complex image? Use JPEG (quality 75-85) or WebP for the best file size. Does it need transparency? Use PNG or WebP (both support alpha channels). Is it a logo, icon, or graphic with sharp edges? Use SVG if possible (infinitely scalable vector), otherwise PNG. Is it a simple animation? Use WebP (animated) — it's dramatically smaller than GIF. Are you optimizing for cutting-edge browsers? Use AVIF with WebP fallback — it offers the smallest file sizes available today.
Serving a 2000px-wide image to a phone with a 375px-wide screen wastes enormous bandwidth. The HTML <picture> element and srcset attribute let you serve different image sizes (and formats) to different devices. Combine format optimization with responsive sizing and you can often reduce image payload by 80-90% compared to an unoptimized approach.
Images below the fold (not visible without scrolling) don't need to load immediately. The loading="lazy" attribute on <img> tags tells the browser to defer loading until the image is about to scroll into view. This dramatically improves initial page load time on image-heavy pages like galleries, portfolios, and e-commerce listings.
Even perfectly optimized images need to be delivered efficiently. A Content Delivery Network (CDN) serves your images from servers geographically close to each visitor, reducing latency. Proper cache headers (Cache-Control with a long max-age) ensure returning visitors don't re-download images they've already seen. Together, format optimization + responsive sizing + lazy loading + CDN + caching create a comprehensive image performance strategy.
Our image compressor reduces JPEG, PNG, and WebP file sizes without visible quality loss. The image converter lets you switch between formats to find the optimal one for each image. And the image resizer helps you create properly-sized versions for different screen sizes. All tools run locally in your browser — no uploads, no limits, no waiting for server processing.
Free weekly tips on image optimization, PC gaming, and web development. No spam.
We respect your privacy. Unsubscribe anytime.