How does the image optimization from next/image handle file sizes? Should I set up a file size limit for the image I'll upload to my web app?

Question

From the docs:

• https://nextjs.org/docs/basic-features/image-optimization
• https://nextjs.org/docs/api-reference/next/image

The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.

My use case is the following:

• Blogging website
• Blog posts' body images
• Thumbnails

This is what I've been doing so far (without any optimization):

• Body images (I only upload images with max. 150kb to my storage).
• Thumbnails (I limit them on 30kb).

I currently do not have any image optimization set up. I just upload the images to my storage and I have a file size limit set up on my upload component, so I can avoid large files.

Now that I'll be using next/image, does it mean that I don't need to take care of those file sizes anymore? Will it be safe to upload larger images to my storage and trust Next to do the optimization? Or should I still upload images with smaller sizes regardless of how Next.js will server them?

For example: what if I upload a 3mb image to my Storage? How will Next.js handle that image?

Should I still enforce a file size limit on my upload component?

Answer 1

By default, NextJS will handle image resizing and compression from whatever size you upload to a smaller one.

Now is a tricky part.

If you go to their official documentation: https://nextjs.org/docs/api-reference/next/image and then scroll down to Device Sizes and Image Sizes to see two arrays combined into one on the site build to determine which images to build.

The problem is that there are no values between 640 (the smallest device size) and 384 (the biggest image size). So, if you have a post image that should be 450px wide, it will be 384 or 640.

You can, of course, redefine these arrays in next.config and add images every 10 pixels to be generated. But this will make site building take longer and increase the number of images fetches on browser window resizing.

Also, they gave a good example after I spent hours getting to it myself, but let me explain my experience.

Here is the code: sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

It means if your device's maximum width is 768px, then the image will be rendered 100% of its width, but realistically days are gone when we have such a bad screen resolution on mobiles. Sure enough, the mobile browser extrapolates this resolution and gives it to the NextJS, but for developers, almost all screens look the same, 1920x1080 (aka FullHD) or even higher pixel-wise.

That's one thing. Another one was probably a bug, but I'll leave it to you to try yourself. When I used 100vw, the image was rendered in 100% not the device width, but the original width. So if a website opened on mobile with a portrait orientation and Full HD screen resolution, the maximum viewport width is 1080px, but the original image I uploaded was 2000x3000px, so I got this big one, yes, compressed by NextJS, but my SEO optimization report told me that it's oversized.

So rule number one: you can upload big images, and reference them in Twitter card/schema.org metadata/etc, but in HTML code specifies a number less than 100vw.

Another thing how you can improve your images is by enabling avif image support in next.js options

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp']
  },
}

This is a fast and easy way to leverage the newest compression format. But when I tested myself on my PC I found that for some images avif lossless compression gives better results in terms of resulting image quality/file size, than compressed one. There are no settings in the Next config for avif compression yet as of January 2023. So you have two options, leverage what is offered by NextJS or completely disable image optimizations and do it yourself, it's up to you.