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.
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!
Thank you. I was reading and practicing about this topic but still not understanding it clearly until I watched your video. Now I'm confident enough to apply it on my own project. I really appreciate your explanation, and look forward to seeing more of your videos.
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!
Also, when dev tools are open in Chrome, you can long click (click and hold) on the reload icon in the browser's toolbar and you get the option to 'empty cache and hard reload'.
There should be another option in polls " Doesn't matter". Because for me it doesn't matter Code pen or VS Code. I'm more interested in topic. Great tutorial BTW.
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.
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 :)
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 element for my project.
Notepad++ is cool too. That's how I learned Web Dev. Really helpful how it gives popups when typing to give examples of what you can use, especially on the CSS page. Still learning every day and that certainly helps. Just so many declarations to remember. Sadly, after all the learning on my own and taking an extra web dev class last semester, I'm still struggling to get hamburger buttons working. Ive been struggling with responsive design and adaptive content.
Takes a long time to start putting everything together, and making things responsive just adds a deeper layer on top of that. Just keep practicing and it starts to get easier :)
I had to learn on notepad++ and type everything out Before I could use an editor with all those bells and whistles. Then I realized a little to late, that ++ offered Bells and whistles too ! Lol .. I look back and see the importance of knowing how to make everything happen with no extensions or expansions or suggestions, etc ... I like notepad ++, I’m no hater by any means but VS has my heart.
Excellent and thorough explanation. Now that I'm working toward fully responsive sites, I'll be using srcset to serve different images for phone, tablet, and desktop (more or less.) I'd never heard of srcset before a week ago and as I'm refreshing my web knowhow this is high on my radar.
Every time I think I've learned what I need to know, I find something new, lol Been working on a site for just over a month now, and stumbled across this today. Thanks for this video Kevin!
This is a good coincidence. I just started the Udacity nano degree and this is in the first module and did not understand sizes. You explain it much better than they do.
I'm glad I could help out Andrew! I hope the rest of the course meets your expectations, I've heard good things about Udacity and have thought about doing a few of their courses in the past.
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!
At 9:56 you suggest to use the lowest quality image, but devs may bear in mind that this isn't always the best option. In many situations you might actually want to provide the best quality image at the sacrifice of bandwidth to the end user. The reason for this would be that just because the end-user is using an old browser, this doesn't necessarily mean they're on a poor connection. Granted, there may be a correlation, but this should be taken case-by-case.
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.
wow... This is the video that I didn't know I needed. I used media queries and, if I remember correctly, the visibility property to achieve that same effect. using srcset seems so much easier!
I think doing it with media queries and css visibility isn't really helping with lowering bandwith. You're still downloading all the image versions. With srcset you literally are downloading only the single best sized image depending on the browser width, resolution, etc.
Yup, as John mentioned, this will load in all the images. You'd be better off just loading in one big image in that case I believe. You'll probably really like the picture element once I get there next week :)
sorry to be so offtopic but does anyone know a way to log back into an instagram account? I somehow forgot the login password. I love any assistance you can offer me!
@Ameer Jack i really appreciate your reply. I got to the site through google and I'm trying it out now. Seems to take quite some time so I will get back to you later when my account password hopefully is recovered.
Great video! i loved the use of cats. not anymore in new videos =P thanks as always kevin! you make it so clear, today i saw 4 more videos about it, all of them bring some to the table but yours always is the most educative and descriptive. thanks again from 2024!
Excellent video! One thing about the beginning of your CSS pixel explanation: "...a pixel on one device is not equal to a pixel on another device. That's because we're using CSS pixels..." I might be misunderstanding what you're saying here, but if you're saying CSS pixels are different across devices, I don't believe that's the case. Hardware pixels are different sizes, but CSS pixels are about the same size across different devices.
Pole?.. IDE/Text Editor over Code Pen any day... as a newbie just nice to see all the code, not just the CodePen content code (it that made sense?).. and then write it myself in the same editor as VSC and Atom seem to be everyone's flavour at the mo.. Just a lot easier for a newbie to feel out and understand.. Keep up the awesome work dude! : )
Thank you soooo much for doing this awesome videos! I do lern more from you than from enywere else on the internet. Great quality, great mic, nice you. Greetings from Austria and Thanks alot! keep going!
Thanks 🎉i hade a forographers homepage and a grid 6 on desktop and I could not really find out, why its not loading the smallest images. Now I know and his site will run much faster thanks to the media query🎉🎉🎉
Great video, I’m wondering what people’s thoughts are on automating sizing picture sizes? Ideally, I’d like to output sizes in webp for most viewports and jpegs for mobile since support still isn’t there.
I have resisted using SRCSET for long time, partly due to limited browser support partly as it seemed strange mixing layout information into the html... After wrestling with complex CSS media queries in my recent project I've realised that it's the best, most elegant and easiest to implement solution for the photos and illustrations in the content (not for the layout backgrounds, textures, and UI that are parts of CSS). Have the feeling that it should be a separate, 3rd layer of abstraction, tho (beside HTML and CSS) do deal exclusively with the viewport/output.
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 )
I'd love a video on image loading and not lazy loading, but more loading a lower resolution image prior to a higher resolution image--like Instagram when you're on a slow connection. And VS > codepen
If you use progressive jpgs, you'll get that. Outside of Photoshop I'm not actually sure how to save a jpg as progressive, but there are certainly ways :)
At 16:35, you say something like "as my window size is bigger as this (pointing at 1500), it will use this image (pointing at img/cat-1500.jpg). This is incorrect, it will start using img/cat-1500.jpg when the window size is bigger as 1000px.
![When to use .jpg or .png? the answer is WebP... sort of [ images on the web | part two ]](http://i.ytimg.com/vi/Z_28syzkv-0/mqdefault.jpg)
![When to use .jpg or .png? the answer is WebP... sort of [ images on the web | part two ]](/img/tr.png)
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.
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!
Thank you. I was reading and practicing about this topic but still not understanding it clearly until I watched your video. Now I'm confident enough to apply it on my own project. I really appreciate your explanation, and look forward to seeing more of your videos.
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!
Came back to this video for the second time a few years after the first time. Always great stuff :)
Nice! I've come back to it myself a couple of times to remember parts of it 😅
Super! I found that this tutorial is only one with an explanation of "CSS Pixels" among huge numbers of CSS tutorials!
It's something most people don't realize. I need to do a video only on that subject I think.
I was stuck for hours to figure out "clearing the cache " before I came 2 this video.
But I found it in your video. U saved the day. thanks a lot...
Also, when dev tools are open in Chrome, you can long click (click and hold) on the reload icon in the browser's toolbar and you get the option to 'empty cache and hard reload'.
What an explanatory video, loved the math formula tip you showed based on device widths. Thanks a lot for this amazing takeaway about srcset
There should be another option in polls " Doesn't matter". Because for me it doesn't matter Code pen or VS Code. I'm more interested in topic. Great tutorial BTW.
I thought about it, but I figured I'd force people to make a decision :P - Glad you enjoyed the video!
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.
You're amazing. I just finished my website project last week by following your advice. I wish this video was out two weeks ago haha
Great job as usual, Kevin. The way you explain things is very clear which makes it easier to understand!
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 :)
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 element for my project.
Notepad++ is cool too. That's how I learned Web Dev. Really helpful how it gives popups when typing to give examples of what you can use, especially on the CSS page. Still learning every day and that certainly helps. Just so many declarations to remember.
Sadly, after all the learning on my own and taking an extra web dev class last semester, I'm still struggling to get hamburger buttons working. Ive been struggling with responsive design and adaptive content.
Takes a long time to start putting everything together, and making things responsive just adds a deeper layer on top of that. Just keep practicing and it starts to get easier :)
I had to learn on notepad++ and type everything out Before I could use an editor with all those bells and whistles. Then I realized a little to late, that ++ offered Bells and whistles too ! Lol .. I look back and see the importance of knowing how to make everything happen with no extensions or expansions or suggestions, etc ... I like notepad ++, I’m no hater by any means but VS has my heart.
Excellent and thorough explanation. Now that I'm working toward fully responsive sites, I'll be using srcset to serve different images for phone, tablet, and desktop (more or less.) I'd never heard of srcset before a week ago and as I'm refreshing my web knowhow this is high on my radar.
Every time I think I've learned what I need to know, I find something new, lol
Been working on a site for just over a month now, and stumbled across this today. Thanks for this video Kevin!
Thank you. Good explanation of srcset and what the browser is doing.
I see this source set in wordpress but I don't know the concept behind it. Today I understand it and use it for my HTML website
Thanx Kevin
This is a good coincidence. I just started the Udacity nano degree and this is in the first module and did not understand sizes. You explain it much better than they do.
I'm glad I could help out Andrew! I hope the rest of the course meets your expectations, I've heard good things about Udacity and have thought about doing a few of their courses in the past.
Awesome. You have no idea how badly I need this on a project right now. Thanks a million Kevin.
But how do you put those width into img srcset when imgae is being loaded from backend
Thank you so much for your help with images, Kevin! Your tutorials are always the best!
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!
At 9:56 you suggest to use the lowest quality image, but devs may bear in mind that this isn't always the best option. In many situations you might actually want to provide the best quality image at the sacrifice of bandwidth to the end user. The reason for this would be that just because the end-user is using an old browser, this doesn't necessarily mean they're on a poor connection. Granted, there may be a correlation, but this should be taken case-by-case.
Awesome and very well explained tutorial! Kevin, thank you so much! 💛
Thanks Kevin. You have produced some quality videos this last month or so. I really appreciate it.
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.
I finally understood this concept of size!
Ty. This was confusing at first buy you made it pretty simple and easier to understand.
wow... This is the video that I didn't know I needed. I used media queries and, if I remember correctly, the visibility property to achieve that same effect. using srcset seems so much easier!
I think doing it with media queries and css visibility isn't really helping with lowering bandwith. You're still downloading all the image versions. With srcset you literally are downloading only the single best sized image depending on the browser width, resolution, etc.
I agree. I'm going to have to use this going forward.
Yup, as John mentioned, this will load in all the images. You'd be better off just loading in one big image in that case I believe. You'll probably really like the picture element once I get there next week :)
Another very helpful video. These videos always help me to learn a new way to improve my website!
YES!!! You came through on kitten, as promised. I now have no choice but to Patreon this channel.
Haha, I'll make sure to keep them up :)
Thank you very much from a teacher in Barcelona, Catalunya
No problem at all :D
I have learned a lot of things from you , I really appreciate what you do for us bingers in stuff like this 🖤
sorry to be so offtopic but does anyone know a way to log back into an instagram account?
I somehow forgot the login password. I love any assistance you can offer me!
@Zane Kase instablaster =)
@Ameer Jack i really appreciate your reply. I got to the site through google and I'm trying it out now.
Seems to take quite some time so I will get back to you later when my account password hopefully is recovered.
@Ameer Jack it did the trick and I now got access to my account again. Im so happy!
Thanks so much you really help me out !
@Zane Kase Happy to help :)
you always surprise me with your content. it's concise and informative. Great work.
Kevin lost weight since this.
Good job!
Thanks Kevin! Very well explained. Great help for me.
Nice to know about (scrset). VSCode explanation is good. Use VSCode in all your code examples. Good health.
so enjoyable when watching your every video! thoughtful and clear
Very clear explanation. Thank you man
we don't need dislikes for this guy plz, this will be helpful Kev thank you, keep it up ♥
Haha, always gonna be haters, it's all good
thanks a lot for the channel, awesome video, and i'm definitely going to use srcset for my personal page!
What a fantastic tutorial! Like a missing manual!
I plan on using this for product item photos on e-commerce sites.
Images make the webpages slow. Thanks that's what I am looking for.
Great video, as usual. Seems like I did a free course on Udacity that dealt with this, but your explanation has helped it stick better for me. Thanks!
Glad I could help :)
Great video! i loved the use of cats. not anymore in new videos =P thanks as always kevin! you make it so clear, today i saw 4 more videos about it, all of them bring some to the table but yours always is the most educative and descriptive. thanks again from 2024!
This is very good and useful tutorial and it explains advanced techniques. Thank you Kevin keep on going.
Thanks Igor, glad you liked it :D
Any topic that touches accessibility, performance and it optimisation is very useful nowadays
I'll have some accessibility videos coming early in the new year 👍
@@KevinPowell I'll be waiting!
100000 times clap clap clap....you saved my tons of time, Thank you for everything :) :) :)
Awesome, I believe that this are indeed needed. Thanks🙌🏼
Oh man, i loved the video! Thank you so much for making it. God bless you sir.
Perfectly explained!
Thank you so much, extremely clear.
It was really helpful to me and thanks a lot for this.
Thanks, I feel like I'm ready to implement this on the real project :)
Excellent video! One thing about the beginning of your CSS pixel explanation: "...a pixel on one device is not equal to a pixel on another device. That's because we're using CSS pixels..." I might be misunderstanding what you're saying here, but if you're saying CSS pixels are different across devices, I don't believe that's the case. Hardware pixels are different sizes, but CSS pixels are about the same size across different devices.
Been awhile since I recorded this, but I think what I wanted to say was "that's why we use CSS pixels"...
@@KevinPowell Ah, gotcha. By the way, awesome series, you are one of my favorite front end content creators on RUclips!
Pole?.. IDE/Text Editor over Code Pen any day... as a newbie just nice to see all the code, not just the CodePen content code (it that made sense?).. and then write it myself in the same editor as VSC and Atom seem to be everyone's flavour at the mo.. Just a lot easier for a newbie to feel out and understand.. Keep up the awesome work dude! : )
Thanks for the feedback!
I love you! In the ru community, little is said about it
thank you so much for that video this really made it easy for me to use srcset attribute and understand it very well
What an excellent tutorial.
Very good topic. Thank's for sharing. Like this better than Codepen
Thank you so much!!!
Thank you! I finally understood this!
Thank you soooo much for doing this awesome videos! I do lern more from you than from enywere else on the internet. Great quality, great mic, nice you. Greetings from Austria and Thanks alot! keep going!
Thanks so much for the kind words Julian, and I'm so glad that you like and learn from my videos :D
Great explanation! Thank you so much for spending your time. Nice guy! :)
Thanks 🎉i hade a forographers homepage and a grid 6 on desktop and I could not really find out, why its not loading the smallest images. Now I know and his site will run much faster thanks to the media query🎉🎉🎉
Nice video! Finally understand it
Hi Kevin, thank you. This is really interesting, as always. How would i apply this when I am using an img as a background in css though?
Thank you very much Kevin
Great video - thank you.
Great video Kevin, really helpful info, thank you!
This is great content, thank you
Great video, I’m wondering what people’s thoughts are on automating sizing picture sizes? Ideally, I’d like to output sizes in webp for most viewports and jpegs for mobile since support still isn’t there.
thanks so much, I gonna use it today😊
your every video is amazing keep it coming sir!!
Thanks Hashaam!
Kevin, you are awesome! I love your videos!
Thanks Ethan :)
A fantastic tutorial, thanks!
I have resisted using SRCSET for long time, partly due to limited browser support partly as it seemed strange mixing layout information into the html... After wrestling with complex CSS media queries in my recent project I've realised that it's the best, most elegant and easiest to implement solution for the photos and illustrations in the content (not for the layout backgrounds, textures, and UI that are parts of CSS). Have the feeling that it should be a separate, 3rd layer of abstraction, tho (beside HTML and CSS) do deal exclusively with the viewport/output.
very clear explanation thank you
Great work
Very well explained..Well done!
It's great, I am going to use it heavily
Cool! I didn't know about it. Thanks!
Very well explained! Thanks!
very informative video🧡🧡
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 )
very well explained!
Hey Kevin, do you have any videos on how to use grunt to make images responsive?
güzel anlatmışsın, tebrik ederim
so good. Thank you!
Thank you so much for this video! Helped me a lot!
You are always with energy Kevin yup
Thank you!!🥰
The image width (500w) doesn't have to match your images actual width. you could just put your viewport target in there.
Great Video, thanks a lot!
How can i like this video multiple times ?
Javascript...
I'd love a video on image loading and not lazy loading, but more loading a lower resolution image prior to a higher resolution image--like Instagram when you're on a slow connection. And VS > codepen
If you use progressive jpgs, you'll get that. Outside of Photoshop I'm not actually sure how to save a jpg as progressive, but there are certainly ways :)
@@KevinPowell oh yes, I'm already using Cloudinary for that!
Cool hair style... Need to add some CSS to that lol
At 16:35, you say something like "as my window size is bigger as this (pointing at 1500), it will use this image (pointing at img/cat-1500.jpg). This is incorrect, it will start using img/cat-1500.jpg when the window size is bigger as 1000px.