The Modern Web Image Optimization Guide: Compressing Images Without Destroying Quality

Images make up nearly half of the data downloaded on an average website. According to HTTP Archive data, images consistently account for more than 45% of the total page weight across top-ranking websites. When an e-commerce storefront or SaaS landing page feels sluggish, unoptimized images are almost always the primary bottleneck dragging down Google’s Core Web Vitals—specifically Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).

Historically, the default solution was simple: export a JPEG at "80% Quality" from Photoshop or Figma, run it through an online compressor, and ship it.

That workflow is obsolete. Modern image optimization requires understanding codec mathematics, human visual perception, chroma subsampling, and modern browser rendering pipelines.

In this guide, we'll break down the exact strategies top engineering teams use to reduce image sizes by 60% to 90% without visible loss in quality.

1. The Format Shift: Why JPEG and PNG Are Legacy Formats

If you are still serving raw JPEGs and PNGs to modern desktop and mobile browsers, you are transferring wasted bytes over the wire. Modern alternatives compress significantly better:

+-------------------------------------------------------------------------+
|                  Modern Asset Delivery Hierarchy                        |
|                                                                         |
|  [ Original PNG / JPG ]                                                 |
|         |                                                               |
|         +---> 1. Primary Target: AVIF (40-60% smaller than JPEG)        |
|         |                                                               |
|         +---> 2. Universal Fallback: WebP (25-35% smaller than JPEG)    |
|         |                                                               |
|         +---> 3. Legacy Fallback: Optimized mozjpeg / 8-bit PNG         |
+-------------------------------------------------------------------------+

The New Default: AVIF

AVIF (AV1 Image File Format) is derived from the open-source, royalty-free AV1 video codec. Across virtually all benchmarks:

• Compresses photographic images 40–60% smaller than JPEG at matching visual quality.
• Handles subtle gradients without the color banding typical of JPEG.
• Universal browser support across Chrome, Safari, and Firefox.

The Reliable Fallback: WebP

Introduced by Google, WebP is the dependable workhorse:

• Typically 25–35% smaller than comparable JPEGs and PNGs.
• Supports both 24-bit RGB with an 8-bit alpha channel (lossless transparency).
• Instant decoding speeds on low-powered mobile devices.

The Recommendation

Export your images as AVIF first. If a visitor uses an older browser, have a WebP copy ready as a backup.

2. Treat Photos and Graphics Differently

A single compression setting cannot handle every type of image. Photos and UI graphics work on completely different principles.

For Photos (Portraits, Products, Landscapes)

Photos have soft transitions, shadows, and natural noise.

• Convert them to AVIF or WebP.
• If you must stick to JPEG, use an optimizer like MozJPEG set to around 75% to 80% quality. Setting it to 100% quadruples the file size for detail nobody can see.

For Graphics (Screenshots, App Icons, Badges)

Graphics have sharp edges, solid blocks of color, and text.

• Converting large 32-bit PNGs to 8-bit indexed color (using tools like pngquant) reduces the color palette to 256 colors.
• Because flat graphics rarely contain millions of colors, this single step cuts PNG files by 60% to 75% with no visible blurring.

3. The "Retina" Trick: Double the Size, Half the Quality

High-density screens (like iPhone and Mac Retina displays) need high-resolution images so graphics don't look blurry. But saving a 2x image at 90% quality creates huge 3 MB to 5 MB files.

Instead, use this formula:

1. Export the image at 2x pixel dimensions (e.g., 2000px wide instead of 1000px).
2. Drop the compression quality down to 50% to 60%.

Because pixels are packed tightly on modern screens, small compression flaws disappear. The result is an image that looks razor-sharp on high-resolution displays while weighing less than a standard 1x export.

4. Strip Invisible Data

Every photo taken with a phone or camera carries hidden data:

• Camera model and lens settings
• GPS location coordinates
• Date, time, and editing history
• Embedded preview thumbnails

This metadata can add 20 KB to 100 KB of pure waste to every image. Always check the "Strip Metadata" or "Remove EXIF" option in your export tool before publishing.

5. Delivering Modern Images via HTML <picture>

To make sure modern browsers get modern formats while older devices still work, use the HTML <picture> tag:

<picture>
  <!-- 1. Modern browsers get AVIF -->
  <source type="image/avif" srcset="product.avif">

  <!-- 2. Slightly older browsers get WebP -->
  <source type="image/webp" srcset="product.webp">

  <!-- 3. Legacy fallback -->
  <img
    src="product.jpg"
    alt="Product showcase"
    width="800"
    height="600"
    loading="lazy">
</picture>

<picture>
  <!-- 1. Serve AVIF to cutting-edge browsers -->
  <source
    type="image/avif"
    srcset="hero-large.avif 1200w, hero-small.avif 600w"
    sizes="(max-width: 768px) 100vw, 1200px">

  <!-- 2. Serve WebP to older browsers -->
  <source
    type="image/webp"
    srcset="hero-large.webp 1200w, hero-small.webp 600w"
    sizes="(max-width: 768px) 100vw, 1200px">

  <!-- 3. Fallback for legacy clients / scrapers -->
  <img
    src="hero-large.jpg"
    alt="Product dashboard analytics preview"
    width="1200"
    height="675"
    loading="lazy"
    decoding="async">
</picture>

Three rules to keep in mind:

• Always include width and height attributes on the <img> tag: This tells the browser the image's dimensions before it downloads, preventing the page layout from jumping around as it loads (Cumulative Layout Shift (CLS)).

• Add loading="lazy": This stops the browser from loading images until the user actually scrolls down to them.

• Keep your primary Largest Contentful Paint (LCP) hero image set to loading="eager" with fetchpriority="high".

Quick Optimization Checklist

1. Format: Use AVIF or WebP instead of standard PNG/JPEG.
2. Screenshots & Logos: Reduce PNG color palettes to 8-bit.
3. HiDPI Screens: Double the resolution and drop quality to 55%.
4. Metadata: Strip all EXIF and camera data on export.
5. Layout: Add width, height, and lazy loading to your image tags.