MUST KNOW methods to MASTER Responsive Images in HTML & CSS in 20 minutes | Responsive Design

Hostinger Deal!! Use code below to get 20% discount! on a whole host of web hosting services!

Hey there guys,

Responsive Images in web design are crucial in the modern day world of programming...but responsive images go further than responsive design...Web performance is equally as important when dealing with images...so in this video you will master responsive design so you can go from that amateur programmer to pro level programmer.

If you have any questions, leave them down below and i hope you guys enjoy the video :)

Microphone I Use

PC Specs

Timestamps:

00:00 - Introduction
00:40 - Subscribe
00:51 - Relative Units
02:15 - Object Fit
04:50 - Introduction to Responsive Design
06:16 - 3 used cases of Responsive Design
06:28 - Density Switching
11:10 - Resolution Switching
17:19 - Art Direction
22:51 - Why not use CSS or JS?
23:34 - Bonus Tutorial

------------------

------------------
------------------
Learn with Code Lab! easy to understand tutorials :-)

DISCLAIMERS:

[homedecovibe]

I have been looking for tutorials for responsive images for my project and yours got everything that I needed. Thanks

[tusharchawla]

I can't able to understand density pixel way as why we are using big images for high resolution device and small images for low resolution device.
Can someone explain me.

[Tony.Nguyen]

But mobile devices have 3x density. That means on mobile devices you would get the 1300px image and not the 600px one right? Woudn’t it be bad for the performance?

[wildathart]

Speaker is speaking way too fast and background music is annoying. Great content apart from these very distracting elements.

[BigTerKC]

Well from the comments I think I would have liked the information. But the music is louder than your fast speech and I can’t make sense of what you’re saying.

[noahdiez]

What about 4k screens now days. Should you just keep HD images or scale in 4k, HD as well?

[mahimakhattri]

hi nice video but how can you add responsive web design when there is text besides an img

[SaifAli-pexp]

Loved Your content bro,
Keep up the good work . You'll hit 1m soon, my prayer's with

[nataliayarysheva]

this is absolutely brilliant, i'm just getting into development and this info was super helpful!

[NedumEze]

Thank you so much, sir.
May I ask, should this apply to every image in a website, even if the website hosts hundreds and more images? Should it be restricted to may be a particular category of images?

[yyankydev]

Some vids already have a button to tip the content creator in youtube. I hope you can have that. Or upload a course in udemy :(

[logiconabstractions]

About performance:

Fully agreed it's to be taken into consideration.... BUT. Some projects you may be able to afford to not care. If the primary use case is overwhelming larger devices/desktop types of users, but your project needs to support basic accessiblity for phones, then do you need/should be overwhelmingly concerned with img load performance on smaller devices? Maybe, but maybe not.

Also depends on what the project does - if it's a gallery of images, obviously it's going to matter. but if you just have a few images every once a few pages? Maybe not.

[coolvibesreloaded]

Mate your awesome I'm still learning html and CSS I have a radio station responsive website and Im trying to center an image underneath a tab as when you scroll right you see the image? So tvm your quality

[tancdiscovery]

Dont get it... Your 1x is 1000w, your 2x is 1300w. Shouldn't the 2x be 2000...? etc

[georgkettele]

Thanks for the video! Brilliant! One question - how would you solve to have different css rules for portrait and landscape images? Without cropping them and JS.

[karinahres]

Thank you for your video. What if there are several photos in the code, and they are superimposed on each other, and they need to set styles? How to set styles for them if they are in <picture> tag?

[tanimoworoqeeb]

He is so calm
I will recommend anyone who want to learn to learn from him cause he is just too understanding 💯💯💯

[ClashRoyale-ptzj]

good tutorial about responsive images, with a lot of details! keep up with this quality

[somidotunjohn]

codelab thank you for the video. my question is how do we know which image we should use these techniques for?
can we use it for logos and other

[processwire-rocks]

Brilliant video, thank you very much - it helped me a lot!