Skip to content

Instantly share code, notes, and snippets.

@btemperli

btemperli/ResponsiveImage.html

Last active April 1, 2019 09:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save btemperli/a095e1cf87f0a76d094a74141d8ebf57 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save btemperli/a095e1cf87f0a76d094a74141d8ebf57 to your computer and use it in GitHub Desktop.
Download ZIP
How to output a responsive Image with multiple image-sizes in a HTML-File
Raw
ResponsiveImage.html
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/styles/max_2600x2600/image.jpg 1x" media="all and (min-width: 1600px)" type="image/jpeg">
<source srcset="/styles/max_1600x1600/image.jpg 1x" media="all and (min-width: 1280px) and (max-width: 1599px)" type="image/jpeg">
<source srcset="/styles/max_1280x1280/image.jpg 1x" media="all and (min-width: 960px) and (max-width: 1279px)" type="image/jpeg">
<source srcset="/styles/max_960x960/image.jpg 1x" media="all and (min-width: 640px) and (max-width: 959px)" type="image/jpeg">
<source srcset="/styles/max_650x650/image.jpg 1x" media="all and (min-width: 320px) and (max-width: 639px)" type="image/jpeg">
<source srcset="/styles/max_325x325/image.jpg 1x" type="image/jpeg">
<!--[if IE 9]></video><![endif]-->
<img src="/styles/max_325x325//image.jpg" alt="The example image" title="Title for the tooltip" typeof="foaf:Image">
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment