Embed flexible image

<picture> and <source> are able to provide flexible image by several conditions.

Condition by window width

You can add condition by adding media attribute to <source> tag.

<picture>
    <!-- Under 750px width window -->
    <source media="(max-width: 750px)" srcset="path/to/sp-image.jpg">
    <!-- Default image -->
    <img src="path/to/pc-image.jpg">
</picture>

Condition by image format

You can add condition by adding type attribute to <source> tag.

<picture>
    <!-- If Browser is supported WebP format -->
    <source type="image/webp" srcset="path/to/pc-image.webp">
    <!-- Default image -->
    <img src="path/to/pc-image.jpg">
</picture>

Format	Attribute
WebP	image/webp
JPEG	image/jpeg
PNG	image/png
GIF	image/gif

Combinate window width and image format

You can combinate each condition.

<picture>
    <!-- If Browser is supported WebP format and Under 750px width window -->
    <source type="image/webp" media="(max-width: 750px)" srcset="path/to/sp-image.webp">
    <!-- Under 750px width window -->
    <source media="(max-width: 750px)" srcset="path/to/sp-image.jpg">
    <!-- If Browser is supported WebP format -->
    <source type="image/webp" srcset="path/to/pc-image.webp">
    <!-- Default image -->
    <img src="path/to/pc-image.jpg">
</picture>