Skip to content

Instantly share code, notes, and snippets.

@heddn

heddn/responsive image examples

Last active November 3, 2022 21:39
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 heddn/d70d6dd6e3f4fb0300803ef040734dba to your computer and use it in GitHub Desktop.
Save heddn/d70d6dd6e3f4fb0300803ef040734dba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsive image examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<div>
<picture>
<source srcset="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg 1x, /sites/default/files/styles/large_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 2x" media="all and (min-width: 960px)" type="image/jpeg" width="768" height="512">
<source srcset="/sites/default/files/styles/medium_3_2_600x400/public/borscht-with-pork-ribs-umami.jpg 1x, /sites/default/files/styles/medium_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 2x" media="all and (min-width: 768px)" type="image/jpeg" width="600" height="400">
<img loading="lazy" src="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg" alt="Traditional Ukrainian soup with beets, tomatoes, and pork ribs">
</picture>
<img loading="eager" srcset="/sites/default/files/styles/medium_3_2_600x400/public/borscht-with-pork-ribs-umami.jpg 600w,
/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg 768w,
/sites/default/files/styles/medium_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 1200w,
/sites/default/files/styles/large_3_2_2x/public/borscht-with-pork-ribs-umami.jpg 1536w"
sizes="100vw" src="/sites/default/files/styles/large_3_2_768x512/public/borscht-with-pork-ribs-umami.jpg"
alt="Traditional Ukrainian soup with beets, tomatoes, and pork ribs" width="600" height="400">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment