Preemptive Image Sizing is a smart optimization technique that ensures all images on your website have explicit height and width attributes before they load. This prevents layout shifts and helps maintain a smooth, stable user experience.
By setting proper dimensions, browsers can allocate space for images before they fully load, reducing Cumulative Layout Shift (CLS)—a crucial Core Web Vitals metric.
As part of NitroPack’s advanced image optimization stack, Preemptive Image Sizing is enabled by default as part of our recommended settings.
However, you can disable it straight from your Images & Media tab in the left-hand menu.
Why is Preemptive Image Sizing important?
Without defined image dimensions, browsers don't know how much space an image will take up, causing elements on the page to shift as images load. This can lead to:
❌ A poor user experience – Sudden content movement can be frustrating for visitors.
❌ Failed Core Web Vitals – CLS issues can negatively impact SEO rankings.
❌ Rendering delays – Without set dimensions, browsers must wait for the image to load before determining its size.
With Preemptive Image Sizing, NitroPack automatically adds missing height and width attributes to images, ensuring a smoother, more stable page load.
How does NitroPack’s Preemptive Image Sizing work?
NitroPack’s Preemptive Image Sizing works by:
Scanning your website for images without explicit dimensions.
Automatically assigning height and width attributes to maintain layout stability.
Ensuring the page loads without unexpected shifts, improving CLS scores.
💡 Have more questions? Check out our Help Center or contact our support team for assistance.