Optimising Images in WordPress

Tips to speed up the delivery of images

on your WordPress site

Steven Jones

@stompweb

http://www.stomptheweb.co.uk

Issues

File sizes
Image sizes
Delivery Method / Source
Appropriateness

File Sizes

Problem #1

Images are added to WordPress via the media uploader, sometimes straight from cameras. Huge file sizes (and physical sizes) that have no place on the site.

Solutions

Restrict the upload size (WP Image Size Limit)
Resize to a suitable baseline upon upload (Imsanity)
Compress images in the media library (WP Smush.it)

File Sizes

Problem #2

The images in your themes and plugins are quite big and as they are being loaded on most pages on the site they need to be reduced.

Solutions

Use the correct filetype.
Compress your images (CodeKit, online tools)

Image sizes

Problem #1

The physical size of the images the user has uploaded are too big for the designated area on the front-end.

Solutions

Automatically generate correct sizes from master

Natively in WP (add_image_size)
Plugin (WPThumb)

Image sizes

Problem #2

The image served is not the right size for the device. Responsive sites that are retina enabled need to provide correct quality of images.

Solutions

Media queries to serve correct images (CSS Tricks) in themes
Serve smaller image sizes for mobile devices (Hammy) in post content.

Delivery Method / Source

Problem

You're not on super-fast hosting but as images will mostly likely be the largest assets you serve - it is important you can do this quickly.

Solutions

Serve your images from a CDN (CloudFront, MaxCDN)
Serve less images by grouping them in sprites (SpriteCow)

Appropriateness

Problem

We want to avoid loading images when they don't actually need to be used.

Solutions

Be careful with sprites, don't make them too generic
Icon fonts
Lazy loading images (Lazy Load)
Planning in the design phase - mobile first?

Questions?

Steven Jones

@stompweb

http://www.stomptheweb.co.uk