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

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

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 😍

Always great content Lee, thank you!

Very nice background set up and video production quality.

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

Thanks, Lee. Excellent and useful examples. Like )

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.

Great job Lee! Tks 🎉

Thank you so much! That was very helpful!!!

Great video, very valuable! 👍

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

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

Amazing update !

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

Great input

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)

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.

Hey Lee, amazing video, just wanted to know what vscode theme are you using looks quite attractive 😅

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 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].

great video!... what about svg icons with multiple icon sizes? should we use next/image for that?

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.

Thanks mate! ❤

Nice! So we do we still need to install Sharp or not?

crystal clear

thanks a lot

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.

What if the external image is hosted on a Protected route ? Can we supply Authorization Headers to Next/Image ?

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 ?

Blur data URL is epic 👍

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'

Thank you

Waiting for your video.

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?

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

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...

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” 😅

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

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?

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.

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

Which version of the image should I put as static file? (1x or 2x)?

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. 😉 🎉

what VSCode Theme do u use?

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 ?

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?😭

hallo, can you make a tutorial to save image/file to local directory while API Posr?

"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?

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:

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

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.

We would like to see the server actions with turbopack

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.

Images get 404 error and wont get displayed after deploying to AWS Amplify. Any thoughts?

i am using sizes and fill as taught, the width is correct but why is my height 0 on the browser?

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

Awesome

I got a problem when building my app, local images are not rendering. Any reason why is this happening?

Does the image component work with .svg ?

Now we need one for inline videos to play like gifs

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.

why my next images are breaking after i deployed my next website using gitlab pages

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.

Good video

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

I do not understand how to make responsive images)) can someone explain?

GOAT🚀

Hi, loading.tsx is not working in app directory why?

This doesn't work for GCP deployment, right?

So finally😩 the annoy error gone now use like img tag I mean the annoy require prop

Background image example is not good

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

i don't get how this works? kzfaq.info/get/bejne/f7uPpNSQyMXQe3U.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

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?

Your responsive isn't responsive at all. What if we don't want to always stretch the image to 100% width.

First

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: '/**',

Which version of the image should I put as static file? (1x or 2x)?