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.
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.
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.
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.
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.
Note
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.
At a glance
- Page Weight
- 50-70% of total
- Techniques
- Format, resize, compress, lazy load
- Impact
- LCP, FCP
- Tools
- Sharp, Squoosh, CDN
How Atomic Glue helps
Atomic Glue implements automated image pipelines: AVIF/WebP conversion, srcset generation, CDN integration. Web Development services.
Get in touchUnderlined terms have their own entry. Selecting one shows it on the map below.
Atomic Glue. "Image Optimization." Glossary.atomicglue.co/glossary/image-optimization
How Image Optimization connects
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.
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.
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.
Common Misunderstandings
Saving at maximum quality 'because I can compress later' is a trap. CSS resizing is not enough: with a 4000px source still downloads the full image. WebP and AVIF support lossless compression for screenshots.
Core Techniques
- 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.
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.