How I use @next/bundle-analyzer to find and fix Next.js bundle size bloat
A step-by-step walkthrough of Next.js bundle size analysis and reduction: finding large imports, fixing vendor chunks, and trimming icon libraries.
Tag
Image Optimization
Image optimisation in Next.js and Sanity — WebP/AVIF delivery, focal-point crops, LQIP blur, and eliminating CLS.
8 posts
5 min read
How I configure Sanity image URL auto=format with next/image to serve WebP and AVIF
Using Sanity's auto=format with next/image correctly avoids double-encoding and wasted bytes. Here is the exact setup I use in production.
How I cut Next.js bundle size by analysing and reducing chunk bloat
A practical walkthrough of Next.js bundle size analysis using @next/bundle-analyzer, with before/after numbers from a real project.
How I serve WebP and AVIF from Sanity without double-encoding in Next.js
Learn when to use Sanity's auto=format image URL API vs next/image formats, how cache keys work, and how to keep payloads small.
How I derive sizes, width, and height from Sanity metadata to kill CLS
Kill CLS on Sanity images for good. Pull metadata.dimensions into next/image sizes and aspect-ratio boxes — exact GROQ and component code.
How I wire next/image to Sanity hotspot focal point data for pixel-perfect crops
Stop letting next/image crop faces out of your hero. Wire Sanity hotspot + crop coordinates into next/image objectPosition — with code and the exact GROQ.
How I Eliminated Sanity Image Hot-Spot Reflows by Pre-Calculating Focal Crops
How I pre-calculate Sanity image hot-spot crops at build time to eliminate layout shift and guarantee stable LCP under 2.5s on editorial pages.
How I keep Sanity image pipelines under 50 kB using LQIP hashes and blur overlays
Cut LQIP overhead on Sanity + Next.js sites from 48 kB to under 5 kB. The production pattern, with the exact GROQ and Image component code.