← All posts

Lazy Loading Images

TinyForge Blog · Image optimization guides

Lazy loading defers off-screen images until the user scrolls near them, saving bandwidth and speeding up initial load.

Native lazy loading

<img src="photo.webp" alt="..." loading="lazy" width="800" height="600">

Rules

• Don't lazy-load the LCP (hero) image — it hurts performance.
• Always set width/height to avoid CLS.
• Use fetchpriority="high" on the hero image.
• For browsers without support, use IntersectionObserver fallback.

Combine lazy loading with compressed images from TinyForge for maximum speed.