Real picture tag polyfill, to use responsive images today!
A Responsive Images approach that you can use today that uses the real
pictureelement along with children
sourceelements with
media,
srcand
srcsetattributes.
PicturePolyfill is fast and easy to use because:
sourceelements data, making the script much more performing see tests
srcsetattribute of
sourcetags
picturePolyfill only polyfills the
picturetag, whereas picturefill polyfills also the
imgtag with
srcset+
sizesattributes. Go for picturefill if you need to polyfill that too. If you don't, stick with picturePolyfill because it's a much smaller and faster script.
To support HD (Retina) images, mark up your responsive images like this.
If you don't need to support HD (Retina) images, you can mark up your responsive images like this.
picturetag:
data-default-srcattribute: the image URL that you want to load in IE Desktop < 10.
data-altattribute: the alternative text that will be set in the
imgtag
sourcetags:
mediaattribute: any media query, but it's advised to use a
min-widthmedia query to follow the "mobile first" approach.
srcattribute: the image URL at the corresponding
media
srcsetattribute: comma separated URLs and scale at the corresponding
media, e.g.
img/768x768.gif, img/768x768x2.gif 2x
imgtag:
imgtag inside the
picturetag is required by the specs
srcin the
imgto avoid a double http call in browsers that don't natively support the
picturetag.
NEW in version 4.0.0! The
sourcetags order is important! The parser exits at first matching
mediaso be sure to place the higher
min-widthqueries at the begin of the tags list!
imgis updated
The script searches in the
sourcetags and selects the last matching
media's
srcor
srcset. When found, picturePolyfill will update the
imgelement's
srcand
srcsetattributes inside the
picturetag, with the matching ones. The
img's
srcattribute is then updated at browser resize (see computing performance section above to read about performance at browser resize).
Responsive images can be quite complicated to be served on your website if you have to: pre-scale them at many different resolutions; name them; and maybe change their size when developing a new release of your site.
It's then a good practice to have a server-side picture scaling service (like pixtulate) to scale the images for you, just in time, starting from only one big image.
If you want to use an image server, you can code your HTML like the following:
Note that you should serve double resolution images (double width and double height) for HD/retina displays, as you can see in the "With HD (Retina) images support" section of this readme.
You can install the latest version of picturePolyfill using bower
bower install picturePolyfill
You can either include the
script in thehead
section of yourHTML
pages, OR just before the closure of thebody
tag.
headsection
... <script src="picturePolyfill.min.js" defer></script> ...
Note: Including the
deferattribute in the
scripttag will prevent the script download to block page rendering while in progress.
bodysection
... ... <script src="picturePolyfill.min.js"></script>
PicturePolyfill executes either automatically and by code, calling the parse() function.
document
document
picturePolyfill.parse()to execute it on the whole
document
picturePolyfill.parse(element)to execute from the
elementDOM node below
PicturePolyfill is intentionally exposed to the global namespace, so you can call it as you need it.
Example: if some of your AJAX calls change a portion of your DOM injecting new
picturenodes, after your new DOM has changed just call
picturePolyfill.parse()(or
picturePolyfill.parse(element)) to make picturePolyfill parse only the changed portion of the DOM.
Calling
picturePolyfill.parse(element)(where
elementis a specific DOM node) is faster if you know the parent node where the DOM changed.
PicturePolyfill supports all modern browsers and down to Internet Explorer 7.
data-default-srcattribute will be used to reference the image source.
Currently,
picturePolyfill.jscompresses to around 1300bytes (~1.2kb) after minify and gzip. To minify, you might try these online tools: Uglify, Yahoo Compressor, or Closure Compiler. Serve with gzip compression.