Images w/ next & vercel
I watched this video a while back where Theo warns against putting images and videos in the
/public
directory when using vercel. It makes total sense.
What I'm trying to understand, though, is what is happening when I do this:
Is this essentially the same thing? I understand the bundler is picking up the image and bundling it, and inserting the url to it into my source, but am not sure what this means from the pov of vercel bills etc?
Is it best to avoid this approach?5 Replies
Hey man! I have a couple points
Next highly recommends not using the vanilla
<img>
element but the built-in <Image>
component they provide. This handles size optimization for different screen sizes and device speeds.
It is also a good practice to use a CDN for images, however particularly for larger and more images.
And yes, when you import and set an image the way you're doing it it grabs the image's data and puts it into the <img>
element.
I assume you're just using this image in one place in your site?@greypixel
If you're using using CDN image or svg image, you need to use basic
<img>
tag. Next-image won't optimize it. Also if your image size is small, you can use <img>
.
But in case of following, I recommend u to use next-image component.
- You want automatic optimization, lazy loading, and resizing.
- You’re serving static or dynamic images that should be optimized.
- Your images are large or need different sizes for different devices.
- You want SEO and performance benefits.
next-image
provide so awesome benefits like optimize side, caching, responsive support, auto resizing per devices, blur, LQIP.
So next-image
component preferredYou can also use the next image component without optimization like
<Image src={..} unoptimized />
If you want to do this for every image, you can also enable a flag in your next config.
The way I do it is to disable the optimization from next image itself and pass my own loader with optimizations. Works way better for me :thumbsup:But I think the reason why we use next-image is just for optimize
the reason I use it is to make the eslint warning go away so I don't have to edit my config :PES_Burp: