How I build a Next.js blog that stays fast at 100+ posts
Static generation, pagination, image handling, and bundle discipline for a Next.js blog that doesn't slow down as content grows. Practical code included.
Tag
Image Optimization
Image optimisation in Next.js and Sanity — WebP/AVIF delivery, focal-point crops, LQIP blur, and eliminating CLS.
11 posts
7 min read
Sanity video hosting in 2026: Mux vs Cloudinary vs Bunny Stream
Comparing Mux, Cloudinary, and Bunny Stream for sanity video hosting — upload workflow, adaptive streaming, pricing, and LCP poster handling.
Sanity image-url hotspot not working: four causes and fixes
Sanity hotspot not applying to your rendered image? Here are the four real causes and exact fixes for each one.
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.
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.
Next.js Bundle Size: Analyzing and Cutting Chunk Bloat
A practical walkthrough of Next.js bundle size analysis using @next/bundle-analyzer, with before/after numbers from a real project (487 kB to 301 kB).
Serve WebP & AVIF from Sanity Without Double-Encoding
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 in a Next.js project.
Kill CLS on Sanity Images: sizes, width & height from Metadata
Kill CLS on Sanity images for good. Pull metadata.dimensions into next/image sizes and aspect-ratio boxes — exact GROQ and component code.
Sanity Hotspot + next/image: Pixel-Perfect Focal Point Crops
Use @sanity/image-url with hotspot, crop, fit, width, and height to crop Sanity images to an exact size in next/image — focal point preserved, with code and the exact GROQ.
Fix Sanity Hotspot Image CLS by Pre-Calculating Focal Crops
How I pre-calculate Sanity image hot-spot crops server-side to eliminate layout shift and guarantee stable LCP under 2.5s on editorial pages.
Sanity Image Placeholders Under 50 kB: Palette, Not Base64 LQIP
Cut LQIP overhead on Sanity + Next.js sites to nearly zero using Sanity's built-in metadata.palette instead of inline Base64 blur data. Exact GROQ and component code.