Next.js Image Component and Image Optimization + srcset and sizes explanation

Рет қаралды 41,752

Күн бұрын

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

Пікірлер: 332

@tririfandani1876 3 жыл бұрын

I never saw such a detailed video like this... this one should be put in the next.js docs 👍👍

@BrunoAntunesPT 3 жыл бұрын

Thank you soooo much 😍😍😍😍🙏🙏🙏 Trust me, your words put a big smile on my face 😍 thank you so much!! 😊😀

@bdk9830 2 жыл бұрын

The best explanation ever about Image Component of Next.js. Thank you a lot.

@joerivde Жыл бұрын

Holy cow mate, the world needs more people like you!

@danivicario 2 жыл бұрын

I really like Bruno explaining. Very detailed and sounds like a very sensitive man. Many thanks for all the effort!

@techjandro Жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

Next.js 11 new Image features in under 45 seconds: kzfaq.info/get/bejne/eraDiMicvs2-eYk.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 :)

@trentcox9239 3 жыл бұрын

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.

@BrunoAntunesPT 3 жыл бұрын

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

@developersjs1205 2 жыл бұрын

I never saw such a detailed video like this. I like your videos❤❤

@BrunoAntunesPT 2 жыл бұрын

Thank you very much ❤️

@nicolaspena4791 Жыл бұрын

Seriously, what a clear way of explaining, I love the simplicity with which you express yourself and teach your ideas!

@BrunoAntunesPT Жыл бұрын

Thank you very much for your words 🥰🥰

@hierotsu Жыл бұрын

With this content quality, I had to subscribe right away! Thanks a lot and bravo!

@vitorcastilho9372 Жыл бұрын

The most perfect explanatory video on the subject!! Thanks for the class!

@terrytas13 2 жыл бұрын

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!

@BrunoAntunesPT 2 жыл бұрын

Thank you very much Terry 😍

@felipemattioli4130 2 жыл бұрын

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!

@dickson710 2 жыл бұрын

bro, you did a really good job. Crystal clear without any BS. Subscribed. Looking forward to your next video. Keep it up!

@BrunoAntunesPT 2 жыл бұрын

Thank you very much James 😍

@morganedubus5742 2 жыл бұрын

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.

@BrunoAntunesPT 2 жыл бұрын

Great to hear! Thank you very much =)

@deevoid 2 жыл бұрын

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

@BrunoAntunesPT 2 жыл бұрын

Thank you 😍

@alexalexx3512 2 жыл бұрын

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.

@BrunoAntunesPT 2 жыл бұрын

Thank you very much Alex 😍 never late to read messages like this one ❤️

@user-zv2bz7kf2u Жыл бұрын

Thank you so much for this! Great video! Answered ALL my questions.

@cui.cui. 3 жыл бұрын

Again thank you for your positive energy! so much detail in this vid this is great!

@BrunoAntunesPT 3 жыл бұрын

Thanks sooo much my friend 😍😍

@ahmedumermughalradiantscho2870 2 жыл бұрын

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! :)

@BrunoAntunesPT 2 жыл бұрын

Great to hear!

@anginharutyunyan5130 Жыл бұрын

This video is more than great. Thank you so much Bruno ❤

@valentoMundrov Жыл бұрын

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!

@programmer4047 3 жыл бұрын

I was waiting for this video for so long

@BrunoAntunesPT 3 жыл бұрын

😀😀😀 It took me quite a while to get this one done 😅😅

@balajibobby8530 3 жыл бұрын

Woahh same ... Thanks a lot Bruno

@BrunoAntunesPT 3 жыл бұрын

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

@programmer4047 3 жыл бұрын

@@BrunoAntunesPT Can We Use sizes attribute in Next.js image component

@BrunoAntunesPT 3 жыл бұрын

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.

@azox_sudo 2 жыл бұрын

first time i watch any of ur videos and u are amzing!

@BrunoAntunesPT 2 жыл бұрын

Thank you very much 🥳😍

@mitchellduhe 3 жыл бұрын

I learned more than I bargained for. Thanks! 👍

@BrunoAntunesPT 3 жыл бұрын

Thank you 😍

@eelguneezmemmedov1671 2 жыл бұрын

Thank u it was great video and experience to have watching you .Wish you best!

@BrunoAntunesPT 2 жыл бұрын

I really appreciate your words. Thank you very much 😍

@ashatron656 3 жыл бұрын

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! 👍

@BrunoAntunesPT 3 жыл бұрын

😍😍😍😍 This comment means a lot to me ❤️ thank you soo much for your incredible words 😀 this is pure motivation to keep creating videos 😊😊😊

@ashatron656 3 жыл бұрын

@@BrunoAntunesPT very very welcome! You earned a sub, v good content! Thanks! 👍

@BrunoAntunesPT 3 жыл бұрын

Thank you, thank you my friend 😀😀😀

@iqbal5942 2 жыл бұрын

your teaching style really amazing 🥰

@BrunoAntunesPT 2 жыл бұрын

Thank you 😍

@sohailurrahman4187 2 жыл бұрын

A very detailed video. Thank you.

@ilknurultanr1448 3 жыл бұрын

i loved your energy 💐 i think this is a great video on next/image

@BrunoAntunesPT 3 жыл бұрын

Thank you very much for your words 😊😊 I'm happy you enjoyed the video 😀😀

@ninemuses2620 Жыл бұрын

Awesome and elaborate explanation!😮😮😮

@BrunoAntunesPT Жыл бұрын

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 😅

@fhkodama Жыл бұрын

Great video, Bruno! Thanks

@tech3425 Жыл бұрын

Wow. I was always confused by the srcset attribute. Really good video

@BrunoAntunesPT Жыл бұрын

Glad you liked it

@TheAsher817 2 жыл бұрын

Thank you very much Bruno. very well explained

@sidd24100 2 жыл бұрын

very nice and detailed. hard to find such videos. thank you v much!!

@BrunoAntunesPT 2 жыл бұрын

Thank you very much 😍

@azeynar 2 жыл бұрын

great explanation, thank you !

@thambimoirangthem4499 Жыл бұрын

superb, very well details explained. nice

@sergiob3698 3 жыл бұрын

Hi Bruno, very good explanations about the component and its use cases. Thank you one more time.

@BrunoAntunesPT 3 жыл бұрын

Thank you very much Sergio 😀😀

@parrot785 2 жыл бұрын

Thank you! This was useful!

@BrunoAntunesPT 2 жыл бұрын

Awesome 🎉

@prateekshawebdesign8377 3 ай бұрын

Awesome video... good technical info.

@amguruprasath8037 3 жыл бұрын

Great Explanation

@BrunoAntunesPT 3 жыл бұрын

Thank you 😀🙏

@khanfaysal993 2 жыл бұрын

Excellent. Speaking from Bangladesh as a frontend developer.

@BrunoAntunesPT 2 жыл бұрын

Thank you 😍

@azam920 2 жыл бұрын

Very detailed video 🔥🔥🔥 thanks awesome 😎

@BrunoAntunesPT 2 жыл бұрын

Thank you very much 🙂🙂

@sergioterrazas97 3 жыл бұрын

Great video as usual!!!

@BrunoAntunesPT 3 жыл бұрын

Glad you enjoyed it Sergio! Thank you =D

@mertcanatan1 3 жыл бұрын

Very informative video again. Thank you so much!

@BrunoAntunesPT 3 жыл бұрын

Thank you very very much Mert =D Any suggestion for future videos? =D

@mertcanatan1 3 жыл бұрын

@@BrunoAntunesPT Actually I really wonder how files/images are uploaded, hosted and reused in real projects. A video about these would be very nice 🙂

@BrunoAntunesPT 3 жыл бұрын

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

@mertcanatan1 3 жыл бұрын

@@BrunoAntunesPT Yeah, I think I got the point 😅 Thank you very much!

@juankyZS444 3 жыл бұрын

Thanks for the video! very clear and easy to understand. New sub here :)

@BrunoAntunesPT 3 жыл бұрын

Thank you 😍😍

@benevans1377 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

I love skeletons as well - just to be clear, I mean the UI ones ahahah 😀😀😀 The platform we are now using (KZfaq) uses skeletons as well for the same reason (at least I'm assuming that... I don't work at KZfaq, 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 😀

@valeriandigital7884 3 жыл бұрын

Awesome video, thank you!!!

@BrunoAntunesPT 3 жыл бұрын

Thank you Valerian 😀😀

@cauadasilvachagasdossantos1866 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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 :)

@cauadasilvachagasdossantos1866 3 жыл бұрын

@@BrunoAntunesPT Para o Next.js: GraphQL, Headless CMS (Ex: Strapi, Prismic, Cosmic) e NextAuth

@yachujoshi 2 жыл бұрын

This video is too good!

@BrunoAntunesPT 2 жыл бұрын

THank you :D

@nongbriteenapong7310 10 ай бұрын

It really help me on my job

@Commondore 2 жыл бұрын

Thanks for the video Bruno

@BrunoAntunesPT 2 жыл бұрын

Thank you 🤗

@catorials444 3 жыл бұрын

No one can dislike this guy

@BrunoAntunesPT 3 жыл бұрын

I can hate myself from time to time, so I'm sure lots of people dislike me 🤣🤣🤣🤣

@sahlabdelrhman9931 2 жыл бұрын

Thanks for this great video

@BrunoAntunesPT 2 жыл бұрын

Thank you for watching it 😍

@pcintra1 3 жыл бұрын

Excelente explicação Bruno, parabéns e muito obrigado por compartilhar!

@BrunoAntunesPT 3 жыл бұрын

Muito obrigado Paulo 😍😍

@ismailelayade9402 3 жыл бұрын

Thank you, Bruno 🙏

@BrunoAntunesPT 3 жыл бұрын

Thank you Ismail 😀😀

@TrolerGaming Жыл бұрын

Thanks for the video.

@edpalmeida Жыл бұрын

Grande Bruno, explicação excelente. Parabéns! Obrigado

@BrunoAntunesPT Жыл бұрын

Obrigado :)

@LucianoSoares85 3 жыл бұрын

Good as always.

@BrunoAntunesPT 3 жыл бұрын

Thank you Luciano 😀😀

@lottylone7557 2 жыл бұрын

you deserve a like

@BrunoAntunesPT 2 жыл бұрын

Thank you 😍

@raygan3 2 жыл бұрын

You are creating the beat next.js videos on the whole KZfaq. If you don’t have any idea for next video you can create tutorial for next 12 middleware and next-auth package

@viniciuscardoso5271 Жыл бұрын

very polish English, thanks Bruno

@aahnafiya 2 жыл бұрын

very useful... anyway love your accent 😎

@BrunoAntunesPT 2 жыл бұрын

Ahah thank you very much my friend ❤️❤️

@kurtvanhal5337 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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

@kurtvanhal5337 3 жыл бұрын

@@BrunoAntunesPT i can live with that 😉 thx for taking the time to respond!

@nasereddinebekkal5379 3 жыл бұрын

Thank you 🙏💪

@BrunoAntunesPT 3 жыл бұрын

Thank you Nasereddine 😍

@webdev723 2 жыл бұрын

Thanks you are good former.

@BrunoAntunesPT 2 жыл бұрын

Thank you 😍

@criszamarco2186 3 жыл бұрын

Thanks a lot!

@BrunoAntunesPT 3 жыл бұрын

Thank you Cris 😀

@aliceyenyen 2 жыл бұрын

thanks a lot!!!

@timurc1111 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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

@firojsiddiki2750 2 жыл бұрын

object position is awesome.

@BrunoAntunesPT 2 жыл бұрын

I agree with you 🙂

@bryansoebagijo4189 3 жыл бұрын

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 :)

@BrunoAntunesPT 3 жыл бұрын

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 😂😂🤣🤣

@ghassanclassic7689 2 жыл бұрын

Thank you bruno 🙏 i hopp you make a tutorial about the best rich text editor to integrate with next js 😊

@BrunoAntunesPT 2 жыл бұрын

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 😊

@Alex-gn3vm 3 жыл бұрын

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!)

@BrunoAntunesPT 3 жыл бұрын

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 😊

@edwinnarvaez2791 3 жыл бұрын

god job Bruno ! 💪

@BrunoAntunesPT 3 жыл бұрын

Thank you very much Edwin =D I'm very happy you enjoyed the content of the video =D

@7iomka Жыл бұрын

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

@elsupersaiyan02 Жыл бұрын

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

@oallanmendes 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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 🤣🤣 kzfaq.info/get/bejne/kK1npq-Trp7PfGw.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 😃

@malikgenius4u 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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

@jonasgedrat658 3 жыл бұрын

Show Bruno, acompanhando teus vídeos, tá falando baixinho pra não acordar o bebe? hehe, abração amigo, parabéns.

@BrunoAntunesPT 3 жыл бұрын

Muito obrigado Jonas 😀😀 Está muito baixo o som?

@ragnsanfinnvalla1717 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

Thank you 😀 Yeah... Sadly the layout fill will sometimes create very big images in size 😔

@shkrmkr 3 жыл бұрын

Please make a paid course on udemy or something. You are a talented teacher/speaker 😍😍

@BrunoAntunesPT 3 жыл бұрын

Amazing words my friend 😍😍 thank you very very much 😀😀

@pdgago.ballester 2 жыл бұрын

Excelent even for spanish-speaking developers!

@BrunoAntunesPT 2 жыл бұрын

Very happy to read that 🙂

@pdgago.ballester 2 жыл бұрын

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

@BrunoAntunesPT 2 жыл бұрын

@@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 🙂

@bradleygibbs8791 3 жыл бұрын

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?

@BrunoAntunesPT 3 жыл бұрын

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

@bradleygibbs8791 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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 😊

@BrunoAntunesPT 3 жыл бұрын

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 😊

@guillecirer3881 3 жыл бұрын

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!

@BrunoAntunesPT 3 жыл бұрын

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

@rohantongle155 3 жыл бұрын

Nice video👍

@BrunoAntunesPT 3 жыл бұрын

Thank you very much 🙏🙏😍😍

@rohantongle155 3 жыл бұрын

@@BrunoAntunesPT Always been waiting for your next js video Bruno

@BrunoAntunesPT 3 жыл бұрын

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

@valse82 3 жыл бұрын

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

@BrunoAntunesPT 3 жыл бұрын

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 ❤️❤️😀

@srigi-dev 3 жыл бұрын

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.

@BrunoAntunesPT 3 жыл бұрын

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

@allex204 3 жыл бұрын

Thanks for the video Bruno. Is there support for converting to WebP images?

@BrunoAntunesPT 3 жыл бұрын

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

@allex204 3 жыл бұрын

@@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!

@BrunoAntunesPT 3 жыл бұрын

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

@desmondamoako9854 Жыл бұрын

please do we have libraries to reduce the size of an image?

@juangabriel2559 2 жыл бұрын

Nice

@BrunoAntunesPT 2 жыл бұрын

Thank you 😊

@jamesb1664 3 жыл бұрын

Amazing video! 💪🏻 Is there a solution to the next export issue, for example the 404 error when using next Image in AWS Amplify, or Netlify etc?

@BrunoAntunesPT 3 жыл бұрын

Thank you very much =D Short answer: Sadly, no. Longer answer: Next.js does the image optimization at runtime currently (this can change in the future.......... if I had to bet, I would bet that they will change that sooner or later)

@BrunoAntunesPT 3 жыл бұрын

I shouldn't have said they will change. I should have said that they will give us the option to optimize at runtime or buildtime 😅 Change is the wrong word 😅 it's already 1am here, so my brain is half asleep 🤣🤣

@berkakgun7160 3 жыл бұрын

I guess you live in Porto, the kitchen looks so similar with the one I had when I was living in Portugal !

@BrunoAntunesPT 3 жыл бұрын

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

2 жыл бұрын

Thanks

@BrunoAntunesPT 2 жыл бұрын

Thank you Jose! :)

@deyvidantonioarauzcruz7715 Жыл бұрын

How can i install and use bootstrap in nextjs?

@ericvrp2 3 жыл бұрын

Does that mean that if I know an image will takeup roughly a third of the screen width I can do

@BrunoAntunesPT 3 жыл бұрын

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 ) 😊

@ehodges2004 3 жыл бұрын

Great video. It would be cool if you could cover using Cloudinary/Imgix with Next Image. Or would you use another solution?

@BrunoAntunesPT 3 жыл бұрын

Thank you 😀😀 Currently I save all my files in azure blob storage, just because it is very very very cheap with geo replication and does the job very well for my needs 😅😅 For some use cases I can completely see the benefits of a service like cloudinary with their cropping features, etc 😊 PS - I'm preparing a multi file upload video, where I'll be using cloudinary - they are the only service I found with a demo account, so people can follow my video without having to create an account which is amazing😀😀😀

@ehodges2004 3 жыл бұрын

@@BrunoAntunesPT Ok cool, thank you. I'll look at azure.

@BrunoAntunesPT 3 жыл бұрын

If you are not emotionally invested in any of the 3 big cloud providers yet, and you deploy to vercel or netlify, keep in mind that both vercel and netlify are built on top of aws, so probably using aws s3 gives you a little bit less latency (just a guess, I didn't test this 😅)

@ehodges2004 3 жыл бұрын

@@BrunoAntunesPT Ah interesting. I'll keep this in mind. I'm not invested in any of them. I like the free tier of Cloudinary and the options for manipulating images. I think I would need to use more storage to justify AWS at the moment, but it would be good to consider.

@BrunoAntunesPT 3 жыл бұрын

Cloudinary is very good, if you go with them I can guarantee you'll be happy 😊

@sabirahmed6191 3 жыл бұрын

One drawback I've noticed using this component is, that the browser does not seem to cache the image. Even though the original image's CachePolicy has been set.

@BrunoAntunesPT 3 жыл бұрын

Hello Sabir, I'm not 100% sure, but I think you are referring to this issue: github.com/vercel/next.js/issues/19914 If that's the case, we have to wait until this one is implemented :)

@hamed4451 3 жыл бұрын

Look!! Who came back, Where are u bruno, I miss you bro ❤

@BrunoAntunesPT 3 жыл бұрын

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😀❤️❤️

@shehanfernando8566 2 жыл бұрын

Hi Bruno. This is very useful. Thank you very much. I've managed to successfully deploy my Nextjs app on to the Azure WebAPPs. Now Next/Image is not loading images (png) from public/images folder. Can you please help?

@BrunoAntunesPT 2 жыл бұрын

Thank you 😍 What's the error you are seeing?

@BrunoAntunesPT 2 жыл бұрын

Hello Shehan, I received a notification that you commented something, but sadly KZfaq deleted it and I can't see it :( Can you repeat what you said?