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

The frozen recording really messed up the video 😒

I didn't find the video on automating images. Was it ever released or am I just blind?

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.

@kevin - am I wrong or did you forget to add a comma in the small srcsets ? or is the comma optional? thanks for yet another great tutorial... I still struggle to decide if I think Apple's X2 and X3 is a stupid solution or not... to me, it just generates a ton of extra wasted bandwidth for mobiles...

The way you explain things is so clear and easy to understand

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.

The first minute was already very helpful, thanks!

Note to newbies: don't make mistake like i did. The url in the srcset attribute must be escaped. Because it simply is not a url. 😭

Hi, Kevin Powell. Can you also explain figure and figcaption? I couldn't understand what they really meant. Thanks in advance...

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

Why does a picture tag behave as a div if its parent has 'display: flex'? I thought that picture is just an invisible wrap to keep sources.

What happend to the automation video?

I dont like this

pretty shit part for it to freeze bro LOL. but good vid series thanks

What mic is that, I'm wearing beadphones and i thought they werent on wtf lol

Is the 4th part available? Thanks for the great job!

Great tutorial, thanks!

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?

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

It's hard to watch because of all the lags and freezes through whole video. Anyway thanks for great explanation.

Is this works with all device types?

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!

Hi Kevin, is there a similar approach for video tags for video back grounds, so a larger videos play on a desktop but a trimmed version plays on a mobile?

Is there a Wysiwyg editor out there that supports this?

Great video Kevin, thank you for the clear explanation!
Do you have any tips for reducing cumulative layout shift when using responsive images? For example, how can we reserve space for an image to load into, if the size of the image will change depending on the window size or device, etc.?

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.

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

Is there a reason the picture element is the only element to support webp currently? Will the img tag support webp in the near future or will the img element without the picture element slowly become obsolete in favor of the picture element.
Wondering if it is worth using the picture element over stand alone img element for future proofing even in situations where you don't need to change the images being displayed.

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. 😊

When should i use the sizes attribute?

How can I use this in WordPress?

What if I add srcset attribute on the img tag along with all other stuffs?

So, is there a way to target a specific image depending on which one is loading in??

Other than using the built-in devtools responsive mode, how do you set up your testing environment when you need to debug real on real devices *locally*? (I know there are tools like ngrok, but when you don't want to disclose your code they might not be an option.) Would you care to record a video about that?

Unfortunately if you put 2 same scrset files: webp and jpg in Safari it won't just skip webp and display jpg. It will show nothing. Any ideas how to solve it?

Well explained and very useful!

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?

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!

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?

Excellent series of videos!, great work Kevin. I have a question regarding the mixing of media queries and the width on the srcset. how is it that 534w will trigger if we are inside a (min-width 960px) media query?... related to the large img srcset. (same for the medium jpg tho).

I love your movies so much! Definitly goes to fav

Dude, you rock!

Thans for the qualité of information 🔥🔥

So we need to have an <img> element within the <picture> element, but does the <img> element need to define a "src" ? Can we write "<img src="">" since the sources will be overwriting the image src anyway?

Hi Kevin, in Chrome the inspector shows you the currentSrc, much easier then finding files in network tab.

Sir one question plz reply me.
Is there any background tag in html?

Is this better than Ajax through?