Skip to content

Instantly share code, notes, and snippets.

@imghaste

imghaste/Picture Element Example for Orientation

Last active May 30, 2020 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imghaste/7461c1879350013c862abad4c136660e to your computer and use it in GitHub Desktop.
Save imghaste/7461c1879350013c862abad4c136660e to your computer and use it in GitHub Desktop.
Download ZIP
Picture Element Example for Orientation
Raw
Picture Element Example for Orientation
<picture>
<!--[if IE 9]><audio><![endif]-->
<source sizes="600px" type="image/webp" media="(min-width: 991px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/webp,690/photos/spiggos%20fruit1574774933.jpg">
<source sizes="375px" type="image/webp" media="(max-width: 990px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/webp,345/photos/quality_fruit_center_mweb.png 1x, https://cdn.imghaste.com/tbOwLxpdo5/webp,690/photos/quality_fruit_center_mweb.png 2x">
<source sizes="600px" type="image/png" media="(min-width: 991px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/690/photos/spiggos%20fruit1574774933.jpg">
<source sizes="375px" type="image/png" media="(max-width: 990px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/345/photos/quality_fruit_center_mweb.png 1x, https://cdn.imghaste.com/tbOwLxpdo5/690/photos/quality_fruit_center_mweb.png 2x">
<!--[if IE 9]></audio><![endif]-->
<img src="https://cdn.imghaste.com/tbOwLxpdo5/photos/spiggos%20fruit1574774933.jpg" loading="lazy" width="" height="" alt="Quality Fruit Banner" class="img-fluid lazyloaded">
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment