PERFORMANCE

Home › Glossary › Performance· 219 ·

Image Optimization

/ˈɪmɪdʒ ˌɒptɪmaɪˈzeɪʃən/n.

Filed underPerformanceContent Strategy

In brief · quick answer

The practice of selecting, compressing, sizing, and delivering images to minimize load time while preserving visual quality. The single highest-impact optimization for most websites.

§ 1 Definition

Images make up 50-70% of a typical page's weight. Optimization includes choosing the right format (WebP, AVIF, JPEG, PNG), applying compression, resizing, using responsive images, lazy-loading below-fold images, and serving via CDN.

§ 2 Why It Matters

A single unoptimized hero image can exceed the entire recommended page weight (2 MB). Reducing image weight by 50% correlates with meaningful LCP and FCP improvements. Faster images convert better on mobile.

§ 3 Common Misunderstandings

Saving at maximum quality 'because I can compress later' is a trap. CSS resizing is not enough: <img width=400> with a 4000px source still downloads the full image. WebP and AVIF support lossless compression for screenshots.

§ 4 Core Techniques

1) Choose format: photos to WebP or AVIF; screenshots to PNG/lossless WebP. 2) Responsive srcset. 3) Lossy compression at quality 80-85. 4) Lazy-load below-fold images. 5) Never lazy-load the LCP candidate. 6) Serve via CDN with auto-conversion.

§ 5 Note

Over-optimization (visible artifacts) is worse than no optimization. Visually inspect at display size.

§ 6 In code

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" width="1200" height="600" fetchpriority="high">
</picture>

§ 7 Common questions

Q. Best format for photos?: A. AVIF for compression, WebP for compatibility, JPEG as fallback.

Key takeaways

50-70% of page weight is images.
Use WebP and AVIF.
Resize to display dimensions.
Lazy-load below-fold; never LCP candidate.

How Atomic Glue helps

Atomic Glue implements automated image pipelines: AVIF/WebP conversion, srcset generation, CDN integration. Web Development services.

Get in touch

# Image Optimization

The practice of selecting, compressing, sizing, and delivering images to minimize load time while preserving visual quality. The single highest-impact optimization for most websites.

Category: Performance (also: Content Strategy)

Author: Atomic Glue Performance Team

## Definition

## Why It Matters

## Common Misunderstandings

## Core Techniques

## Note

Over-optimization (visible artifacts) is worse than no optimization. Visually inspect at display size.

## In code

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" width="1200" height="600" fetchpriority="high">
</picture>

## Common questions

Q: Best format for photos?

A: AVIF for compression, WebP for compatibility, JPEG as fallback.

## Key takeaways

50-70% of page weight is images.
Use WebP and AVIF.
Resize to display dimensions.
Lazy-load below-fold; never LCP candidate.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/image-optimization