Optimising Images in WordPress
Tips to speed up the delivery of images
on your WordPress site
- File sizes
- Image sizes
- Delivery Method / Source
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.
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.
- Use the correct filetype.
- Compress your images (CodeKit, online tools)
The physical size of the images the user has uploaded are too big for the designated area on the front-end.
- Automatically generate correct sizes from master
The image served is not the right size for the device. Responsive sites that are retina enabled need to provide correct quality of images.
- Media queries to serve correct images (CSS Tricks) in themes
- Serve smaller image sizes for mobile devices (Hammy) in post content.
Delivery Method / Source
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.
We want to avoid loading images when they don't actually need to be used.
- Be careful with sprites, don't make them too generic
- Icon fonts
- Lazy loading images (Lazy Load)
- Planning in the design phase - mobile first?