The blur-up placeholder
A heavy hero image leaves the reader looking at empty space while it downloads, and then shoves the page around when it arrives. The usual fix is a low-quality image placeholder: a twenty-pixel-wide version of the same picture, small enough to inline directly in the HTML, which the browser upscales into a blur until the real file lands.
It buys two things. The reader sees the shape of the content immediately, and the placeholder reserves the right box, so nothing jumps — which is what Largest Contentful Paint and Cumulative Layout Shift are both measuring.
Using it
Choose an image; it is resized and re-encoded as a Base64 data URI, ready to paste. With next/image that goes straight intoblurDataURL:
<Image
src="/my-high-res-image.jpg"
alt="Beautiful View"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
/>Keep it tiny.
Ten to twenty pixels wide is plenty — it is going to be blurred anyway. A larger placeholder just inflates the HTML you were trying to keep small, which defeats the point.