Responsive, Art Direction, WebP & Lazy Loading

Responsive, Art Direction, WebP & Lazy Loading

It took some doing but I eventually came to a suitable solution for “Displaying an image”.

20 years ago it was the easiest thing to do, every web designer had an image on there page within the first few hours of starting.

Now, its come to this….

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->

<source type="image/webp"
        srcset="image-640.jpg.webp 640w,
image-750-v2.jpg.webp 750w,
image-1600.jpg.webp 1600w"
sizes="100vw"/>

<source srcset="image-640.jpg 640w,
image-750-v2.jpg 750w,
image-1600.jpg 1600w"
sizes="100vw"/>


<!--[if IE 9]></video><![endif]-->
<img src="image-1600.jpg" />
</picture>

And supporting Javascript

https://scottjehl.github.io/picturefill/ : provides a polyfill for browsers that do not support the picture element.
https://github.com/HotCustard/Lazyish : Simple lazy loading.

Why?

The above solution gives us a lot more than just an image. It allows browsers to choose the best image based on the viewport width.

I have chosen my image sizes like so.

640w fits at 100% width on iPhone4 & 5 at 2 x pixel density.
750w fits at 100% width on iPhone6 & 7 at 2 x pixel density.
Larger displays get the 1600w image.

You can of course add as many widths as you want.

The other big advantage is “Art direction”. This refers to choosing which part of the image to show at each size. As shown below.

Art Direction example

The aspect ratio isn’t fixed either. My 640 wide images are squares, my 1600 wide ones are landscapes.

 

WebP Images

The picturefill polyfill allows us to supply a webP image source, for browsers that support the new image format.

My tests show webP can make some quite significant image file size reductions without a loss of quality.

0 Comment

Leave a Comment

Your email address will not be published. Required fields are marked *