srcset and sizes attributes - [ images on the web | part one ]

Dang, Kevin.

I have to say that whenever I'm struggling to understand a layout concept, you're videos are always so refreshing. You're a gifted teacher. Simple, to the point, and practical.

What an explanatory video, loved the math formula tip you showed based on device widths. Thanks a lot for this amazing takeaway about srcset

Thank you once again for amazingly helpful information! I think this is a very important thing to know to allow your images to be responsive and flexible for various devices.

Hey Kevin, this was sooooo helpful. I'm currently building an image-heavy website ... and I never fully took the time to understand all the parameters available in srcset ... this was an excellent workshop and just took half an hour. Thank you so much!

Nice video! Finally understand it

I would prefer you write code in VS Code, because this is my text editor of choice. And many other people use it as well. And it's open source.

Nice but how to make this work with "width" and "height" img attrigutes while also not triggering errors in Lighthouse reports?

Thank you, I have read loads of tutorials and they dont explain it as clearly as this. Just one question how do you do the same for background images?

This is great content, thank you

It was really helpful to me and thanks a lot for this.

Well instinctively it feels anti-semantic, the sizes property especially. Html is for document classification, css is for presentation. Still I'm just a backend dev learning really, so pinch of salt on these early thoughts, but I would try not to use this. If I perf tested page load, and it exceeded some arbitrary limit, and then on investigation noted it was slow due to image loads then perhaps I would consider this at that point. Even there I'd be more inclined to throw extra hardware, or a CDN, at the problem, long before getting this finicky.

Ty. This was confusing at first buy you made it pretty simple and easier to understand.

Maybe it is a great solution. I didn't know about it. I am learning and on my blog, which I am making to learn while doing it, I have sometimes a post with a lot of pictures. Load time was crazy slow, but the column is not wide, so I wrote myself JavaScript code and server side code which is returning to the user the smallest possible picture depending on column width. Now I think I have to rewrite it using srcset + sizes :) Thanks!

Thank you so much, extremely clear.

Awesome and very well explained tutorial! Kevin, thank you so much! 💛

Came back to this video for the second time a few years after the first time. Always great stuff :)

Where’s part 2?

Now i get it :D

thanks, love this!
trying to get into more detail of loading and optimisation and it's hard to find good content on fundamentals like this.
fun seeing an old video compared to your new stuff too.

thanks a lot for the channel, awesome video, and i'm definitely going to use srcset for my personal page!

The video on srcset I wish I watched at least 2 years ago! As ever, really well explained and great demo. In some sense, I feel like the solution is over complicated at the CSS level but this was more than enough to help get my head around it. Thanks, Kevin!

Great video!! Quick question, how do you get different sizes of the same image?

Thank you!!🥰

I'm a beginner. How can I rotate img when I extend the page size ?

First,Thanks for the video. Secondly, I did not get good results: without the media query, my browser never changed img as I resized. Thirdly, with the media query in place, transitions occurred way earlier than expected. Finally, I ended up using the <picture> element for my project.

Thank you! I was struggling to understand why one and the same image is loaded no matter which screen size I set in Chrome Dev Tools responsive emulator, and your video was really helpful :)

Thank you so much!!!

I finally understood this concept of size!

Great video, thank you for the info!
I have one question regarding 2x-3x retina screens. If a mobile device has a 3x screen should it download the highest quality image?
Aren't mobile devices the ones with the most questional connections and where you want to your website to run the smoothest?
If a mobile device downloads all the highresolution images and slows the website down then whats the point?

Fundamentally I guess my question is should you strictly adhear to the screens pixeldensity or is it acceptable to stray away from it and follow your own preference if you feel thats best?
What is best practice here?

(new to this :D )

What's your recommendation when using a grid of images that scales with the viewport? In that case, would I have to write countless media queries to pass the width of each image at any given screen size? Or is there a better way of doing this?

I plan on using this for product item photos on e-commerce sites.

thanks so much, I gonna use it today😊

Cool hair style... Need to add some CSS to that lol

This is hard :o

The image width (500w) doesn't have to match your images actual width. you could just put your viewport target in there.

Thank you. Good explanation of srcset and what the browser is doing.

Thanks, I feel like I'm ready to implement this on the real project :)

Im still confused. How was sizes attribute able to select which image to use in srcset?

Great work

Thank you...

Boom

Awesome, I believe that this are indeed needed. Thanks🙌🏼

No poll pop up, but I prefer VS code.

Awsome vide! How would i apply this when I am using an img as a background in css though?

Does the algorithm also evaluate the network speed? So based on this it can choose if load an low quality image as compromise

Just a question. If in src you specificy the 500px, but than the browser understand that it's better the 1000px, how the loading process works? Is it first loaded the 500px and than substituted with the 1000px or it is directly loaded the 1000px?