Image Optimization

Optimizing every image by hand one at a time can be time-consuming and costly. What if there were a way that it could be done automatically at the time of build? With Next.js, this is a reality.

We'll cover the following

Site analysis

Have you ever heard of Lighthouse or Pingdom? They grade your site.

Low grades

One of the main reasons you will receive a low score from one of these site testing tools is because of your images. Most images, even smaller ones, are large files. These can significantly slow down a site if not handled properly.

Image optimization you can do

There are a few things you should do before letting Next.js optimize your images.

  1. Use jpg images unless transparency is a factor, otherwise use png.
  2. Programs like Photoshop can make images into a smaller file size at the cost of quality. Try making your images as small as possible without a noticeable difference to quality.
  3. Use the correct image size. If your image will be displayed not larger than 700px at any time on the site then your image does not need to be larger than that.

Next.js automatic image optimization

A new compression created and maintained by Google is WebP. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Next.js can handle the conversion of all your images into WebP for you automatically. There is a little configuration involved, but it is well worth it.

At the root of your application, you will create a file named next.config.js.

Get hands-on with 1400+ tech skills courses.