High Performance Images in WordPress

High Performance Images in WordPress

WordCamp London April 2016 by Keith Devon

About me

Keith Devon

‣ Born in Canada, raised in Northern Ireland, living in Kent, UK

‣ WordPress developer for 6 years

‣ Co-founder of Highrise Digital

@keithdevon

https://highrise.digital

The problem

The problem with images

▸ Too many

▸ Too big

▸ Device pixel ratios (DPR)

The problem

Average web page content weight distribution

3%3%

5%8%

16%64%

Images ScriptsVideo FontsStylesheets HTMLOther

http://httparchive.org/interesting.php#bytesperpage

The solution

How can we fix our image problem?

▸ Image sprites

▸ Icon fonts

▸ Choosing the right format (.gif, .png, .jpg, SVG, etc.)

▸ Image optimisation (size and compression)

▸ Lazy loading

▸ Responsive images

The solution

How can we fix our image problem?

▸ Image sprites

▸ Icon fonts

▸ Choosing the right format (.gif, .png, .jpg, etc.)

▸ Image optimisation (size and compression)

▸ Lazy loading

▸ Responsive images

Image optimisation

Image optimisation

▸ Reduce file size of image

▸ Lossy - eliminates some pixel data

▸ Lossless - compresses pixel data

▸ No single best configuration - depends on image

▸ Online tools available

Original iPhone image4032 x 30242.1 MB

Lossless compression4032 x 3024 1.89 MB (-6.06%)

Lossy compression + resize 1200 x 900 226.19 KB (-89.05%)

Lossy compression4032 x 3024 1.71 MB (-15.13%)

Image optimisation

Kraken.io

▸ Free and paid versions

▸ Lossy or lossless options

▸ WP plugin available

Lazy loading

Lazy loading

▸ Loads images as they come into view

▸ Saves on initial page weight and HTTP requests

▸ Relies on JavaScript

▸ Lots of JS plugins available

▸ WP plugins available

Responsive images

What are responsive images?

▸ RICG

▸ <picture>

▸ srcset=“”sizes=“”

Responsive images

What are responsive images?

▸ RICG

▸ <picture>

▸ srcset=“”sizes=“”

Responsive images

srcset and sizes

▸ Used to save bandwidth

▸ Appropriate image size depending on context

▸ Browser has final control

Responsive images

srcset

<img src="small.jpg"

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

alt="A tasty potato">

Example 1

Viewport width = 320pxPixel density = 1Chosen image* = small.jpg

Example 2

Viewport width = 320pxPixel density = 2Chosen image* = medium.jpg

* Probably! (the browser decides)

Responsive images

sizes

‣ Tells browser the width that the image will be displayed

Responsive images

sizes

<img src="small.jpg"

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

sizes="33.3vw"

alt="A tasty potato">

Responsive images

sizes

<img src="small.jpg"

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

sizes="33.3vw"

alt="A tasty potato">

Responsive images

sizes

<img src="small.jpg"

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

sizes=“(min-width: 640px) 33.3vw,

100vw”

alt="A tasty potato">

Caniuse screenshot

http://caniuse.com/#search=srcset (02/04/16)

Responsive images

Responsive images in WordPress

▸ Started with the plugin from RICG

▸ Added to core in 4.4

▸ Adds srcset and sizes support to content images

▸ New functions

▸ New default image size (‘medium_large’) 768px w

▸ No <picture> support

Responsive images

Using responsive images in your theme

$img = get_field(‘image’); // get image from ACF field $img_id = $img['ID']; $img_src = $img['sizes']['archive']; $img_meta = wp_get_attachment_metadata($img_id);

$image_html = '<img src="'.$img_src.'" alt="'.$img['alt'].'" />’;

echo wp_image_add_srcset_and_sizes ( $image_html,

$img_meta, $img_id );

Responsive images

Using responsive images in your theme

Result

<img src="http://potato-passion.com/media/potato-on-table-282x212.jpg" alt=""

srcset=“http://potato-passion.com/media/potato-on-table-300x225.jpg 300w, http://potato-passion.com/media/potato-on-table-768x576.jpg 768w,

http://potato-passion.com/media/potato-on-table-1600x1200.jpg 1600w, http://potato-passion.com/media/potato-on-table-770x578.jpg 770w,

http://potato-passion.com/media/potato-on-table-282x212.jpg 282w,

sizes="(max-width: 282px) 100vw, 282px">

Responsive images

Using responsive images in your theme

Other thoughts

▸ Customise the ‘sizes’ output using wp_calculate_image_sizes() filter

▸ Default is better than nothing

Responsive images

wp-lazysizes

▸ The daddy of image plugins

▸ Lazy loading AND responsive images

▸ Works out ‘sizes’ attribute for you

▸ https://github.com/aFarkas/wp-lazysizes

▸ Caveat: I haven’t used this in production yet!

Summary

What did we learn?

▸ We have an image problem

▸ We have the tools to solve it!

▸ Optimise your images

▸ Lazy-load your images

▸ Use responsive images

THANKS!@keithdevon