public
Last active

Picture element with different image formats

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13
<picture alt="Alt tag describing the image represented">
<source src="photo.webp" type="image/webp"/>
<source src="photo.mng" type="image/mng"/>
<source src="photo.svg" type="image/svg+xml"/>
<img src="photo-s.jpg" />
</picture>
 
// Notes
//----------------------------------------------------------------
If browser supported the webp image format it would use that image,
otherwise use the next image format in the source order. If the browser
does not support any of the image formats in the source elements, it would
default back to using the img element.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.