Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Deprecated ALA Responsive Image Snippets
<figure data-picture data-alt="">
<div data-src="<!-- URL for standard image here -->"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>
<figure data-picture data-alt="">
<div data-src="<!-- URL for small-screen image here -->" data-media="(max-width: 700px)"></div>
<div data-src="<!-- URL for small-screen, high-DPI image here -->" data-media="(max-width: 700px) and (min-device-pixel-ratio: 2.0)"></div>
<div data-src="<!-- URL for standard image here -->" data-media="(min-width: 701px)"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-width: 701px) and (min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.