Image Optimization for the Web
Images are almost always the heaviest assets on a webpage. Getting image optimization right is one of those rare improvements that simultaneously benefits load times, user experience, SEO rankings, and bandwidth costs, often without a disproportionate amount of effort.
What is image optimization?
Image optimization is the practice of delivering images at the smallest file size that doesn't meaningfully degrade the visual experience, in a way that fits the context. That means the right format, the right dimensions, loaded at the right time.
That last part matters more than people expect. Optimization isn't just compression. It's a combination of format selection, proper sizing, delivery strategy, and loading behavior, all working together.
Why it matters
Images typically account for 40–60% of a page's total transfer size. That has a direct impact on several things that affect real users and measurable outcomes.
Core Web Vitals. Google's Largest Contentful Paint (LCP) metric is directly tied to how fast your heaviest visible content loads. The LCP element is very often an image: a hero photo, a product shot, a banner. Slow LCP hurts your search ranking, and optimized images are one of the most reliable ways to improve it.
Mobile users and slow connections. A significant portion of web traffic comes from users on mobile data, in poor coverage or on throttled connections. Sending a 2MB unoptimized image to someone in that situation means they're waiting several unnecessary seconds, or abandoning the page entirely. The cost of a bad experience is much higher on mobile than desktop.
Bandwidth and hosting costs. At scale, the cumulative difference between optimized and unoptimized images adds up fast, not just for users but in your CDN and storage egress bills.
Common optimization techniques
Compression
Compression reduces the amount of data needed to store or transmit an image. There are two approaches worth understanding, because the right choice depends on what you're compressing.
Lossy compression permanently discards some image data to achieve significantly smaller file sizes. The human visual system is more sensitive to some details than others, and lossy algorithms exploit that to reduce file size in ways that are often imperceptible. JPEG is the most common example. It works well for photographs where the complexity of the image masks the loss.
Lossless compression reduces file size without discarding any data. The original pixel values are fully preserved when the file is decoded. PNG uses lossless compression. It's the right choice for UI screenshots, icons, and anything with flat colors, hard edges, or text overlay, where lossy artifacts would be clearly visible.
Using the right image dimensions
One of the most common and easily overlooked issues is sending a 3000×2000px image to fill a 400px-wide container. The browser downloads the entire file, then scales it down during rendering. You end up transferring 5–10x more data than necessary.
The fix is straightforward: resize images to the dimensions they'll actually be displayed at before serving them. On dynamic sites, this usually means generating multiple variants (thumbnail, medium, full size) at build time or through an image processing service, rather than relying on CSS to do the scaling for you.
Choosing the right format
Format choice has a meaningful impact on both file size and visual quality. Different formats use different compression strategies, each with its own tradeoffs. For a detailed breakdown of each format, see our guide to image file formats.
| Format | Compression | Best for | Transparency |
|---|---|---|---|
| JPEG | Lossy | Photographs, complex imagery | No |
| PNG | Lossless | Icons, UI elements, text overlays | Yes (alpha) |
| GIF | Lossless | Simple animations (largely superseded) | Yes (1-bit) |
| WebP | Lossy or lossless | Modern replacement for JPEG and PNG | Yes |
| AVIF | Lossy or lossless | Best compression ratios, photos, HDR | Yes |
| SVG | N/A | Logos, icons, illustrations (vector) | Yes |
In practice: WebP is a solid default for most raster images today, offering better compression than JPEG and PNG at comparable quality with broad browser support. AVIF pushes compression further and is now supported by all major browsers, though it is slower to encode. For icons and simple graphics, SVG is almost always the right answer: it scales perfectly at any resolution and file sizes are tiny.
Lazy loading
By default, browsers start fetching images as soon as they encounter them in the HTML, including images far below the visible viewport. Lazy loading defers the download of off-screen images until the user scrolls near them.
The practical benefit is meaningful on image-heavy pages: you avoid paying the cost of fetching content the user may never see, initial page load is faster, and bandwidth is conserved. Native lazy loading in modern browsers requires nothing more than a single attribute:
<img src="photo.jpg" loading="lazy" alt="..." />One important caveat: never lazy-load images that are likely to be in the initial viewport, such as the hero image, logo, or other above-the-fold content. Deferring those will hurt LCP rather than help it.
Closing thoughts
Image optimization is one of the highest-leverage things you can do for web performance. Most sites have obvious gains sitting on the table: oversized images, wrong formats, no lazy loading. The tooling to address all of it is mature and well-supported today.