Next.js Image in-depth tutorial

[@RaulReyesOnline]

This is hands down the best explanation I had ever found on the internet. Not exaggerating. The use of the references and the comparisons when need it are pure gold. It is done with a humble approach to teaching rarely found on KZbin amazing! Makes me feel human…thanks!

[@zachgoll]

Thank you! I put a lot into this one :)

[@jmg9509]

I cannot thank you enough for this amazingly detailed guide. And yes, things did indeed finally click...I can finally get my image file size tiny enough to not bog down my app. Before, I see now, that I was loading huge desktop file sizes for even mobile devices. Don't mind my referencs below (for when i need to get a referesher :) ) 1:15 - Questions I been banging my head on the table about 14:10 - with sizes - the image size reduces drastically (more than 10x) 16:35 - 3. What does Image Optimization/transformation mean? 26:50 - Loaders 36:30 - 5. How to effectively use Next.js Image in diff situations 42:30 - placeholderBlur & blurDataUrl explained 49:30 - calculate blurDataUrl yourself (for remote images) 1:12:10 - sizes explained indepth 1:19:50 - sizes - local images require sizes if 'fill' is not specified, in order to generate a srcset

[@ozzyfromspace]

Feedback: I watched your video with a high degree of focus, in fullscreen mode, in one sitting (you held my attention really well!). The patience, detail, and clarity with which you went through the image component was exceptional. Overall, this was a phenomenal lecture, and really brought to light a few things I didn't understand. 10/10, liked and subbed! And I'll be sure to recommend your video to my NextJS friends :) Thank you so much, Zach! Also, you asked a question about clarifying sizes and srcset: Basically, srcset allows you to provide a list of url's for your images that should execute when the image reaches a certain width. For instance: "/path/to/a 400w, /path/to/b 800w" would load the first image while the browser expects the image to be under 400 (computed) pixels (not hardware pixels), and the second image would load once the browser expects the image to have a width over 400 pixels and under 800 pixels. The little detail here is that the browser is actually looking for the width of the image, not the viewport. So, ofc you can think of "400w" as the width of the viewport, but really it's the expected size of your image. They just happen to be the same. But this is where the "sizes" prop comes in. In srcset, above, the browser computes the expected size of the image by ASSUMING that the image will take up the full width (i.e. 100vw). It does this because you might, for example, have some fancy css going on with flexbox or grid etc, so it doesn't know how you wish to actually render the image. For example, you could render an image in a 2-column layout. The browser doesn't know, because it can't statically analyze your codebase. So it assumes that the width of the image is 100vw, the width of the viewport. So sizes essentially allows you to tell the browser how much width the image will take in your layout. For example: sizes="50vw" is telling the browser that the image has a width that is 1/2 of the viewport width. So If your viewport has a width of 1240px, the browser knows that your image is expected to take up half of that (50vw = 1240/2px = 620px). So at a width of 620px, the browser can THEN look at the srcset to figure out which url to use based on what interval the 620px image is in. While you may not have been super confident about this perspective in the video, you actually managed to demonstrate it correctly, and ultimately gave us the right idea. This text is merely intended to state the relationship between srcset and sizes more clearly, and validate what your experiments suggested, because ultimately you were right that sizes maps to some fraction of the width's in the srcset. So, amazing job! Bonus: sizes can actually take a calc, so if for whatever reason you needed to be more specific/accurate about the amount of width in the viewport that the image takes up, you could compute it. For example, say you have a 2 column grid whenever the viewport exceeds 600px, and the grid has a gap of 8px. Further, the horizontal padding on either side of the container is 12px. Then assume that you want to place an image in one of the grid cells. Then you might do something like: sizes="(max-width: 600px) 100vw, calc(50vw-8px-2*12px)". This says up to a maximum width of 600px, assume the image has a width of 100vw. If you can't find a media query to satisfy the current screen size, default to the calc, which is essentially 50vw, less the padding-x of 2 * 12px and the gap between the left and right columns of the rgid: 8px. Hopefully you find this excerpt useful. It's a lot of writing but I think it's worth it, considering just how much time and effort you put into this amazing video. Thanks, and best wishes mate! - Oz.

[@zachgoll]

Well said! Great explanation, and glad you found the video useful :)

[@aleksandercross5936]

Thank you very much, this part 1:02:50 "How to make your images responsive with `fill` property (no width/height required)" is exactly what I was looking for.

[@weekendcode]

Benefits of this video 1. suggests examples after viewing the official documentation 2. teaches you things that are not in the official documentation 3. configures multiple components to show contextual implementation 4. goes inside the class to see how the internal properties are organized

[@ShubhamSinha90]

One of the best in-depth tutorials ever.

[@zachgoll]

Thank you! It’s the tutorial I wish I could have found for myself.

[@dopetag]

The way you explain everything is outstanding! This was so comprehensive that all the questions dropped during watching.

[@phuphan8672]

NGl, I rarely comment on KZbin, but your video is so amazing! The way you prepared demos and explained everything is done very well. I learned a lot from it and watched until the end without skipping a second. Thank you so much for this outstanding video.

[@EmpySoul]

Man! This is a awesome guide!!! I totally recommend watch this video if u wanna know how to use Image component. I did not know about the pricing for more than 1k photos. U saved my as* Thanks!!!!

[@exterminate1482]

Thanks for an amazing tutorial! Just want to add some explanation of `w` size. There is a prop in `window` object which is called `devicePixelRatio`. The value of this prop depends on scale of 'resolution'. For example in windows this setting is called 'Scale and layout' and you can set some percentage value like 150% and it will be equal devicePixelRatio = 1.5. So 800w is equal 800px / devicePixelRatio, in your device 800w is equal 400px.

[@zachgoll]

Awesome, thanks for this!! Makes a lot more sense than what I was fumbling through in the video :)

[@ramiro041]

I'm glad you undertook the efford of making this video, it made things very easy for me

[@SuperValza]

Great video. Watched twice. Improved my pictures sizes from 1mb+ till around 50kb-100kb and still did not fully understood sizes section, so I guess I have place for improvement more. Thanks a lot. Keep up good work.

[@sylvainschellenberger]

Thank you for taking time to put up this in-depth tutorial. This was very well needed to cover this topic that can be easily overlooked. Nice job!

[@patite3103]

Could you please update the video to the new version Nextjs 13.4? thank you

[@simenhagen86]

Thanks for this, came here from your photography guide. really like the way you teach. done the front end course that you had on FCC and loved it also. still not able to make something on my own, but hopefully get there.

[@gabrielgomesmabiala6707]

Your channel is so underated thank you so much for this tutorial Just keep on

[@krzysztofs3t532]

1:13:40 - I think Next download 800+ pixels image version not because of pixel density of your screen, but because you have your image styled as objecy-fit: cover. So - your screen is 400px wide, but you see only a center part of the image, because it is in a cover mode, the original image have about 800-900px width. There is no technology yet to cut part of the image in a flight and load only this part that you actualy see. Great video BTW.

[@jarnoojasaar]

finally got my sizes property working, thanks alot. had to statically import my local images instead of just having "src='images/sample.jpg'"

[@arisudana3672]

My good sir you quite literally saved my life with this video. Thank you so much

[@andrewpaulhart]

Thanks so much for posting this video. I was going around in circles trying to get my images to behave properly.

[@zachgoll]

Same haha, created this tutorial after I walked in circles for too long

[@zachgoll]

Also just noticed you made a contribution to the channel! (Not sure how I missed this) Thank you 🙏

[@andrewpaulhart]

@@zachgoll you are welcome. I always try and show just a tiny bit of appreciation when someone takes the time and effort to provide something of value

[@cherkim]

Just what I needed. TY!

[@issussov]

Pretty cool video! Kudos to you Zach!

[@joshstearns4277]

Thank you for your hard work on this video

[@ramkumargurav9829]

thanks man I just learned how to make my image card with this,

[@utvecklarakademin]

Super great stuff, I think this video should be highligted by the nextjs team! Please timestamp it though, I think that helps a lot when the length is so long. Cheers

[@zachgoll]

It should be timestamped already, is it not showing up? Edit: you’re right! They aren’t showing up, I’ll fix that. They are in the description right now. Thanks for the heads up!!

[@utvecklarakademin]

@@zachgoll Glad to help :-) Keep it up!

[@jawyor-k3t]

amazing job. you speak very well and explain clearly. thanks for sharing. I would have never known about the pricing

[@zachgoll]

The pricing is not very transparent, wanted to shed some light on it!

[@flnnx]

Top notch content. Thank you!

[@MrAlam-i9w]

Exactly what I am looking for........thanks a lot for sharing this

[@GonzaloBetancourt]

Gold content, Zach 👏👏👏

[@ChungNguyễn-g6c]

Thanks for sharing. I am confusing about what different between put all images in source code and in public folder

[@kayuxcodes]

its seems that next.js fetch the image based on the viewport width, in your example 1:16:35 sizes are set to 100vw so it will take the full width, so why the image is fetch the 750w is that the next.js will take the deviceSizes and find the first width that is closer to the DPR, so 750 / 292 == 2.5

[@0r1x]

How are you loading without using a width property. In every project I use, the console fails and requests a width and height property.

[@8koi245]

Ahhhh I'm exactly in that point, found it out to be pretty cool but I really want to understand what it does and why

[@joemart6887]

What if you add the 'unoptimized' property without a loader to the Image component? How will this behave within NextJS? Will NextJS use their loader? Will we be using their services if we have a the 'unoptimized' property enabled without a loader?

[@JaykrishnaNandagiri]

So What I'm facing an issue is I'm loading banner images by using json so basiclly there is dyamic pages So the issue is, It showes white screen with text on banner then after 1 or 2 sec image loads with proper banner with text , But the Image size is 500kb. Please give me the solution what should I do.

[@kevinhe8188]

Hope you can make more and more like this. very enjoying watching. Super video u made. which really clear explain.❤

[@farhadvakilijamil2987]

Hello. How are you. Bro I have an issue. I can't display product images by maping in component inside Image Tag. does this course help me to solve my problem?

[@madashindeinai4783]

This is a fantastic guide. I really regret that I found it so late. It could have saved me a lot of time. The video gives an understanding of how to test behavior, and the opportunity to independently find answers to the remaining questions (fill + sizes). The only not really covered question: we can add a local image via import (like in a video), but we can also simply provide a link to the image in the public folder (

[@zachgoll]

When you import the image, Next.js will infer the dimensions and build the "blur" image to use automatically for you. If you simply provide a relative path, none of this will happen since it will be treated as a "remote" image (with your domain as the base of the URL) In other words, importing is the better option here in most cases.

[@sergey_gabrielyan1001]

Hello👋. I have a project with plain React and Supabase (also I’m using supabase storage), I’m trying to find the best option to make image optimization, but as I understand it’s difficult to do that with plain React. I want to use srcSet option which has a Next.js with automatic way. I know that there are services like imageKit, imgix, cloudinary…, but it will be better to do that without external services. If it’s not difficult can you give me advice, how can I make image optimization, which way is common in plain React?

[@carlopelosi5251]

Seems that even after using, sizes prop and fill, can never get the image perfect for Google Site Speed to not complain?

[@saadbaig3060]

Very well explained! Thanks.

[@nathanbrachotte]

Pure gold.

[@TheHoinoel]

this is excellent. thank you

[@DiXXOver]

Thank you very much, you saved me a lot of time

[@Light-nn6hn]

how do i add a blurry placeholder when using the fill propety, it just doesn't seem to work, also, is there a way i can keep the aspect ratio of the image when setting the fill property, object-contain works, but it won't fill the whole container of the image.

[@27sosite73]

again thank you so so so so so much!

[@namelastname4604]

Nice presentation. Easy to follow. I wander why official documents do not explain it as well as in this video? At least give links to fill knowledge gap.

[@mounsifcherfaoui121]

What a great video 👏

[@harrysaladfingers1515]

I'm using wasabi to serve my remote images and turnsout blurdataUrl and the imgsrc loads at the same time so it's making no visible difference. There's a white space for quite some long. Pls help

[@suyashsrivastava3671]

24:30 that's what nobody is talking about, we need to deploy on vercel to automatically get our image optimized and that's freemium service .

[@phantazzor]

was waiting for the lazy load

[@SaurabhSrivastava-i1q]

Doesn't works with other hosting providers other than Vercel also?

[@zachgoll]

Yes it does! It's a generic React component, but if you host on Vercel, it automatically opts in to the image optimization API (unless you use remote images)

[@SaurabhSrivastava-i1q]

@@zachgollI see. So, how does it optimise in other hosting providers, I wonder?

[@zachgoll]

@@SaurabhSrivastava-i1q By default, it will not. If you are using a remote source, you’ll need a loader to set dimensions and do image transformations. Check out the loader chapter of this video to dig deeper on that concept

[@OddRob92]

Is a repository similar to a suppository.

[@soroushebi]

thanks a lot for the video. great job !

[@power-tools]

Are you talking about Nextjs 13?

[@jrmartinss]

One interesting thing I would like to see is to create a dynamic src. For example, for web would be an image and for mobile devices would be another, I already tried using useEffect, but it loses the performance of the Image component

[@zachgoll]

I think in that scenario, the best approach would be to create 2 separate image elements and use CSS media queries to hide or show each of them depending on the screen size. Something like this (using TailwindCSS): ``` ```

[@en_kratia]

Thank you very much

[@jirifiala2811]

Thanks for the tutorial. Could you provide a link to this project git repo?

[@zachgoll]

My bad! Had meant to add that to the description. Here's the link (also added to description): github.com/zachgoll/nextjs-image-tutorial

[@utvecklarakademin]

Tbh skeleton loaders are much better UX than blur images in my opinion, what do you think?

[@zachgoll]

I definitely prefer the blur placeholder, but in this case they would actually be similar solutions from a performance perspective. The only difference is that you’d have a gray placeholder data url for the skeleton placeholder which does have the advantage of not having to preload everything (assuming you have a way to dynamically size the skeleton loader placeholder)

[@BilalShahid-z7y]

you dont need to import image from "public" dir. just use it in src like src="/whatever.jpg"

[@zachgoll]

This works, but you won’t get the benefits of the optimization API. When you statically import as I show, Next.js will infer the dimensions of the image which helps with CLS (cumulative layout shift)

[@dvkerns]

1:23:40 It grabbed the 96 because you're viewing on a 2x device, so...closest to 50px * 2 ?

[@zachgoll]

Must be! Tbh, still a bit confused myself about how the user agent chooses (not Next.js Image). I think the 2x rule is probably correct though, yes. Did quite a bit of research, couldn’t find much other than “user agents choose differently based on all sorts of factors like device size, pixel density, etc.”

[@denisvradiy8503]

Not sure you're correct because 50 * 2 = 100. [16, 32, 48, 64, 96, 128, 256, 384] - imageSizes array. So if 50 * 2 = 100 then it should load 128, but not 96, because 96 value has already been passed.

[@zachgoll]

@@denisvradiy8503 I think David’s explanation makes sense. You’d always want to load an image that is slightly larger than the viewport, so in this scenario, 100 is the closest number to 96 that is still larger

[@Miodragrrr]

Tell me if i got this right. So you have a non-commercial pet project so you just want to use free plan for image optimization, with nextjs image component Vercel is default image optimizer up to a 1000 original images for free? After that it's costly. So instead you put unoptimized prop to an image component and now it isn't using anything for optimization unless you build your own custom loader. So you did that using unsplash api, which is using other author images on unsplash site. If i have my own images (and don't want them on unsplash site) which cdn/api you prefer/propose to achieve same ability and stay within free plan, of course not indefinitely, but lets say with a budget friendlier option?

[@zachgoll]

You almost got it. When you set the unoptimized prop, no matter what, no images will be optimized. If you’ve got your own images that you want to optimize-either deploy to Vercel and use the default loader OR write your own custom loader and use a platform like Imgix or Cloudinary.

[@carlopelosi5251]

Hey Zach! I just sent you an email about this Next JS Image component Thank you very much for this video it cleared up a TON of what I was running into. Though I still have one issue, but 9/10 of my issues have been solved with this. I'm extremely interested in finding the solution. Would love your insight here. Im seeing Largest Contentful Paint element 3,090 ms This is the largest contentful element painted within the viewport. Learn more about the Largest Contentful Paint elementLCP But the image is 400KB and I have tried. Fill and Sizes, Normal width/height. Some others as well. Curious on why I can't seem to fix this

[@BrantK147]

This is amazing but so complicated 😭

[@NetraPatwari]

Thankyou

[@bharatmankotia4319]

is next.js element a paid service ?

[@zachgoll]

The Image component is not, it's just a normal React component. That said, if you deploy your Next.js site to Vercel, *by default* you are opted into a "freemium" image optimization service. You get 1000 unique source images per month for free and then after that you need to upgrade to Vercel premium.

[@abhishekthammali5530]

can you teach react js

[@zachgoll]

Possibly a future video series! That’s a tough one for me because it will become a very long series, but will definitely keep in mind.

[@edhahaz]

Holy shit it's a Vercel SERVICE and not actual code running on the server ? cash grab

[@deepeshmhatre4291]

This video made me more confused

[@zachgoll]

What about it? Specific parts I could address for you?

[@deepeshmhatre4291]

@@zachgoll The part where you start saying Image component is a paid API. In the NextJS docs they refer no such thin, its confusing.

[@zachgoll]

The image component itself is 100% free. It’s just an open source React component. That said, it makes API calls to a “freemium” image optimization service owned by Vercel, which allows for 1,000 source images free, then you’ll be charged. This optimization is enabled by default, so my goal with this video is to point this fact out. I do not think the Vercel docs emphasize this fact enough, which is why I emphasized it so much in the video.

[@joemart6887]

I'm having a hard time understanding your custom loader @33:02 . On line 9, what is src? Isn't that the first letter of the string? So, if you have "www.google.com", isn't src[0] in this case just the 'h'? My brain may be fried, so I do apologize if I'm not getting it. What is 'src.slice(1)' returning? I'm very confused on what you did here.