picturePolyfill 4

A Responsive Images approach that you can use today that uses the real

picture

source

media

src

srcset

• Author: Andrea Verlicchi (c) 2014
• License: MIT/GPLv2

DEMO

picturePolyfill advantages

PicturePolyfill is fast and easy to use because:

• markup & go: it uses the picture tag, easy to markup, and future-proof
• loading performance: it serves only one image to your website users, no double HTTP requests are made
• computing performance: it's designed and coded keeping performance in mind. For example:
  • it doesn't execute repeatedly while a smooth/animated browser resize is in progress, avoiding useless DOM parsing and useless HTTP requests to mid-breakpoints images that the user might not need)
  • it caches che

    source

    elements data, making the script much more performing see tests
• support to HD (Retina) displays easily made via the

  srcset

  attribute of

  source

  tags
• it's solid, because its code is all covered by tests

Differences with picturefill

picturePolyfill only polyfills the

picture

img

srcset

sizes

Markup pattern and explanation

With HD (Retina) images support

To support HD (Retina) images, mark up your responsive images like this.

Without HD (Retina) support

If you don't need to support HD (Retina) images, you can mark up your responsive images like this.

Notes about the markup

• picture

  tag:

  • data-default-src

    attribute: the image URL that you want to load in IE Desktop < 10.

  • data-alt

    attribute: the alternative text that will be set in the

    img

    tag

• source

  tags:

  • media

    attribute: any media query, but it's advised to use a

    min-width

    media query to follow the "mobile first" approach.

  • src

    attribute: the image URL at the corresponding

    media

  • srcset

    attribute: comma separated URLs and scale at the corresponding

    media

    , e.g.

    img/768x768.gif, img/768x768x2.gif 2x

• img

  tag:
  • one

    img

    tag inside the

    picture

    tag is required by the specs
  • you can still use an empty

    src

    in the

    img

    to avoid a double http call in browsers that don't natively support the

    picture

    tag.

NEW in version 4.0.0! The

source

media

min-width

How the

img

is updated

The script searches in the

source

media

src

srcset

img

src

srcset

picture

img

src

Server-side scaling/cropping tool

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.

Take a look at the demo.

Installation

Manually

• Download picturePolyfill from GitHub
• Include the minified file in your project script directory

Using bower

You can install the latest version of picturePolyfill using bower

bower install picturePolyfill

Inclusion

You can either include the

script in the

section of your

pages, OR just before the closure of the

tag.

In the

head

section

    ...
    <script src="picturePolyfill.min.js" defer></script>


    ...

Note: Including the

defer

script

At the end of the

body

section

    ...


    ...
    <script src="picturePolyfill.min.js"></script>

Execution

PicturePolyfill executes either automatically and by code, calling the parse() function.

• it executes automatically at page load, on the whole

  document

• it executes automatically at browser resize, on the whole

  document

• it can be manually executed, if you:
  • call

    picturePolyfill.parse()

    to execute it on the whole

    document

  • call

    picturePolyfill.parse(element)

    to execute from the

    element

    DOM node below

After DOM has changed (AJAX calls, etc.)

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

picture

picturePolyfill.parse()

picturePolyfill.parse(element)

Calling

picturePolyfill.parse(element)

element

Browser support

PicturePolyfill supports all modern browsers and down to Internet Explorer 7.

• On Modern Browsers, Internet Explorer 10 and above: the images will be loaded depending on the matched media query
• On Internet Explorer 7 to 9: the content of the

  data-default-src

  attribute will be used to reference the image source.

Size and delivery

Currently,

picturePolyfill.js