Next.js automatically converts PNGs to WebP
- Planted:
The <Image> component from Next.js automatically converts PNG images to WebP. From the Image Optimization docs:
Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
While updating this website’s design, I created an SVG footer illustration to replace the PNG image I was using before. Out of curiosity, I checked how large the PNG file was both locally and in browser DevTools → Network panel. It was a 34KB .png file locally and a ~29KB .webp file over the network. Interestingly, the file size is further optimized based on how much of the image is visible in the viewport: from ~14KB on mobile up to ~29KB on desktop.
As a side note, the SVG I replaced it with is actually larger 😬, but it removes one network call since the <svg> is rendered inline rather than serving a separate image file rendered in an <img> tag. The SVG is also more flexible (e.g. dynamic fill color based on theme) and crisper on large screens.