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 😍
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.
That's funny. I've never used the Image component because it's so confusing. Literally never managed to get an image working using it. So it just gives me more headaches.
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...
i don't get how this works? ruclips.net/video/IU_qq_c_lKA/видео.html how does it optimize images from a remote source? this seems like a fake feature, that does not actually work. unless you are doing an SSG, this is the only way that can actually work
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)
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'
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?😭
this doesnt work, Ive just tried to use the style property to set width and height (without the explicit width and height properties) and its not letting me:
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 ...coz the props for width and height dont take percentages.....
Using next version 13.3.4 and when I use the first example in this video, what you called, "the most basic," I get the error 'missing required width property'. Why am I or how are you not? Solving this is why I'm here.
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?
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].
Thanks for this Lee! I was wondering how can i allow a 2mb image but during the upload itself it shrinks/compresses and THEN stores in the bucket at a much reduced size, saving some sorage space as well? Im using supabase. Thanks.
It does, but you don't need to use it. To optimize your SVG, you'd want to use a different tool. next/image is for optimizing raster images like pngs, not vector images like svgs. Like SVGO! jakearchibald.github.io/svgomg/
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” 😅
So when we import an image from the public directory we do not need to specify a width and a height or even use the fill prop ? But we need to use those props when the image is remote ?
The image width/height are automatically added when you import an image directly, yes. This works regardless if you use `fill` or not. When the image is remote, Next.js can't automatically determine that for you, so you have to add width/height to prevent layout shift.
What happend with external images from a bucket? will the resize be made server side on the fly? or will store a cache for each image even if it is external?
how about using placeholder="blur" with images coming from a url, cms, cdn, ... I think that's a much more real world example and I'm struggling with that for a long time.
quick question, so its ok to put any value for width and height as long as you inline style with the maxwidth : 100% and height : auto properties when youre using remote images? nextjs will automatically avoid layout shifts and render with the aspect ratio? it looks like its doing that in my local project but im not definitely sure.
Hello. Is there any opportunity to have image optimization library for React JS like Next/Image, which way is common for plain React projects, to have CDN like Imagekit, Imgix or Cloudinary or there is another better way without CDN? I’m using Supabase storage in plain React app.
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.
I have my frontend on nextjs 13 using app router and backed is in python django. And i want to use Image component currently both frontend and backend is on locally. Can you guide me how i can use the Image component of nextjs?
This video leaves many questions unanswered. No information on how to do art directing for example. Can you really talk about responsive images without art direction? What about background images? I mean the real background images - CSS background-image property. Why can't it use it?
trying to do this, similar to how you did it in the video but I keep getting this error: Image with src "./SVG/tintin.svg" is missing required "width" property.
"Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders." Why is this not working for me? The layers tool shows me that below the viewport the images are loaded already. The sentence makes me think it's using intersection, is that not the case? Or am I missing something?
But for Nextjs 14 images are still throwing off error tried the below stuff but no use - protocol: 'https', hostname: 'example.cloudfront.net', port: " ", pathname: '/**',
My little Nigerian startup using the image component got charged using the image component and additional 50 usd I love the component but the cost is too high when you start getting some traffic
@@EmmanuelOdii80 so we are on the pro plan You get 5000 image optimisation free for a month after that you need to pay for additional optimisations. 5000 might seem like a lot but it really isn’t, it doesn’t even last for a week on our product.
I was wondering why in the Image srcset generated when specifying the sizes property, all the sources have the same pixel dimensions ? Am I doing something wrong ? I would have guessed that the image's pixel dimensions would be different for each specified size
this next version big problem is state managementing. Please do something for this. Internal global state managementing or connect other state managementing tools at least. Thanks
Can anyone tell me how to handle image from url with dynmic viewport sizes? I though to create a hook around viewport width and then generate image at run time (which will already be because its from a url) using the said width. Is any other way exists? Can this be done? Beside this, thanks for the heads up for all the new features of the image tag from next. I love it and your tutorials. 😉 🎉
Nice! Here's a question tho... Let's say I have two versions of an image, one for regular screens and one that's double in size for HiDPI screens, how can I tell Image to serve one over the other? The sizes prop isn't really letting me do that and I have to resort to using the regular img tag with the srcSet attribute and specify "/image.png, /image-2x.png 2x" for it to work properly.
This is the main issue with Image component. The only way to do this is with deviceSizes/imageSizes in next.config.js. There are multiple issues registered regarding this and Vercel does not even try to solve this...
I have the same doubt. HTML element has the srcset attribute which works with sizes attribute to tell it which image file download depending on browser width. How can use the equivalent in Nextjs?
Maybe it is possible using a custom loader which generates the right URL depending on the browser width, but I am not sure about that. I am researching it. If you find out the answer post here please
Two questions regarding nextjs before i jump. 1: IF i want to use nextjs just for client side rendering (cuz i like many features of it like Link), how can i use nodejs + nextjs ? 2: how to test Nextjs with jest + react testing library ?
1. Everything is still sent from the server, but your initial response from the server could be no HTML and then render everything on the client-side, if you really want, yes. 2. nextjs.org/docs/pages/building-your-application/optimizing/testing
Importing the image adds the width and height for you. If you are using a remote image, you need to either add the width and height yourself, or use the fill prop as shown in this video.
SVG format is scalable by default, so you just need one icon for all the sizes. I would embbed SVG inline code as a React component instead of having a .svg file
Yes, it works. The images would be optimized by the Next.js server when using `next start`. I'd recommend installing and using `sharp`, too. nextjs.org/docs/app/building-your-application/deploying#:~:text=If%20you%20are,excessive%20memory%20usage.
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 😍
Being responsive by default is what we have been waiting for 😊
Exactly ❤
Too bad it isn't.
CSS isn't responsive by default. None of the HTML elements are. It's that way for a reason
I am happy to see you posting new videos ❤ keep going 🎉
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.
That's funny. I've never used the Image component because it's so confusing. Literally never managed to get an image working using it. So it just gives me more headaches.
@@loveboat the old one was super confusing, but the new one is a lot better
@@loveboat hh
Background image example is not good
Great video! I’d like to see one about caching, both with appdir and pagedir.
ruclips.net/video/gSSsZReIFRk/видео.html
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...
have you found a solution?
Would love to see a picture tag implementation , using different images / aspects ratios on mobile / desktop
Great job Lee! Tks 🎉
i don't get how this works?
ruclips.net/video/IU_qq_c_lKA/видео.html
how does it optimize images from a remote source? this seems like a fake feature, that does not actually work.
unless you are doing an SSG, this is the only way that can actually work
Thanks, Lee. Excellent and useful examples. Like )
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)
Blur data URL is epic 👍
The image component in Next.js is particularly beneficial for individuals who want to avoid the complexities of handling various rendered sizes.
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'
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?😭
this doesnt work, Ive just tried to use the style property to set width and height (without the explicit width and height properties) and its not letting me:
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 ...coz the props for width and height dont take percentages.....
Using next version 13.3.4 and when I use the first example in this video, what you called, "the most basic," I get the error 'missing required width property'. Why am I or how are you not? Solving this is why I'm here.
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?
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].
Thanks for this Lee!
I was wondering how can i allow a 2mb image but during the upload itself it shrinks/compresses and THEN stores in the bucket at a much reduced size, saving some sorage space as well? Im using supabase.
Thanks.
Does the image component work with .svg ?
It does, but you don't need to use it. To optimize your SVG, you'd want to use a different tool. next/image is for optimizing raster images like pngs, not vector images like svgs. Like SVGO! jakearchibald.github.io/svgomg/
i dosen't get it full, how is the workaround to global setup a backround image and get it converted
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” 😅
Which version of the image should I put as static file? (1x or 2x)?
Which version of the image should I put as static file? (1x or 2x)?
I got a problem when building my app, local images are not rendering. Any reason why is this happening?
Always great content Lee, thank you!
why my next images are breaking after i deployed my next website using gitlab pages
i am using sizes and fill as taught, the width is correct but why is my height 0 on the browser?
So finally😩 the annoy error gone now use like img tag
I mean the annoy require prop
So when we import an image from the public directory we do not need to specify a width and a height or even use the fill prop ? But we need to use those props when the image is remote ?
The image width/height are automatically added when you import an image directly, yes. This works regardless if you use `fill` or not. When the image is remote, Next.js can't automatically determine that for you, so you have to add width/height to prevent layout shift.
Very nice background set up and video production quality.
What happend with external images from a bucket? will the resize be made server side on the fly? or will store a cache for each image even if it is external?
I do not understand how to make responsive images)) can someone explain?
how about using placeholder="blur" with images coming from a url, cms, cdn, ... I think that's a much more real world example and I'm struggling with that for a long time.
quick question, so its ok to put any value for width and height as long as you inline style with the maxwidth : 100% and height : auto properties when youre using remote images? nextjs will automatically avoid layout shifts and render with the aspect ratio? it looks like its doing that in my local project but im not definitely sure.
Hello. Is there any opportunity to have image optimization library for React JS like Next/Image, which way is common for plain React projects, to have CDN like Imagekit, Imgix or Cloudinary or there is another better way without CDN?
I’m using Supabase storage in plain React app.
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.
I have my frontend on nextjs 13 using app router and backed is in python django. And i want to use Image component currently both frontend and backend is on locally. Can you guide me how i can use the Image component of nextjs?
Great video, very valuable! 👍
This video leaves many questions unanswered. No information on how to do art directing for example. Can you really talk about responsive images without art direction? What about background images? I mean the real background images - CSS background-image property. Why can't it use it?
github.com/vercel/next.js/discussions/19880#discussioncomment-6310787
trying to do this, similar to how you did it in the video but I keep getting this error:
Image with src "./SVG/tintin.svg" is missing required "width" property.
yeah, same.
same, I guess I will stick to , using 14.0 version ...
Images get 404 error and wont get displayed after deploying to AWS Amplify. Any thoughts?
"Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders."
Why is this not working for me? The layers tool shows me that below the viewport the images are loaded already. The sentence makes me think it's using intersection, is that not the case? Or am I missing something?
What if the external image is hosted on a Protected route ? Can we supply Authorization Headers to Next/Image ?
But for Nextjs 14 images are still throwing off error tried the below stuff but no use - protocol: 'https',
hostname: 'example.cloudfront.net',
port: " ",
pathname: '/**',
My little Nigerian startup using the image component got charged using the image component and additional 50 usd
I love the component but the cost is too high when you start getting some traffic
What do you mean?
@@EmmanuelOdii80 so we are on the pro plan
You get 5000 image optimisation free for a month after that you need to pay for additional optimisations.
5000 might seem like a lot but it really isn’t, it doesn’t even last for a week on our product.
so you deployed the app on Vercel?
@@nivethan_me yeah
thank you sir
Thank you
I was wondering why in the Image srcset generated when specifying the sizes property, all the sources have the same pixel dimensions ? Am I doing something wrong ? I would have guessed that the image's pixel dimensions would be different for each specified size
this next version big problem is state managementing. Please do something for this. Internal global state managementing or connect other state managementing tools at least. Thanks
please what theme do you use
thanks a lot
How to opt out for image optimization cause some site that is eating my usage quota yet it's not so important in my scenario!
Can anyone tell me how to handle image from url with dynmic viewport sizes?
I though to create a hook around viewport width and then generate image at run time (which will already be because its from a url) using the said width.
Is any other way exists? Can this be done?
Beside this, thanks for the heads up for all the new features of the image tag from next. I love it and your tutorials. 😉 🎉
hallo, can you make a tutorial to save image/file to local directory while API Posr?
what VSCode Theme do u use?
Nice! Here's a question tho... Let's say I have two versions of an image, one for regular screens and one that's double in size for HiDPI screens, how can I tell Image to serve one over the other? The sizes prop isn't really letting me do that and I have to resort to using the regular img tag with the srcSet attribute and specify "/image.png, /image-2x.png 2x" for it to work properly.
This is the main issue with Image component. The only way to do this is with deviceSizes/imageSizes in next.config.js. There are multiple issues registered regarding this and Vercel does not even try to solve this...
I have the same doubt. HTML element has the srcset attribute which works with sizes attribute to tell it which image file download depending on browser width. How can use the equivalent in Nextjs?
Maybe it is possible using a custom loader which generates the right URL depending on the browser width, but I am not sure about that. I am researching it. If you find out the answer post here please
Love it! Currently I am building my first SaaS product with NextJS ... and this 'optimization course' was exactly what I needed! Thank you Lee
Hey Lee, amazing video, just wanted to know what vscode theme are you using looks quite attractive 😅
I love it when I find the solution to one of my problems while randomly scrubbing through coding videos
Would love to see how to handle anything else than happy paths with the new app router. Retries for example
any idea on how to use videos as backgrounds in next js please?
We would like to see the server actions with turbopack
Thank you so much! That was very helpful!!!
Hi I think my comment got delete b/c I linked to the issue. next/image currently has a bug with "fill", see issue 50067
Nice! So we do we still need to install Sharp or not?
Now we need one for inline videos to play like gifs
Thanks mate! ❤
No problem!
Waiting for your video.
Two questions regarding nextjs before i jump.
1: IF i want to use nextjs just for client side rendering (cuz i like many features of it like Link), how can i use nodejs + nextjs ?
2: how to test Nextjs with jest + react testing library ?
1. Everything is still sent from the server, but your initial response from the server could be no HTML and then render everything on the client-side, if you really want, yes.
2. nextjs.org/docs/pages/building-your-application/optimizing/testing
crystal clear
Amazing update !
Do we have to import the image for this to work? because for some reason adding width and height properties are still required for me
Importing the image adds the width and height for you. If you are using a remote image, you need to either add the width and height yourself, or use the fill prop as shown in this video.
GOAT🚀
Awesome
Great input
great video!... what about svg icons with multiple icon sizes? should we use next/image for that?
SVG format is scalable by default, so you just need one icon for all the sizes. I would embbed SVG inline code as a React component instead of having a .svg file
This doesn't work for GCP deployment, right?
Yes, it works. The images would be optimized by the Next.js server when using `next start`. I'd recommend installing and using `sharp`, too.
nextjs.org/docs/app/building-your-application/deploying#:~:text=If%20you%20are,excessive%20memory%20usage.
@@leerob Thanks. Will try it.
Hi, loading.tsx is not working in app directory why?
maybe page.tsx "use client" ??
@@andrsh9388 no both page.tsx and loading.tsx are server components
Good video
Thanks!
I think is missing a lot of points.
just have a look at how many questions NextJS experienced developers have about next/image component.
Your responsive isn't responsive at all. What if we don't want to always stretch the image to 100% width.
First