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

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

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

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