Skip to content

Instantly share code, notes, and snippets.

@bmuenzenmeyer
Created May 18, 2012 09:54
Show Gist options
  • Save bmuenzenmeyer/2724374 to your computer and use it in GitHub Desktop.
Save bmuenzenmeyer/2724374 to your computer and use it in GitHub Desktop.
Picture Element Polyfill Syntax with HD(Retina) Support
<picture alt="A Thoroughly Polite Dust Up">
<!-- <source src="../images/AThoroughlyPoliteDustUp_350.png"> -->
<source src="../images/AThoroughlyPoliteDustUp_350.png">
<!-- <source src="../images/AThoroughlyPoliteDustUp_350.pngx2.png" media="(min-device-pixel-ratio: 2.0)"> -->
<source src="../images/hd/AThoroughlyPoliteDustUp_350.pngx2.png" media="(-webkit-min-device-pixel-ratio: 2.0)">
<!-- <source src="../images/AThoroughlyPoliteDustUp_350.png" media="(min-width: 500px)"> -->
<source src="../images/AThoroughlyPoliteDustUp.png" media="(min-width: 500px)">
<!-- <source src="../images/AThoroughlyPoliteDustUp.png" media="(min-width: 500px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="../images/hd/AThoroughlyPoliteDustUp.png" media="(min-width: 500px) and (-webkit-min-device-pixel-ratio: 2.0)">
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="../images/AThoroughlyPoliteDustUp_350.png" alt="A Thoroughly Polite Dust Up"></noscript>
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment