Skip to content

Instantly share code, notes, and snippets.

@bjankord
Created April 27, 2012 14:33
Show Gist options
  • Save bjankord/2509735 to your computer and use it in GitHub Desktop.
Save bjankord/2509735 to your computer and use it in GitHub Desktop.
Picture element with different image formats
<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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment