Visit homepage

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.



Respond with your thoughts, feedback, corrections, or anything else you’d like to share. Leave your email if you’d like a reply. Thanks for reading.