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. If you haven't already watched part one, where I look at the srcset attribute, I strongly recommend you do:    • srcset and sizes attributes - [ images on ...   //// Links Files from this video (starting and finished version): https://github.com/kevin-powell/the-p... --- I have a newsletter! https://www.kevinpowell.co/newsletter New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save:    • How to automatically refresh your browser ...   --- Support me on Patreon:   / kevinpowell   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. Instagram:   / kevinpowell.co   Twitter:   / kevinjpowell   Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell