<?xml version="1.0" encoding="utf-8"?>

The <picture> tag

The <picture> tag

Linguistically, there's not much difference between the words "image" and "picture." In the HTML world, it's a completely different ball game. The <picture> element allows developers to specify multiple image sources so that the browser can choose the one that better fits the current view or device. To define which image is the most suitable in this or that case, we use a media attribute. It sets image dimensions that are more proper for a specific screen or device.

One more difference between <img> and <picture> tags is that the <picture> element requires a closing tag and is actually a "parent" for the <img> tag.

Improve your UX & Product skills with interactive courses that actually work