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?