Published: May 26, 2026
Images make up roughly 50% to 75% of a typical web page's total weight. According to the HTTP Archive, the median page size now exceeds 2 MB, and images account for the largest share. Every unoptimized kilobyte translates directly into slower load times, higher bounce rates, and lower search rankings.
Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — penalise pages that take too long to render their primary image. A one-second delay in page load can reduce conversions by 7%, and Amazon once calculated that a 100 ms slowdown cost them 1% in revenue. Image optimization isn't just a nice-to-have developer nicety; it's a business imperative.
The good news? You don't need a graphic design degree or expensive software to get it right. With the right approach and a free image compressor, you can dramatically reduce image file sizes while maintaining visual quality.
Each image format has strengths and trade-offs. Choosing the wrong one is one of the most common — and most costly — mistakes in web design.
Best for photographs and complex images with many colors. JPEG uses lossy compression that can reduce file sizes by 60–80% with minimal visible degradation. It does not support transparency. Use JPEG for product photos, hero images, banners, and any image where color gradients matter more than sharp edges.
Best for graphics with text, logos, screenshots, and images requiring transparency. PNG uses lossless compression, which means zero quality loss — but file sizes are typically 2–5 times larger than JPEG equivalents. Use PNG sparingly: only when you need crisp edges, transparency, or exact pixel reproduction.
Developed by Google, WebP supports both lossy and lossless compression, as well as transparency. In most tests, lossy WebP files are 25–35% smaller than equivalent-quality JPEGs, and lossless WebP is about 25% smaller than PNG. WebP is supported in all modern browsers (Chrome, Firefox, Safari 14+, Edge). For most use cases, WebP is now the best default format.
The newest contender, AVIF (based on the AV1 video codec), delivers even better compression — often 50% smaller than JPEG at the same quality. Browser support is growing but not universal (Chrome and Firefox support it; Safari has partial support). AVIF is ideal for forward-looking projects where you can provide fallbacks.
Understanding this distinction is critical:
For web use, lossy compression is almost always the right choice for photographs and complex images. Save lossless for logos, icons, screenshots, and images with text where every pixel matters.
Serving the same 4000-pixel-wide hero image to a smartphone user wastes bandwidth and slows down their experience. The srcset and sizes HTML attributes let you serve different image files based on the user's viewport:
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Description">
This tells the browser: "If the viewport is narrower than 600px, fill the full width. Between 600px and 1200px, use half the width. Above 1200px, cap at 800px." The browser then selects the most appropriate image from the srcset. This alone can cut image data transfer by 30–50% on mobile devices.
You can resize images before uploading using the image resizer on Wang Toolbox to generate the different size variants needed for srcset.
Why download an image that's 8000 pixels below the fold? Native lazy loading, available via the loading="lazy" attribute, defers loading off-screen images until the user scrolls near them:
<img src="photo.jpg" loading="lazy" alt="Description">
Combine lazy loading with decoding="async" to further improve performance. Always add width and height attributes to prevent layout shifts (a Core Web Vital metric called Cumulative Layout Shift).
Content Delivery Networks (CDNs) designed for images — like Cloudinary, Imgix, or ImageKit — go beyond caching. They can automatically convert images to WebP or AVIF, apply compression, resize on the fly, and serve from edge servers close to your users. If your site serves many images, an image CDN is the single most impactful optimization you can make.
Even without a dedicated image CDN, you should:
Before: A 4000×3000 JPEG product photo, 3.2 MB.
After: Use our free image compressor to resize to 1200px wide at 80% JPEG quality. Result: 180 KB — a 94% reduction. The photo looks indistinguishable from the original on any screen.
Before: A 1920×1080 PNG screenshot, 1.1 MB.
After: Convert the PNG to lossy WebP at quality 80. Result: 95 KB — a 91% reduction. The text in the screenshot remains crisp because WebP handles flat-color regions efficiently.
An online store with 50 product pages, each containing 6 images at 2 MB each = 600 MB total.
Optimization workflow:
<picture> elementResult: Total page weight drops from roughly 12 MB per page to under 1 MB. Page load time goes from 8 seconds to under 2 seconds on 4G.
Image optimization doesn't have to be complicated. Start with the most impactful step: compress your existing images. Visit the image compressor tool — it's free, works in your browser, and can shrink your images by 80% or more in seconds.