The picture element is an HTML element for declaring images based on different screen sizes or viewport without the need of writing "CSS" media queries. It takes in two properties, the —<source> tag which makes use of the srcset property to specify d...

Hashnode is a community-driven platform for developers to share knowledge, ask questions, and connect with peers in the tech industry. Developers can learn about new technologies, programming languages, and software development methodologies, engaging in discussions, and networking with fellow developers to expand their knowledge and grow their careers in tech.

Hashnode

The picture element is an HTML element for declaring images based on different screen sizes or viewport. It takes in two properties, the — <source> tag which makes use of the srcset property to specify different images. There are a few use-case scenarios in which the picture tag can be very useful, below are three examples.

The amazing HTML5 Picture Element

<p>Well, I wouldn’t call the Picture element “amazing”. It’s a very basic HTML5 functionality.
To resume, you can serve a different image source depending on browser viewport.
It’s important to optimize responsive images and ensure art direction when cropping.</p>
