Notes - Image Performance Implementation

image-performance

My own checklist for image implementation in a project - updated for how we build in 2026:

Format first

Ship AVIF or WebP - 30–50% smaller than JPEG/PNG at the same quality. Serve them with a fallback so old browsers still get something: <picture> handles this, and most image CDNs negotiate it for you.
Compress before anything else. When importing a PNG or JPEG, run it through Squoosh, sharp or your build pipeline first - no framework trick saves you from a 4 MB photo.

Responsive sizes - srcset + sizes so a phone never downloads the desktop image. Browsers pick the closest fit automatically.
Lazy-load below the fold with loading="lazy" and decoding="async".
Never lazy-load the LCP image. Your hero/banner needs fetchpriority="high" and no lazy attribute - lazy-loading the biggest above-fold image is the classic Core Web Vitals self-own.
Below-fold sections can also get content-visibility: auto so the browser skips laying them out until scrolled near.

Use next/image - it does format conversion, resizing and lazy-loading for you. The two knobs that matter:
- priority on the LCP image (this is the fetchpriority switch),
- sizes so the srcset matches your actual layout instead of guessing full viewport width.
Never require() or import a big image into client JavaScript "just to reference it" - a static import is fine (it gives you dimensions), but the image belongs in the pipeline, not inlined as base64 in the bundle. In App Router, import at the top of the component; Vite projects use new URL('./img.png', import.meta.url) when the tooling needs it.

Use SVG for icons where possible - crisp at any size, stylable with CSS, tiny.
Tree-shake icon imports: keep icons in individual modules (or use an icon package that supports it) so you import only the ten icons you use, never the whole 2 MB set.

Descriptive alt text and file names - alt="Hotel room with king bed and sea view", hotel-room-sea-view.webp. Good for screen readers and image search alike; empty alt="" is correct only for purely decorative images.

Run Lighthouse or WebPageTest before and after - "feels faster" is not a metric. Watch the LCP entry specifically; it is almost always an image.