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:
import greypixel from "../../../assets/images/avatars/greypixel.jpg";

//...

return <img src={greypixel.src} />
import greypixel from "../../../assets/images/avatars/greypixel.jpg";

//...

return <img src={greypixel.src} />
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
caleb
caleb6d ago
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?
BouncerU
BouncerU6d ago
@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 preferred
Aoki
Aoki6d ago
You 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.
const nextConfig = {
images: {
unoptimized: true
}
};
const nextConfig = {
images: {
unoptimized: true
}
};
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:
BouncerU
BouncerU6d ago
But I think the reason why we use next-image is just for optimize
Aoki
Aoki4d ago
the reason I use it is to make the eslint warning go away so I don't have to edit my config :PES_Burp:

Did you find this page helpful?