Skip to content

Instantly share code, notes, and snippets.

@bjankord

bjankord/gist:2710648

Created May 16, 2012 14:12
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 bjankord/2710648 to your computer and use it in GitHub Desktop.
Save bjankord/2710648 to your computer and use it in GitHub Desktop.
Download ZIP
Srcset with Meta Variables
Raw
gistfile1.html
<head>
<meta name='srcset' var='small' value='320w' />
<meta name='srcset' var='small-2x' value='320w 2x;' />
<meta name='srcset' var='medium' value='600w' />
<meta name='srcset' var='medium-2x' value='600w 2x;' />
<meta name='srcset' var='large' value='1000w' />
</head>
<body>
<img src="images/small/photo.jpg" srcset="images/{srcset}/photo.jpg" alt="The Breakfast Combo">
</body>
// Notes
-----------------------------------------------------------------
{srcset} would be the var value associated with the active srcset value.
{} variable syntax is based on URI templates - http://tools.ietf.org/html/rfc6570
So for a mobile device, the UA would evaluate the srcset meta variables and apply a value to {srcset}
A mobile device with 2x pixel density would be served the following image:
"images/small-2x/photo.jpg"
This would keep the srcset implementation short and simple and
allow for it to be more future friendly. If new srcset conditions are added,
say a condition for retina like desktops, they are added in 1 place, not each
individual img that has a srcset attribute.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment