Next.js Image Optimization with Image Component

Next.js Image Optimization with Image Component | Responsive Images

Рет қаралды 26,274

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Next.js image optimization with image component tutorial for responsive images. Learn how to best optimize images with the Next.js image component. Go beyond simply the required props and learn how to help Next.js provide the best image optimization and responsive images.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Next.js Image Optimization with Image Component | Responsive Images
(00:00) Intro
(00:19) Welcome
(00:41) Next.js Images
(00:49) Remote pattern config
(01:35) Image Component Overview
(02:37) Width & Height can be confusing
(03:34) Content Layout Shift
(05:24) You may need to lie to Next.js
(08:40) The Key to Better Responsive Images
(12:41) How to set the sizes value accurately
(16:03) Priority prop
(17:53) Final Notes
📚 Tutorial References:
🔗 Next.js Image: nextjs.org/docs/app/api-refer...
🔗 Next.js Image Optimization: nextjs.org/docs/app/building-...
🔗 Linter for Responsive Images: ausi.github.io/respimagelint/
🔗 CSS Tricks: A Guide to Responsive Images Syntax: css-tricks.com/a-guide-to-the...
Was this tutorial about Next.js Image Optimization with the Image Component and Responsive Images helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #responsive #images

Пікірлер: 60

@jaktrak 11 ай бұрын

I am self taught dev and images have always been frustrating for me, but based on stackoverflow questions it seems I am not alone. Next.js image has been giving me trouble too. Thanks for this video, can't wait to try out these tips.

@q.motivation1998 11 ай бұрын

You have explained almost everything in the small video. Appreciate you

@mikemisiura3850 8 ай бұрын

That note at the end about width and height classes was really helpful. Thanks!

@youneshenni5417 9 ай бұрын

Such valuable tips. Thanks Dave.

@pituboy 11 ай бұрын

You always make the best online tutorials for free. Thank you so much!!

@olp9667 8 ай бұрын

Great video, you really helped me to understand how the next/image component works! :)

@sarveshmishra8416 7 ай бұрын

Thanks for this great video Dave!

@roysheppard-dev 11 ай бұрын

Great explanation and tips to get correct sizes

@kirill_prog 6 ай бұрын

Фантастика! Спасибо большое! Очень полезный туториал.

@TravinskiyVladislav 11 ай бұрын

Thank you Dave!

@flnnx 5 ай бұрын

I got a bit confused reading through the NextJS docs but that video cleared things up for me. Thanks

@born2die827 4 күн бұрын

The image calculator is amazing. Thanks for sharing that with us

@DaveGrayTeachesCode 4 күн бұрын

Glad you liked it!

@libenhailu5193 11 ай бұрын

Thanks Dave you are an amaizing person you always dont forget to share us what you found, sizes prop has been a shady thing for me also thanks for sharing this

@orhanbursa7599 3 ай бұрын

Dude you are a life saver. I finally totally understand what the next image component does. Thank you very much.

@DaveGrayTeachesCode 3 ай бұрын

Glad it helped!

@rockNbrain 7 ай бұрын

Great job dude !

@sonamohialdin3376 11 ай бұрын

So good tutorial thank you

@bhanujkashyap Ай бұрын

Amazing explanation

@pefington 10 ай бұрын

Now if you don't know the dimensions of an image in advance (coming from an API or something), you can use 'fill': container className="relative aspect-video overflow-hidden" Image src=... alt=... fill sizes="(max-width: 640px) 100vw, 25vw" className="object-cover" /Image /container 'relative' is needed on the container to use fill, 'aspect' sets the desired aspect ratio, I believe 'overflow-hidden' is necessary too, and on the image 'object-cover' makes the Image behave like a background cover. As for the sizes, if you have a grid of 4 columns with one image each, you don't need more than 25vw per image, but if on mobile you only have one column that takes all the screen, you want 100vw.

@27sosite73 8 ай бұрын

thank you so so much!

@Habib-oc5si3ng4v 9 ай бұрын

Hey Dave please explain about edge and node runtime in NextJs and please teach us NestJs. thank you I learned so much from you.

@aymenbachiri-yh2hd 3 ай бұрын

thank you

@cevdet-gt3uu 11 ай бұрын

Thanks for the video ❤ I am currently working on a car dealership project and I have been using both the next js image + photo compressor + firebase storage. I think the image size is supposed to max 70-80 kb

@DaveGrayTeachesCode 11 ай бұрын

In this video, you will see I take a very large image down to just under 30kb.

@zergzerg4844 7 ай бұрын

Hi Dave. Why you didn't mention in you video how to avoid warning in console/log about incorrect sizes? Because no matter what incorrect sizes you put into props you still will be getting the warning.

@senselessplays 7 ай бұрын

What the solution for that bro I was working on the issue for 2 days

@user-gh3uo3om9g 9 ай бұрын

Thanks

@DaveGrayTeachesCode 9 ай бұрын

Thank you for the support!

@zelinpu5022 9 ай бұрын

In you video, I noticed that the next image created vertical paddings automatically, Why? and how to avoid that behaviour?

@nickwoodward819 7 күн бұрын

RE: sizes - what happens if it's always a fullscreen image? do you have to tell the browser at all?

@true227 11 сағат бұрын

Dave, is it true that Iamge optimization will only work when deployed to Vercel?

@Notes-Mitra 11 ай бұрын

Hey Dave, Can you share one example of infinite loading with SSR. am stuck in this problem I have a large no of data set with filter. i want to add pagination in SSR Component. Can you Please Help me

@magnuserikkeenrobot1117 3 ай бұрын

How do i support retina displays (2DPI and 3DPI) with NextJS Image?

@oruyoma4735 11 ай бұрын

Hii, Dave I just finished the HTML course, I'm into CSS How do you know so much ?

@DaveGrayTeachesCode 11 ай бұрын

I keep learning a little more every day.

@ashse4424 3 ай бұрын

Hey Dave, thanks for the nice explanation. I am currently optimizing my App with different images on different pages, how do I make sure the size of each image is because images are different on each page and I can't use Lint and put static size right, please guide.

@DaveGrayTeachesCode 3 ай бұрын

If I didn't address that here - dynamic sizing - I'm sure I did in the image gallery project series I did for the Net Ninja here: kzfaq.info/sun/PL4cUxeGkcC9hYBP0AZ3MNdEiiZqd4mHGm

@ashse4424 3 ай бұрын

@@DaveGrayTeachesCode sadly Dave you using the same lint plugin there as well, my only confusion is if images on each page are of different sizes (few are 100px *150px and some are 350 * 200px, some random sizes) how I will add the sizes property if the images are small and I use fill they are stretching and not looking proper. I just want image should look good how it is uploaded and also take advantage of next image sizes propert.

@milanpoudel7212 2 ай бұрын

Does anyone know if sizes prop will work or not if I pass unoptimized true in next image? It won't produces src sets I think because of which sizes props won't work?

@MirkoVukusic 9 ай бұрын

My issue with nextjs inage service is the price. 5000 8magr optinizations per month in pro plan. 5$ per additional 1000. Not so much for any kind of galleries (like ads, acommodation listings, etc) especially if you count different sizes for responsive images.

@rayhanislam7518 11 ай бұрын

Hey Dave, Can you share us nextJs typescript CRUD app with redux-rtk with SSR?

@DaveGrayTeachesCode 11 ай бұрын

Redux / RTK Query is for client-side state management. Unless state for the client got complicated, I'd stick with handling most things in server components that can connect directly to your database.

@habibullahkhan3297 11 ай бұрын

Hey Dave i want to master next js can you kindly share a roadmap or something that contains all topics on next js so i know what to learn

@DaveGrayTeachesCode 11 ай бұрын

It has changed quickly. The full course on my channel covers the fundamentals. After that, I've been adding individual topics like this. I do like the idea of creating a roadmap, too 🚀

@habibullahkhan3297 11 ай бұрын

@@DaveGrayTeachesCode thats great hope we get to see the it from you soon

@ranaimranahmed2532 7 ай бұрын

Please a project on next js woth mysql complete

@qualion 11 ай бұрын

RespImageLint doesn't work... It does the scanning but then shows blank page and 'SyntaxError: Unexpected token 'r', "respImageL"... is not valid JSON' in the console... does anyone know how to fix this?

@DaveGrayTeachesCode 11 ай бұрын

I have not had this issue. Others have mentioned it. Might be worth a Google or look at any issues posted to the GitHub page for the project

@hollycow8171 5 ай бұрын

Why next image default position Absolute?😮

@alefe238 11 ай бұрын

Dave, I know this isn't the point of the video, but how can I manage auth with next and a separate backend? I would like to retrieve a token and user data and use it within a server component to make requests. I can currently only do this inside a client component with the help of context

@DaveGrayTeachesCode 11 ай бұрын

There is a link to my Discord in the description for larger discussions.

@alefe238 11 ай бұрын

@@DaveGrayTeachesCode thanks! I'm going to check it out

@reinardmills4193 10 ай бұрын

@@alefe238 were you able to get an answer? I'm also interested in the answer

@FaizSultan430 11 ай бұрын

i am first who liked this vedio thanks u did so much for world

@Window2015 11 ай бұрын

And I'm 2nd

@TomAsh519 11 ай бұрын

this linter you advised does everything but NOT "sizes". why is it not plugging out this values?

@DaveGrayTeachesCode 11 ай бұрын

Put in your best guess for sizes first. It will only recommend sizes if you have put yours in first. Basically it offers a correction. This is what I show in the video.