Next.js Image Component and Image Optimization + srcset and sizes explanation
Вставка
- Опубліковано 31 лип 2024
- In this video we'll have a look at the new Image Component in Next.js.
During this video we will learn how to use "srcset" and "sizes" attributes with the "normal" html "img" tag. After that we will look into the 4 different layouts in the Next.js image component "intrinsic", "responsive", "fixed" and "fill".
I'll show the performance difference in a simple image gallery by using the "normal img" tag vs using the Next.js image component. As a "spoiler" I can tell you the difference in performance between the Image component and the "img" tag is big.... very big :)
We will cover a few more topics, like how to change the image quality, change the default srcsets provided by Next.js in the layout "fill" and "responsive", how to make an image load eagerly and how to use the properties objectFit and objectPosition when using layout "fill"!
I hope you enjoy this video :)
----
Deployed Demo App with all the examples I showed: youtube-2020-dec-nextjs-image...
----
----
My first ever PR to Next.js regarding the sizes property 😃😃: github.com/vercel/next.js/pul...
----
----
Documentation
Next.js Image: nextjs.org/docs/basic-feature...
Next.js Image Api Reference: nextjs.org/docs/api-reference...
----
----
GitHub Repository: github.com/bmvantunes/youtube...
GitHub Repository Commit History: github.com/bmvantunes/youtube...
----
----
Next.js (GitHub) AVIF reference: github.com/vercel/next.js/blo...
----
----
Timeline:
00:00 Introduction - Performance
00:53 Introduction - Cumulative Layout Shifts (CLS)
01:39 Introduction - The Next.js Image Component is based on web standards
02:48 srcset attribute in order to understand how the Next.js Image component works "behind the scenes"
05:08 devicePixelRatio and how our browser picks up our images in srcsets
07:44 sizes attribute - this is something very important, that we should set on every single image that is not using 100% of the viewport
13:27 Load more images on the page
14:12 Migrating from the "img" tag to the Next.js Image Component
14:53 Explaining the default layout (intrinsic) and showing the differences to layout responsive
16:40 How to override the default deviceSizes in next.config.js
16:54 Performance between Next.js Image Component vs "normal" img tag with only src attribute
17:34 Showing that Next.js image component only loads the visible images (lazy load)
18:22 Layout Fixed
18:50 Layout Fill with objectFit and objectPosition
23:05 Loading property: Making one image load eagerly even if outside the viewport (not visible)
24:33 My Next.js server crashed =D
25:25 Going back to loading property
25:45 Quality property in order to save even more KB
27:03 One last note on sizes
27:10 My first PR to Next.js 😃😃
27:38 Conclusion
----
Follow me on:
Twitter: / bmvantunes
Dev.to: dev.to/bmvantunes
Website: brunoantunes.net
GitHub: github.com/bmvantunes
LinkedIn: / bmvantunes - Наука та технологія
I never saw such a detailed video like this... this one should be put in the next.js docs 👍👍
Thank you soooo much 😍😍😍😍🙏🙏🙏
Trust me, your words put a big smile on my face 😍 thank you so much!! 😊😀
Holy cow mate, the world needs more people like you!
The best explanation ever about Image Component of Next.js. Thank you a lot.
Next.js 11 new Image features in under 45 seconds: ua-cam.com/video/DPSUekYgZIU/v-deo.html
I hope you enjoy the video 😀😀 As I promised in the video:
Deployed examples: youtube-2020-dec-nextjs-image-component.vercel.app/
GitHub repository: github.com/bmvantunes/youtube-2020-dec-nextjs-image-component
More links available in the video description :)
As always mate, bloody fantastic video. Informative, well paced and easy to follow along. Its a breath of fresh air to finally have someone not only teach something, but is able to know what secondary/tertiary aspects of the subject need to be covered as well to provide an all round understanding of the topic at hand. Love ya work.
Thank you so much Trent 😀😍😍
A very very nice comment to start the year - you are amazing Trent 😀
Preparing a video is sometimes a very lengthy process - thinking about all the possible use cases and possible questions you all may have 😊 comments like yours helps me (a lot) keeping the focus on what I'm doing 😍 thank you, thank you very much my friend!!
I really like Bruno explaining. Very detailed and sounds like a very sensitive man. Many thanks for all the effort!
Seriously, what a clear way of explaining, I love the simplicity with which you express yourself and teach your ideas!
Thank you very much for your words 🥰🥰
I just wanna thank you for this incredible video! It helps a lot dealing with next image. I was so confused just trying put a background image using image in nextjs with another layout lib and with these tips I finally did what I was looking for. Thanks so much man!
The most perfect explanatory video on the subject!! Thanks for the class!
Okkkk this is one of the most useful and detailed videos I’ve seen ever! Thanks a lot. Also you are so good and calm explaining that is so joyful lol
I love your videos for the content and the excitement and enthusiasm you show in them. A teacher who is genuinely interested in teaching the topic really helps.
Keep up the great work!
Thank you very much Terry 😍
With this content quality, I had to subscribe right away! Thanks a lot and bravo!
Thanks a lot Bruno for this video ! Thanks to you I now understand better how images work with Next JS. This helped me better than the big amount of tutorials I read on the internet.
Great to hear! Thank you very much =)
I was struggling with the image sizes on chrome emulated views, but after this video it was clear that devicePixelRatio plays a major part in deciding which images to load. Thankyou Bruno. This was the most detailed explanation I have ever seen. 👌
Thank you 😍
bro, you did a really good job. Crystal clear without any BS. Subscribed. Looking forward to your next video. Keep it up!
Thank you very much James 😍
28min ran out like a moment and here I am at the end of the video...
Very impressive very simple and easy to understand.
Good work Bruno! :)
Great to hear!
I never saw such a detailed video like this. I like your videos❤❤
Thank you very much ❤️
Again thank you for your positive energy! so much detail in this vid this is great!
Thanks sooo much my friend 😍😍
This video is more than great. Thank you so much Bruno ❤
Thank you so much for this! Great video! Answered ALL my questions.
I know I'm a bit too late but I just wanted to say that this was the most relaxing and interesting video about programming I've ever seen.
Thank you very much Alex 😍 never late to read messages like this one ❤️
well done and many thanks for the detailed videos over nextjs tech. extremeley helpfull! 👏👏👏Looking forward for more of these - NextJS API, edge-functions... great tech. I'm particulary interested in serving multiple domains from a single NextJS repo. Though my skills ain't enough I'm afraid. So I expect help from savvy guys like you, thank you again!
I learned more than I bargained for. Thanks! 👍
Thank you 😍
first time i watch any of ur videos and u are amzing!
Thank you very much 🥳😍
Wow. I was always confused by the srcset attribute. Really good video
Glad you liked it
i loved your energy 💐 i think this is a great video on next/image
Thank you very much for your words 😊😊 I'm happy you enjoyed the video 😀😀
Great video, Bruno! Thanks
A very detailed video. Thank you.
great explanation, thank you !
Another thing to help with layout shifts is implementing things called skeletons (not the spooky kind) material-ui has a basic form of skeleton, which is convenient for react but also helps to prevent cls from fetching api data which will take longer than an img, loved the video, will definitely be using this to improve UX
I love skeletons as well - just to be clear, I mean the UI ones ahahah 😀😀😀
The platform we are now using (UA-cam) uses skeletons as well for the same reason (at least I'm assuming that... I don't work at UA-cam, so I can only make assumptions...) 😀😀
I'm very very happy you enjoyed the video Ben =D If you have any question/suggestion, please do let me know 😀
I'm an experienced Next.js user, I've watched a lot of videos on the image component, and this is the only one that truly explains it in detail.
The documentation for the image component are not great either.
Great work! Thanks! 👍
😍😍😍😍 This comment means a lot to me ❤️ thank you soo much for your incredible words 😀
this is pure motivation to keep creating videos 😊😊😊
@@BrunoAntunesPT very very welcome! You earned a sub, v good content! Thanks! 👍
Thank you, thank you my friend 😀😀😀
Thank u it was great video and experience to have watching you .Wish you best!
I really appreciate your words. Thank you very much 😍
I was waiting for this video for so long
😀😀😀 It took me quite a while to get this one done 😅😅
Woahh same ... Thanks a lot Bruno
I'm very sorry for the delay my friends 😔😔
this video took me quite a while, but it also included some conversations with the nextjs team (regarding sizes property) and my first ever pull request to nextjs that saves us all (and our clients) quite a few Kb downloading images every time 😀😀😅😅
@@BrunoAntunesPT Can We Use sizes attribute in Next.js image component
You can (and should) use it for every single image that is not 100% of your viewport 😀
That way your browser is able to download the "perfect" image size 😀
PS - The syntax is exactly the same I showed with the "normal" img tag. In reality nextjs is just passing that property (sizes) to the "img" without changing it. If you don't provide sizes property, nextjs is using by default 100vw.
Awesome and elaborate explanation!😮😮😮
Nextjs launched today a preview of their "future" image component 🙂 in probably 6 months when that becomes the official version, this video will be out of date 😅
Thank you very much Bruno. very well explained
Muitas das minhas dúvidas com Next.js foram resolvidas com os vídeos desse canal. Nem sei o motivo de eu ainda perder tempo procurando exemplos com Google.
Muito obrigado pelo vídeo, Bruno. Muitíssimo detalhado (e engraçado também hehe).
Muito muito obrigado meu amigo. Fico muito feliz de voce ter gostado dos videos do canal =)
Um grande abraco para voce. Se tiver sugestao para novos videos, por favor me diga :)
@@BrunoAntunesPT Para o Next.js: GraphQL, Headless CMS (Ex: Strapi, Prismic, Cosmic) e NextAuth
very nice and detailed. hard to find such videos. thank you v much!!
Thank you very much 😍
superb, very well details explained. nice
Hi Bruno, very good explanations about the component and its use cases.
Thank you one more time.
Thank you very much Sergio 😀😀
your teaching style really amazing 🥰
Thank you 😍
Thank you! This was useful!
Awesome 🎉
Great video as usual!!!
Glad you enjoyed it Sergio! Thank you =D
Excellent. Speaking from Bangladesh as a frontend developer.
Thank you 😍
Awesome video, thank you!!!
Thank you Valerian 😀😀
Great Explanation
Thank you 😀🙏
Awesome video... good technical info.
Very detailed video 🔥🔥🔥 thanks awesome 😎
Thank you very much 🙂🙂
Thank you, Bruno 🙏
Thank you Ismail 😀😀
Thanks for the video.
This video is too good!
THank you :D
Thanks for the video Bruno
Thank you 🤗
Thanks for the video! very clear and easy to understand. New sub here :)
Thank you 😍😍
Thanks for this great video
Thank you for watching it 😍
Very informative video again. Thank you so much!
Thank you very very much Mert =D
Any suggestion for future videos? =D
@@BrunoAntunesPT Actually I really wonder how files/images are uploaded, hosted and reused in real projects. A video about these would be very nice 🙂
I'm saving all my images in azure blob storage directly on user upload 😊 then I point my nextjs image component at those images to be optimized - you can also use other services - a lot of people use amazon s3 to store their static files. I also know about people using image specific services like imgix, cloudinary, etc 😊
The problem about making those type of videos, is that we have at least 5 or 6 different solutions and everybody is using a different one 😅😅😅 so making a video that makes sense to everyone is very very hard (I would not say impossible because I don't like the word, but.... 😅😅😅)
@@BrunoAntunesPT Yeah, I think I got the point 😅 Thank you very much!
Good as always.
Thank you Luciano 😀😀
Excelente explicação Bruno, parabéns e muito obrigado por compartilhar!
Muito obrigado Paulo 😍😍
It really help me on my job
Grande Bruno, explicação excelente. Parabéns!
Obrigado
Obrigado :)
thanks a lot!!!
You are creating the beat next.js videos on the whole UA-cam. If you don’t have any idea for next video you can create tutorial for next 12 middleware and next-auth package
No one can dislike this guy
I can hate myself from time to time, so I'm sure lots of people dislike me 🤣🤣🤣🤣
Thank you 🙏💪
Thank you Nasereddine 😍
you deserve a like
Thank you 😍
Thanks a lot!
Thank you Cris 😀
very polish English, thanks Bruno
Thanks you are good former.
Thank you 😍
very useful... anyway love your accent 😎
Ahah thank you very much my friend ❤️❤️
god job Bruno ! 💪
Thank you very much Edwin =D I'm very happy you enjoyed the content of the video =D
object position is awesome.
I agree with you 🙂
is it possible to override the srcset to put different images per screen size? Like foo.jpg when in sm and bar.jpg when in lg
Thanks
Thank you Jose! :)
Nice
Thank you 😊
Examples you are demonstrating have reasonable performance since all your images are 100vw. In real world responsive layouts images would have various view port width, depending on the breakpoint condition, and it would be hell of a job to provide for each image accurate size attribute. Best too look into alternative react image libraries that do size attribute calculation (at least for the lazy loaded images) or make a custom image component
You can look and use alternative libraries, they are also amazing ❤️
This video is only about the nextjs image component that comes built in with nextjs.
I have been using it in very complex layouts and I been very happy with it. The sizes property is something I can 100% understand your feelings 😊
hopefully in the future the nextjs team will be able to help us even more 😉😉
Show Bruno, acompanhando teus vídeos, tá falando baixinho pra não acordar o bebe? hehe, abração amigo, parabéns.
Muito obrigado Jonas 😀😀
Está muito baixo o som?
Thank you bruno 🙏 i hopp you make a tutorial about the best rich text editor to integrate with next js 😊
Thank you mate 😊 what issues do you usually face with the rich text editors that exist for react? Knowing that helps to focus people attention in those issues and help fixing them 😊
Excelent even for spanish-speaking developers!
Very happy to read that 🙂
@@BrunoAntunesPT can you expain me what is nextjs.org/docs/api-reference/next/image#image-sizes for? It is still important in the current version?
@@pdgago.ballester most often than not you don't need to change that - I don't remember changing that in the last 6/9 months 🙂
Nice video👍
Thank you very much 🙏🙏😍😍
@@BrunoAntunesPT Always been waiting for your next js video Bruno
Thank you Rohan 😍😍 I really miss having more time to record videos.
Recording videos is what I love the most lately 😍😍
sadly I have been very busy with other things in my life and I have not find the time to do my investigation and record, but I have to try to change that in 2021 😀😀
please do we have libraries to reduce the size of an image?
Please make a paid course on udemy or something. You are a talented teacher/speaker 😍😍
Amazing words my friend 😍😍 thank you very very much 😀😀
Bruno one question (didn't have time to do my own test)... does the Next/Image optimize images NOT present during build time (user uploads)?
Because Next static server (public folder) sees only files present during build.
Depends what you are doing... as long as you have a public URL for your images, this will work.
It even works with images from different domains. For example, you can use amazon S3 or azure blob storage and Next image component will optimize images served from there! As long as you have a public accessible URL for that image, the Next.js image component will be able to optimize that image/photo!
You can do something like:
```
```
Just keep in mind that if you are serving images from outside your own domain (like azure blob storage or amazon S3 buckets), you'll have to add those domains into your next.config.js - something like:
```
module.exports = {
images: {
domains: ['my-azure-blob-storage-id.azure-for-example.com'],
},
}
```
I hope this answers your question =)
If not...let me know =D
Hi Bruno, Excellent video!! Explaining the srcSet and sizes first was very helpful in understanding the Image component.
I'm currently trying to utilize the Image component for a gallery. I understand the benefits, however, I'm seeing loading times of seconds, where using a regular img would be much faster even though it's a bigger file. Is this only in development mode or is this standard behavior since NextJS needs to optimize the image on the server first. If so, how does this benefit the user experience?
Kind regards & keep making these awesome videos
Thank you =)
The first time an image loads, it will be slower, than serving an already optimized image as you may imagine :)
BUT on that first request Next.js is saving that processed/optimized image, so subsequent requests to that image and that format will be very fast (as if you did it at build time).
This is something the nextjs team did as a balance to have optimized images (for user benefits), and at the same time not make the build time take 3 hours in websites with 1000s of images.
As everything in life, there's pros and cons with each solution :)
As I said, they made the trade-off for websites with thousands of images...... In the past I saw websites taking hours to build because of image optimization (no joke) =D
@@BrunoAntunesPT i can live with that 😉 thx for taking the time to respond!
You are a star Bruno, loved to the way you explain with simple examples, i heard about new Image option on next.js but today fully understood how life savior this could be for the developer who has to manage app with bunch of images...
i wish you would have explain what if the images are not local and from the third party for example AWS or DigitalOcean Spaces or cloudinary storage and next.js has to fetch them ??? will it still apply and how that performance will be boosted ???
Thank you very very much my friend =D I'm very happy you found the video helpful =)
It's actually very easy to make it work with external images, as long as you have a public accessible URL for that image - the Next.js image component will be able to optimize that image! That means, you can optimize images from AWS S3 or azure blob storage and many other places =D
You can do something like:
```
```
Just keep in mind that if you are serving images from outside your own domain (like azure blob storage or amazon S3 buckets), you'll have to add that domain into your next.config.js - something like:
```
module.exports = {
images: {
domains: ['my-azure-blob-storage-id-or-aws-s3.azure-for-example.com'],
},
}
```
That's all you need to do if you want to serve images from an "external source" =)
The first time, Next.js will download the image from that external domain, but the second time you ask for that image with that same size/resolution and quality it will be served from cache =)
If you are using cloudinary as you purposed, it's even better, the images don't even need to pass via the Next.js server to be optimized they will be served directly from cloudinary, via this loader:
```
module.exports = {
images: {
loader: 'cloudinary',
path: 'example.com/myaccount/',
},
}
```
You also have a similar loader for "imgix" and "akamai". For those 3, images are not even processed by your Next.js server :)
I hope this answers your question, and sorry for this very long answer but it was hard to give all this info with less words =D
Hi Bruno, nice video.
I have a question. I have tested the component and it works fine locally, but when I upload it to a server (not Vercel) I noticed something strange. While the weight of the images is optimised quite well, the response time takes longer than a normal image.
- Image with next/image component: Size: 42.8kB. Time 96ms. Waiting (TTFB) 79.8ms
- Image with loaded directly from original src. Size: 69kB. Time 25 ms. Waiting (TTFB) 19ms
With larger image the impact is bigger. Any idea? Thanks you!
Thank you 😊
The nextjs image component runs at runtime, not build time.
That means, The first time we request an image it will be a bit slower than serving an image fron disk. But the next time we request that same image, should be pretty fast, like serving from disk 😊
If you are on a platform where the file system is not persistent, then yes, it will be always slow, because you'll never have the image cached
How can i install and use bootstrap in nextjs?
thx
Thank you my friend 😍
Really well explained video! i have a simple question tho, is it possible to show a loading indicator when the image is being loaded? (while lazy loading i mean). if it is, how can we do that? thank you :)
Thank you very much Bryan 😀😀😀
The answer is "no", but I read somewhere on twitter that they were planning something like that - I might be wrong because I tried to search for that tweet... And I can't find it 😅😅😅😅
PS - probably this shows more about my bad twitter skills than anything else 😂😂🤣🤣
I guess you live in Porto, the kitchen looks so similar with the one I had when I was living in Portugal !
I hope you loved to live in Portugal 😍😍😍 Porto is a lovely place!!!
But actually this was recorded on my parents house during Christmas 😀 they live near Lisbon 😜😜
Does that mean that if I know an image will takeup roughly a third of the screen width I can do
Exactly 😊 doing that in combination with the srcset attribute that nextjs already sets automatically, will allow the browser to download the best possible image for those 33% of the screen, instead of doing the calculations for 100% of the screen (by default sizes="100vw", so I recommend any image that is not 100% of the viewport that you set sizes yourself in order to have better results ) 😊
Good health to you and thank you very much for such informative content!) There is one question. There is a self-written project using self-written JavaScript, jquery and third-party JS libraries. I set out to transfer the project to Next JS. I downloaded the scripts, connect - I found a lot of options, but none of the options helped to revive the scripts. The question is how to transfer old custom JS to a Next JS project? Thanks in advance for your reply!)
Thank you 😀
What do you mean by revive? Do you mean rewrite all those scripts in React without jquery or reuse them as they are without any changes? 😅
Depending on what you want to do, those 2 have very different solutions/answers 😊
Thanks for the video, Bruno! I'm just starting to look at this, so, it was a very timely release for me! It seems kind of weird that Image Optimization only works with images that are available at build time, but, it doesn't work on images you upload to a running server given how easy they've made it to work with Next natively.... So, I have a photography site with an admin page that allows users to manipulate and upload photos to the site. I guess I have to use something like imgix or Cloudinary? If so, are there still advantages to using the Image component? Does it offer anything above and beyond what I can get directly from imgix?
Thank you 😊
the image component works at runtime, not at build time 😊
As long as you have your images publicly available via an url nextjs will work with them even from external services.
So let's say, if your users upload photos, you normally save them into amazon s3, azure blob storage, Google cloud or the services you mentioned.
In those cases because you have an url to the image, that image can be optimised at runtime, no need to be there at build time 😊 I'm doing that with azure blob storage for a very similar use case 😅😅
PS - Nextjs team has specific loaders for imgix, akamai and cloudinary
PS2 - if you want to save those uploaded photos into the public folder of nextjs it will not work, but I would never recommend that to be honest 😊
PS3 - I have never used those services you mentioned, so I can't compare their performance... But if they don't set srcset in images, I'll be tempted to say you'll get better performance using nextjs image component, but take this with a grain of salt 😊😅
@@BrunoAntunesPT Yes, you're absolutely right -- the Image component works at runtime, but NOT on images in the server's public folder that were not there at build time. There's a recent thread in Next's discussion thread on Github about uploading images to a Vercel-hosted site. People were surprised it wasn't working, but it states pretty clearly in the docs that it won't work. It does seem like a cleaner solution with fewer potential points of failure (imgix also requires images to be hosted on another service, such as S3, so, that's two more things that could go wrong). Out of curiosity, why is using images in Next's public folder something you'd never recommend?
I could use multiple theoretical reasons, but I will try to give 2 very simple and practical examples 😀
First: You deploy your app and need to have 2 servers (because of the load).... how do you synchronize the two public folders? You can use docker or similar technology it is true, but It's a harder problem to solve then if you are using amazon s3 or azure blob storage from day one to serve your images 😊 those two services (azure and aws) also have geographical replication of your images, so your images are always safe from any problem that might happen. They are also very fast and add zero load to your servers, so your servers can focus on serving what matters without using bandwidth for images 😊
Second example, even if you only have one server. Usually when I deploy I destroy everything that is on my server and deploy the new version as a completely clean slate. If you are keeping files on the public folder between deployments how do you do this? If you have the same file on git and on the server public folder... Which one wins? This becomes very complicated very fast... 😅😅😅
Real world example: nowadays with serverless (like vercel) we have a mix of example one and two... Multiple servers, and each request can be served actually by new servers and deployments. So keeping your files in your public folder is not practical (doable but much harder than having them outside) 😊
I hope I didn't went too technical and was able to show with simple examples 😀
PS - vercel is serverless and nextjs is made with vercel in mind 😊
PS2 - my recommendation of separating your images from the rest, is something I follow since I did c# back in the day, is not something I recommend for nextjs, nodejs or vercel specifically 😊
Hi and thanks for the video: in your opinion how this approach could be seo friendly? If you look at the page source code all the images source attribute is set to base64 placeholder 🤔
There isn't a noscript tag too and the curious thing is that this plugin was made together the chrome dev team as you said so... I think that the images will be indexable but... How? 😅
Thank you Marco 😀😀
Regarding SEO, I need to say before anything else that I'm NOT a SEO specialist, so take the rest of this comment with a grain of salt 😅😅😅😅😅
I understand and agree with your point specifically about the noscript - I did something very similar to this a few years ago, but I was using noscript for that exact reason...
Today when I have a specific image that is important for my users, I use the preload and priority as I showed in the video. If you use preload and priority as eager, you'll see that by default, src and srcset are defined 😊 those images I'm 100% sure will be OK for SEO - happy to be corrected if not 😅😅
Regarding the images with loading to lazy, we need to scroll into them in order to have src and srcset, so yeah... Honestly I don't know how Google (and others) works on that regard 😀 it's something I can investigate, because honestly I don't know the answer 😀 now I'm very very curious. I think my first day after holidays I have something to check out 😅😅😅😅
if you have more info even if it looks simple, I would love to hear in order to learn a bit more about SEO ❤️❤️😀
Look!! Who came back,
Where are u bruno,
I miss you bro ❤
I'm very happy to have found the time to record this video 😍😍❤️❤️
I loved making this video - hopefully I can find more time in 2021 for recording videos, I really miss recording a lot😀❤️❤️
Hi bro, after this video I'm subscribed)
But I have one question. You demonstrated what if image has been inside a column of bootstrap row.
But, what if I have a bootstrap container which has static max-widths on breakpoints, so for example on window width with 950px we have container with max-width: 768px.
It's possible somehow to handle this case, to not load a bigger image just because viewport is 950px, but actually somehow support calculations relative to container?)
Fantastic video, Bruno!
I am having a problem that I hope you may have encountered/solved. I have been using the image component with a set witdth and height for my images, and they work perfectly, 100/100 PageSpeed score. But recently I have added hero images to my website, which requires me (I think) to use layout="fill" and not set the width and height.
The image component servces a srcSet with different sizes, but the file loaded for the hero image is always 1,2mb, compared to the 80-150kb of the regular width/height-set images. This has tanked the performance of the site (scores of 60-75 in PageSpeed) just from this one hero image.
Have you encountered this problem, and if so, how did you resolve it? Again, fantastic video.
Best regards
Thank you 😀
Yeah... Sadly the layout fill will sometimes create very big images in size 😔
Ótimo conteúdo Bruno!
Estou usando o NextJS para aprender e estou com dificuldade para implementar um carrossel usando o componente Image. Você sabe se é possível?
E uma curiosidade sobre você, português ou brasileiro?
Muito obrigado Allan,
Neste momento nao tenho nada que te consiga enviar com um carrossel, mas e' possivel sim 😊
Eu dou a resposta sobre a minha nacionalidade no meu ultimo video 🤣🤣 ua-cam.com/video/ZG7sLbI8kL8/v-deo.html
Mas caso nao queiras ver um video sobre Next.js API Routes, eu sou Portugues de Lisboa 😍 Neste momento estou a viver em Londres, no Reino Unido 😊
PS - Desculpa a falta de pontuacao, estou num teclado ingles 😃
how can we show different images on different screen sizes in nextjs image tag? is srcset attribute there in tag
Next.js (at least for now) doesn't allow different images per srcset
You can still use some techniques to crop and adjust the image like I did with Miguel Oliveira's image, but having a complete different image that's not possible :(
Can we use Image tag of next js in picture tag of html
I don't think so...
Thanks for the video Bruno. Is there support for converting to WebP images?
Thank you 😀😀
The nextjs component does it automatically depending on the browser you are using 😀 there's also references in the source code to "avif" (a new format even more "optimized" than webp). I'm expecting in the future that nextjs will also support/serve images in avif format 😀😀
Next.js source code AVIF reference: github.com/vercel/next.js/blob/5562daf7a160e62fd4f78eca257ba957ad64074c/packages/next/next-server/server/image-optimizer.ts#L17
@@BrunoAntunesPT That's awesome. It is good to know because I'm planning to migrate my site from Gatsby to Next. Thanks for your response!
Honestly I'm also planning to move my blog from gatsby to nextjs 😊
That's probably the reason I have only done one blog post in all my life in that blog (yes I'm trying to lie to myself 😅😅😅)
Nice video! but the part where you are doing object-fit and objectPosition does not work for me... even if i put objectPosition="200px 350px" the image doesn't move an inch :o the "layout=fill" works! any idea why?
Thank you Daniel 😀
Both object fit and object position only work with layout fit 😊
You can't use those in any other layout 😔
In the next.js documentation they describe it at: nextjs.org/docs/api-reference/next/image
In order to save you time searching the docs, what is written in the docs is:
```
objectFit
The image fit when using layout="fill".
objectPosition
The image position when using layout="fill".
```
I hope you find it helpful Daniel 😊😊
@@BrunoAntunesPT I'm sorry! for some reason it didn't update in the browser properly :s It works like in your video! :D
may I also take this opportunity to ask you if it is possible to somehow use this next/image like this to show different images
you know so if the screen is small like on a phone, then I would love to have another picture that works good in portrait view if you understand what I mean :) do you know if this can be done somehow? or what would you have done to accomplish that? :)
Thank you for taking the time to help me :)
That's awesome news 😀
Sadly the nextjs image component doesn't work with picture. I remember seeing a twitter in the past from I think guillermo rauch explaining the idea behind it, but sadly I can't find it 😔
objectFit="contain" exactly what Im looking for
So this doesn't work with for example github hosting just because the links and images are not generated at compile time? Sounds like it could be easily done! Unfortunately Vercel is not willing to make it work like that!?
At the moment it only works at runtime, yes.
Vercel decided to keep builds fast to avoid the problems that exist with for example gatsby. I know some builds taking 10/20/30 minutes because of image optimization 😅😅
The only way to work statically is if you use for example, cloudinary - that way the image optimization is done in cloudinary servers at runtime 😊
But yeah... cloudinary after a while becomes a bit expensive for some use cases 😊
Maybe in the future vercel will give us a flag to decide between runtime and build time 😅 probably it will never happen, but I'm an optimistic person 😅😅😅