Skip to content

Instantly share code, notes, and snippets.

@craigcooperxyz
Created July 1, 2021 14:53
Show Gist options
  • Save craigcooperxyz/2afe06546575b1bf2733004c737a5e63 to your computer and use it in GitHub Desktop.
Save craigcooperxyz/2afe06546575b1bf2733004c737a5e63 to your computer and use it in GitHub Desktop.
Picture element for images in Shopify
{% assign image = image %}
<picture>
<source srcset="{{ image | img_url: '335x', format: 'pjpg'}}, {{ image | img_url: '670x', format: 'pjpg' }} 2x"
media="(max-width: 375px)">
<source srcset="{{ image | img_url: '750x', format: 'pjpg'}}, {{ image | img_url: '1500x', format: 'pjpg' }} 2x"
media="(max-width: 749px)">
<source srcset="{{ image | img_url: '1500x', format: 'pjpg' }}"
media="(min-width: 750px)">
<img src="{{ image | img_url: '1500x', format: 'pjpg' }}" alt=""
srcset="{{ image | img_url: '1500x', format: 'pjpg' }}">
</picture>
@craigcooperxyz
Copy link
Author

  • Remove format: 'pjpg' where not appropriate, particularly if using transparent PNGs
  • Add as many sources as required by the project, try to be as close as possible to the final rendered size for your various breakpoints as you can get

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment