Picture Element

The HTML picture element wraps one or more source elements and a required fallback img element. A browser evaluates source conditions, such as media queries or supported image types, and loads a suitable image. This is useful for art direction: a wide desktop photograph might be replaced with a tighter mobile crop that keeps the subject visible. It can also provide modern image formats with a fallback for browsers that need another format.

The img child remains important. Its alt text describes the image when appropriate, and attributes such as width and height can help reserve space. The source elements do not each need independent accessibility descriptions. A responsive image does not automatically become faster: file dimensions, compression, delivery, and the actual selected resource still matter.

Use picture when the content or format genuinely needs conditional selection. For simple resolution switching of essentially the same image, img with srcset and sizes is often enough. The picture element concerns image-source selection, not the site's URL structure.