Image Optimization Foundation
Images are often the largest bytes on a page and they are frequently the LCP element. Image optimization is mostly about serving the right image (format + dimensions) at the right time (priority + lazy loading) without causing layout shifts.
The Four Levers
| Lever | What You Change | Typical Win |
|---|---|---|
| Format | JPEG/PNG -> WebP/AVIF (SVG for icons) | Fewer bytes |
| Compression | Quality level and metadata | Fewer bytes |
| Dimensions | Resize to the rendered size | Fewer bytes |
| Delivery | srcset/sizes, CDN, caching | Faster LCP |
CLS-Safe Image Markup
The single most important CLS rule for images is reserving space.
cls-safe-image.html
<img
src="/uploads/example.webp"
width="1200"
height="800"
alt="Example"
loading="lazy"
decoding="async"
/>
Use loading="lazy" for below-the-fold images. Do not lazy-load the LCP image.
LCP Image Rules
If the LCP element is an image:
- Do not lazy-load it
- Use WebP/AVIF (with fallback as needed)
- Consider
fetchpriority="high" - Consider a preload hint if the image is discovered late
lcp-image.html
<img
src="/images/hero.webp"
width="1200"
height="630"
alt="Hero"
fetchpriority="high"
loading="eager"
decoding="async"
/>
Static vs Dynamic Sites
Static sites can compress aggressively and lazy-load almost everything below the fold. Dynamic sites (WooCommerce/LMS) often need higher visual quality on product images and must avoid breaking templates like cart/checkout.