The HTML picture element explained [ Images on the web part 3 ]

The picture element is a little different than most HTML elements in how it works. It has some similarities to the video and audio element, as it gives us the ability to have different sources and it also uses the srcset attribute, which allows each source to actually have multiple sources... which is a bit strange.

It's a powerful element which opens up the possibilities of interesting art direction, changing images based on the size of the device's screen. This can be really useful, having a nice, big image for large screens, one that is cropped tighter for medium screens, and one that is smaller for mobile devices.

//// Links
Files from this video (starting and finished version):

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[darkbluebossa]

When it comes to HTML/CSS, this is my fave channel. Great job, Kevin!

[lisap]

Thanks so much!!! You are an incredible source of information. I am so grateful for your willingness to share these things on YouTube.

[kamal-ahmed]

I have learned a very important thing from this video. I faced an issue a few days back. I used webp images for better compressor and pagespeed score. Then I tested with Safari on Mac and iOS. No image was displaying. So, I reverted to jpg images. But in this video, I learned how to use webp and using jpg or other images as fallback. I wish I knew you'd trick I few days ago. Thank you so much for this valuable video. ❤️ I have subscribed to your site for your new CSS course. I hope it will be a deep and advanced CSS course that will remove all confusion in CSS. 😊

[mocococo]

Thank you again for yet another thorough tutorial,
Seems at first glance, like some markup's sizes are overlapping. I guess I will have to go through your pre-recommended tutorial.

Your new set up - to my opinion you need a "deeper" table. One where you could push the monitor a bit more further away.
Also some padding for the monitor, which would lift the monitor so its middle area is at your eye level.

[DenzelBraithwaite]

The first minute was already very helpful, thanks!

[AniketEdot]

Thank you for this video. I was searching for this particular feature and thanks to you my design is fixed!!

[surfthejungle]

It would be really awesome to see the 4th video in this series that you mentioned. About the automation of srcset etc. Thanks for your awesome content!

[tobysuperstar]

Thanks for sharing Kevin, you're quickly becoming my go-to person for all questions related to html & css. Quick question as I delve into images - given that this video is now about 4 yrs old, are there any major changes to your recommendations here? I'd also love to hear your take on how to incorporate avif images as browser compatibility grows.

[scooble]

I find it easier to learn one thing at a time, so mixing in changing grid displays at different screen sizes makes it more difficult to understand when I haven't fully grasped the functionality of grids. But other than that, excellent!

[silasu]

Thank you so much for this! Our lecturer didn't explaine this topic in detail so this is very helpful!

[balke]

these vids are great Kevin, thanks for taking the time!!

[BlessedTechie]

Thank you so much. This helped to know how to style my picture tag using css

[melzz]

I'm still confuse between the difference srcset in pictures tag and srcset in img tag, isn't in img tag you could also do media query?

[devlife]

Excellent Video on proper way optimize image!
I wish I had ton of money to visit your country and see you to show how much I respect you.

[muhammedozalp]

Thank you very much, Kevin.
It would be very good if you have time for the 4th video about automation.
And I am wondering if you can please talk about lazy-loading with picture or srcset element on that video.

[HarwoodGuy]

Thank you so much, I really enjoy learning from you. 👍😀

[AnonymousUser-vdst]

Thank you Kevin! It solved a great problem here.
In case I need to use multiple images when using with style attribute and background-image property, how do I do that?
Also, could you make a video covering all the basics to load webpages faster?

[clevermissfox]

Is there a reason on the small srcset there’s no 300w, 400w, 500w (as example values)? Are those not needed? Will the browser be able to tell their widths and choose the right one? Or just bc it’s a demo and the widths were added on large and medium, skipped adding those widths on small ?

[husseinkizz]

Thanks so much, Powell, but make us an updated series on this in 2021, including react application, please!

[joeldcanfield_spinhead]

Excellent. Clarifying: srcset is enough if we just want to serve different sized images to be responsive, but the picture element allows us to have multiple sources each with srcset, allowing either finer control over size, or if desired, different images (cropped/adjusted or just plain different) in addition to serving the appropriate size of each.


Or did I miss the point?