Image Optimization for the Web: Formats, Compression, and Delivery

Images are consistently the largest contributor to page weight on the modern web — often accounting for over half of total page size. Getting image optimization right is one of the highest-impact, most accessible performance improvements available, and yet it's frequently done poorly or skipped entirely. Here's how to actually do it well.

Choose the Right Format for the Content

JPEG remains a solid default for photographs and complex images with lots of color variation, using lossy compression that balances quality and file size well.

PNG is best for images requiring transparency or sharp edges (logos, icons, screenshots with text), using lossless compression — but this means larger file sizes for photographic content, where JPEG or modern formats do much better.

WebP offers significantly better compression than both JPEG and PNG at equivalent visual quality — typically 25-35% smaller than JPEG, and supports both lossy and lossless modes plus transparency. Browser support is now essentially universal.

AVIF is the newest widely-adopted format, often achieving even better compression than WebP, though encoding is slower and browser support, while growing, isn't yet quite as universal as WebP.

SVG is ideal for logos, icons, and simple illustrations — being vector-based, it scales to any size with zero quality loss and is often smaller than a raster equivalent for simple graphics.

Serve the Right Size, Not Just a Compressed Version

Compression alone isn't enough if you're serving a 3000-pixel-wide image into a 400-pixel container and letting CSS scale it down — that wastes bandwidth loading pixels the visitor will never actually see at that resolution. Use the srcset and sizes attributes to let the browser choose the appropriately sized image variant based on the actual display size and device pixel density:

<img src="photo-800w.jpg" 
     srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description of the photo">

Compression: Finding the Right Quality Setting

Most compression tools let you set a quality percentage. For JPEG, quality settings around 75-85% typically provide a good balance — most visitors genuinely can't distinguish 85% quality from 100% quality visually, but the file size difference can be substantial (often 40-60% smaller). Don't assume "higher quality is always better" — beyond a certain point, you're just adding file size with no perceptible visual benefit.

Lazy Loading (With One Important Exception)

Use loading="lazy" on images below the fold, so the browser defers loading them until they're about to enter the viewport, saving bandwidth for images the visitor may never scroll to see. The important exception: your Largest Contentful Paint image (usually your hero image) should not be lazy-loaded, since this actively delays your LCP score by forcing the browser to wait before fetching it.

Use a CDN or Image Optimization Service

Rather than manually optimizing every image on upload, many CDN and image-service providers can handle format conversion, compression, and responsive resizing automatically and on-the-fly, serving the optimal format and size based on each visitor's browser capabilities and device — without you needing to manually generate and manage multiple versions of every image yourself.

Don't Forget Alt Text While You're At It

While optimizing images technically, don't skip descriptive alt text — it matters for accessibility (screen reader users) and for SEO (image search, and general context for search engines about page content). This is a separate concern from file optimization but often gets addressed in the same workflow pass.

Automate the Process

Manual image optimization doesn't scale, and it's easy to forget for a rushed content update. Build optimization into your workflow — a build step that automatically compresses and converts images, or a CMS/upload pipeline that handles it automatically — so proper optimization happens by default rather than depending on someone remembering to do it manually every time.

The Bottom Line

Image optimization is one of the few performance improvements that's almost entirely upside with minimal trade-off — smaller file sizes, faster load times, better Core Web Vitals scores, all with negligible visible quality loss when done properly. Automating it into your workflow, rather than treating it as a manual afterthought, ensures the benefit is consistent across your entire site rather than just the pages someone happened to optimize by hand.