Responsive Images in HTML and CSS

[@iskendev]

Hi Steve, thanks for content, really useful. By the way, what is that extension that colorizing free space in VS Code?

[@SteveGriffith-Prof3ssorSt3v3]

It's called Indent Rainbow.

[@hiwayshoes]

Thank you so much, Steve! I’ve always had so much trouble wrapping my head around how to work with images, as I’m trying to work with my own images as opposed to using stock photos. Your tutorial goes a long way in making the whole process easier to grasp. So many web design/dev tutorials seem to consider images as an afterthought and provide no depth with regard to their importance. Thanks again for your valuable info!

[@zooneyl2248]

Thank you. Why not write those html media queries in css, though? Using the background-image property and loading a different image in the url( ) as needed.

[@SteveGriffith-Prof3ssorSt3v3]

That is an option too. You can write all the media queries instead if you want.

[@BSUP-r7i]

help me a lot, although video released for more than 2 years. Thank you.

[@amitgogna2701]

Awesome voice..just like a professional news anchor or an orator..

[@ashleydortch2445]

Let's us skip the ads

[@jetspray3]

The location where the image is saved, did you rename the images to different dimension?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. I named them with their sizes as part of the name to make them easier to work with.

[@1polyron1]

You are a HTML and CSS God!

[@1polyron1]

mediaqueryception

[@MrsAlewine]

This is so clearly explained. Thank you!

[@noryanor158]

Thank you sir. Maybe next you can making tutorial about responsive canvas.

[@rorygrignard9742]

☕

[@HossamKhalaf-sr1oo]

Great stuff here, guys! , thanks from Egypt.

[@haythamkenway1561]

what's that violet safari on your deck?

[@SteveGriffith-Prof3ssorSt3v3]

The developer edition.

[@michaeljanik1489]

Thank you Steve. How can I structure the code when I want to have webp and jpg images in different sizes depending on the viewport?

[@SteveGriffith-Prof3ssorSt3v3]

Each of the source elements inside the picture element lets you add a different image and use the media attribute to define the viewport where you want to use that image.

[@michaeljanik1489]

@@SteveGriffith-Prof3ssorSt3v3 This didn't work in Chrome (it worked in Firefox though):

[@SteveGriffith-Prof3ssorSt3v3]

@@michaeljanik1489 If you are going to put multiple values inside the srcset attribute then you should be using the sizes attribute. Without the size attribute you can run into issues. I prefer to use the media attribute with a single image in each of the source elements.

[@michaeljanik1489]

@@SteveGriffith-Prof3ssorSt3v3 Thank you :-) I hope I don't demand too much: Could you give me a sample code, how I could realize that (multiple images with different sizes and the webp/Jpg).

[@sigmiami]

not how you do it, cropping it - isn't really responsive.

[@SteveGriffith-Prof3ssorSt3v3]

Responsive design means that a webpage's layout or the elements inside a page adjust or change in some way, in RESPONSE to browser conditions such as width, height, aspect ratio, pixel density etc. Having different versions of images that render based on browser conditions is absolutely responsive. If all you do is stretch or squash an image based on the screen width then you are offering a degraded non-customized non-optimized experience for your users.

[@sigmiami]

@@SteveGriffith-Prof3ssorSt3v3 distorting the image isn't a responsive image nor is losing the aspect ratio.. I would suggest w3 schools and css tricks have great articles on this

[@SteveGriffith-Prof3ssorSt3v3]

background-size: cover; Does not distort images it maintains their aspect-ratio. Cropping and creating different versions of images does not distort images or ruin their aspect-ratio either. I highly recommend CSS tricks to my students regularly, but not w3 schools. Far too often w3 schools leaves out important information or has had erroneous information.

[@sigmiami]

@@SteveGriffith-Prof3ssorSt3v3 we'll have to disagree - anything cropped or that loses it aspect ratio isn't really responsive - better than cropping would be to have a media query for each screen size which at least a better work around than cropping.