Next.js Image Optimization with Image Component | Responsive Images
Вставка
- Опубліковано 10 лип 2024
- 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
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.
You have explained almost everything in the small video. Appreciate you
That note at the end about width and height classes was really helpful. Thanks!
You always make the best online tutorials for free. Thank you so much!!
Thanks for this great video Dave!
Such valuable tips. Thanks Dave.
Great video, you really helped me to understand how the next/image component works! :)
Great explanation and tips to get correct sizes
Фантастика! Спасибо большое! Очень полезный туториал.
Thank you Dave!
Great job dude !
The image calculator is amazing. Thanks for sharing that with us
Glad you liked it!
I got a bit confused reading through the NextJS docs but that video cleared things up for me. Thanks
Dude you are a life saver. I finally totally understand what the next image component does. Thank you very much.
Glad it helped!
Amazing explanation
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
So good tutorial thank you
thank you so so much!
thank you
Hey Dave
please explain about edge and node runtime in NextJs
and please teach us NestJs.
thank you
I learned so much from you.
Thanks Dave, as always your videos are top notch. Unfortunately, the linter app didn't work on my website. It doesn't detect any images. I think it's getting caught up in the loading state of my GraphQL query.
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.
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
In this video, you will see I take a very large image down to just under 30kb.
Dave, is it true that Iamge optimization will only work when deployed to Vercel?
RE: sizes - what happens if it's always a fullscreen image? do you have to tell the browser at all?
How do i support retina displays (2DPI and 3DPI) with NextJS Image?
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?
In you video, I noticed that the next image created vertical paddings automatically, Why? and how to avoid that behaviour?
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
Thanks
Thank you for the support!
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.
What the solution for that bro I was working on the issue for 2 days
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.
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: ua-cam.com/play/PL4cUxeGkcC9hYBP0AZ3MNdEiiZqd4mHGm.html
@@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.
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?
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
Hii, Dave
I just finished the HTML course, I'm into CSS
How do you know so much ?
I keep learning a little more every day.
i am first who liked this vedio thanks u did so much for world
And I'm 2nd
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.
Please a project on next js woth mysql complete
Hey Dave, Can you share us nextJs typescript CRUD app with redux-rtk with SSR?
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.
Why next image default position Absolute?😮
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
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 🚀
@@DaveGrayTeachesCode thats great
hope we get to see the it from you soon
this linter you advised does everything but NOT "sizes". why is it not plugging out this values?
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.
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
There is a link to my Discord in the description for larger discussions.
@@DaveGrayTeachesCode thanks! I'm going to check it out
@@alefe238 were you able to get an answer? I'm also interested in the answer
Getting hydration errors using next/image despite giving width and height
Good timing - I talk about hydration errors in the video I published today: ua-cam.com/video/iA8JR8GgTKs/v-deo.html