Using Images in Next.js (next/image examples)

0:00 – Introduction
0:34 – Using next/image
1:21 – Image component HTML output
2:00 – Image optimization
3:02 – Remote images
4:19 – Background images
5:03 – Image sizes and fill
6:29 – Image grid with fill
7:41 – Responsive images
8:19 – Image API reference and loaders
9:00 – Conclusion

[ala.garbaa]

Being responsive by default is what we have been waiting for 😊

[kylemckell]

Very honestly, the Image component is one of the reasons why I really like Next. Image optimization is such a headache to think about, and having it built into my framework is easily one of the greatest possible things about it. There's no need for me to reach for Cloudinary or anything like that aside from storage.

[HungNguyen-tlkg]

Image component is cool, however:
- I hope this video talks more about how "deviceSizes" and "sizes" work together
- I currently find no way to remove the "blur" effect when using placeholder. In my case, I need to provide a solid default svg image.
- The caching image url is pointed to the next server itself, it would be much better if we have a way to config this, maybe to point to a cdn url, to avoid DDOS, for example.
- It will be awesome if there is a Picture component from next/picture, I need some behavior like switching different image urls in different breakpoints of screens. -> I think I should try to look into implementation of next/image to study the way it decide which width is the most suitable one with the screen, then create a Picture component myself.

For anyone have solutions or ideas for these, I appreciate when you leave a comment 😍

[waggadash]

Love it! Currently I am building my first SaaS product with NextJS ... and this 'optimization course' was exactly what I needed! Thank you Lee

[ala.garbaa]

I am happy to see you posting new videos ❤ keep going 🎉

[sck]

the question is how to use blurDataUrl for dynamic images (remote images)

1. should we save the 10px image data in database

OR

2. save the 10px image and use plaiceholder lib to generate the data of the image

- it would be nice if blurDataUrl accepted the src of an small image instead of its data (so we dont have to use yet another lib)

[PieterBos]

Would love to see a picture tag implementation, using different images / aspects ratios on mobile / desktop

[janikaikkonen]

Doing exactly like you did on the video, setting style={{maxWidth: "100%", height: "auto"}} is giving warning into console:
"Image with src "abcdefg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio."

If I change maxWidth -> width I can get rid of the warning, but the layout explodes. I'm a bit confused...

[greg.j]

Love all your videos on NextJS, and love NextJS and what you guys are doing atm @leerob but just had to point out, in the English language, “height” is not pronounced with the “th” sound at the end. It rhymes with words like “right” or “bite” 😅

[tdombui]

I love it when I find the solution to one of my problems while randomly scrubbing through coding videos

[bagfleet]

Great video! I’d like to see one about caching, both with appdir and pagedir.

[kevinbatdorf]

Very nice background set up and video production quality.

[harriswong]

Unfortunately, I still got this "Error: Image with src "/..." is missing required "width" property.". I've already set style which contains width and height like you did in this video. I got an error but you didn't. What should I do?😭

[lucaapa]

hi,

I am using images from the public folder but when I build and see the src and the browser downloads it does not compress them and leaves them in .jpeg or .png form and in theory I should optimize them what am I doing wrong?

that's how I use them

import Image from 'next/image'

<Image fill alt="" className="h-[50%] w-full" />

and when I see the browser already compiled it appears the same

<img alt="" loading="lazy" decoding="async" data-nimg="fill" class="h-\\\[50%\\\] w-full"
with the same size as the folder and in theory it should convert it to webp

[student]

hey Lee if youre getting multiple images lets say for cards or a Hero section where you want the image to be 100% how can you do that with the <Img />...coz the props for width and height dont take

[denilsoncosta]

I think the next step for the image component is to set the width and height and generate the blur version without having to import the image first, just using the normal /[your public assets].

[joshua_hc_cr]

The image component in Next.js is particularly beneficial for individuals who want to avoid the complexities of handling various rendered sizes.

[szachgr]

nextjs14 if I set just width and hight within style property it doesn't work and it says is Error: Image with src blabla missing required "width" property. wtf?

[gold-junge]

i dosen't get it full, how is the workaround to global setup a backround image and get it converted

[lilshex]

Does anyone know why when I index a bunch of photos in nextJs, and import them they don't show, but when importing individual ones they work ? I'm trying to map them into a grid.