Image fields

Wherever a user uploads an image in a seperate field, we process it as a responsive image with the srcset and sizes attributes. This means each screen size might be served with a different image size. This will dramatically improve performance, since about 80% of the page load are images.

For content images we are not able to use this technique at the moment. When an image is inserted via an editor we cannot separate the image from the rest of the content.

Images

Example of image.
A cheeky macaque, Lower Kintaganban River, Borneo. Original by Emma Davidson
  <figure>
    <img alt='Example of image.' class='lazyload' data-sizes='(min-width: 64em) 603px, (min-width: 48em) 768px, (min-width: 24em) 640px, 320px' data-srcset='/photos/nature8.jpg 1536w, /photos/nature6.jpg 1440w, /photos/nature12.jpg 1280w, /photos/nature7.jpg 768w, /photos/nature11.jpg 640w, /photos/nature9.jpg 603w, /photos/nature10.jpg 320w' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='>
    <noscript>
      <img sizes='(min-width: 64em) 603px, (min-width: 48em) 768px, (min-width: 24em) 640px, 320px' src='/photos/nature10.jpg' srcset='/photos/nature8.jpg 1536w, /photos/nature6.jpg 1440w, /photos/nature12.jpg 1280w, /photos/nature7.jpg 768w, /photos/nature11.jpg 640w, /photos/nature9.jpg 603w, /photos/nature10.jpg 320w'>
    </noscript>
    <figcaption>
      A cheeky macaque, Lower Kintaganban River, Borneo. Original by
        <a href='#'>
          Casey Black
        </a>
    </figcaption>
  </figure>

When looking at the above example we see the following attributes: class, data-sizes, data-scrset, src and alt.

Lazyload

Most of the images on the website are loaded with lazyload. This means we have a src attribute of a 1px gif image which is the same for all images. This means the DOM is loaded very fast. With the Lazyload JS we check if the image is in the viewport of the user. If that is the case we replace the 1px image with the right image.

No js fallback

You can see there is a large repetition of code inside the <noscript> tag. Whenever a browser doesn't support javascript it will still display the images.

Data-srcset

data-srcset is the equilevant of the srcset attribute, it is rewritten to work with lazyload. This attribute contains a grocery list of resources that the browser can pick from, and the w descriptors tell the browser each resource’s physical dimensions.

Data-sizes

data-sizes is the equilevant of sizes. It is comprised of value pairs, where the first (optional) value is a media condition (a media query without the media type) and the second value is a CSS length.

The browser goes over the media conditions and looks for the first one that matches the current environment (in most cases, “current environment” == current viewport). The second value of the pair (or the first one if the media condition is missing), is set as the pair’s “effective size”, and it describes the estimated display dimensions of the image.

This is the hint the developer has to give the browser in order for it to know which resource to pick.

The effective size of the matching pair is used by the browser, along with the screen’s DPR (and possibly other factors) to figure out which resource would be the best to download and display.

Picturefill fallback

For browser that do not support the img srcset and sizes we use the Picturefill script to add support for these new features.

Content images

Images are scale well by default. For every content image we have set a max-width: 100% and height: auto so that it scales nicely to the parent element.

Description of this image.
  <img src="/photos/animals4.jpg" alt="Description of this image." />