Home HTML Reference <picture>

<picture>

tag HTML5

Provides multiple image sources for different screen sizes or formats (e.g., WebP with JPEG fallback).

Syntax

<picture>\n <source media="..." srcset="...">\n <img src="fallback.jpg" alt="...">\n</picture>

Example

html

<picture>
    <source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source srcset="small.webp" type="image/webp">
    <img src="small.jpg" alt="Responsive image">
</picture>