Images & NextJS
Optimizing images on a page
1. Do not load the images
...that appear "below the fold"
2. Load the right size images
3. Use the right format
1. Do not load the images
...that appear "below the fold"
Priority
Lazy (default)
<Image priority /><Image />⚠️ Largest Contentful Paint
2. Load the right size images
Image sizes scales
O(width x height) ~ O(n^2)
120x120
size=37,000
480x480 (4x)
size=403,300 (10.9x)
3. Use the right format
Primer on DPI
Actual Screen DPI
Image DPI Used
Desktop, Typical
Desktop, HiDPI
Mobile, Typical
Mobile, Low BW
1x
72 DPI = 1x
print = 150-300
1.66x
1.66x
1x
2.5x
2x
2.5x
1-1.5x
jxl < webp < jpg < png
modern image fmt = smaller
480x480
webp size=37,000 (0.1x)
480x480
png size=403,300
Images & NextJS
By Olex Ponomarenko
