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

Optimising Images in WordPress

By Steven Jones

Made with Slides.com

Optimising Images in WordPress

There are various techniques you can use to optimise images in WordPress so images are loaded appropriately and quickly.

  • 3,646

More from Steven Jones