Mastering Image Optimization in WordPress

When building and maintaining WordPress websites, it’s important to find ways to improve site performance and decrease page load times. This helps reduce bounce rates and increase rankings on search engines.

There are several ways of achieving performance through a WordPress site’s theme and plugin code – for example, minifying JavaScript, CSS and images. There’s also server based configuration options – for example, enabling caching, or using a WordPress Plugin to help cache static content.

However, we can’t control the content – specifically images – that clients will add to their WordPress web site. Images may be uploaded in their original form, leading to site performance issues and increasing page load times.

In this article we will explore different ways of optimizing JPEG and PNG images, which are uploaded by clients and site owners into WordPress.

Theme Image Sizes

When a WordPress user uploads an image, WordPress provides two functions which we can use to create copies of the original image, at specific dimensions. This is useful where we want to output an image at a specific size within our theme.

Thumbnail, Medium and Large Sizes

Within the WordPress Administration, under Settings > Media, there are three predefined image sizes: thumbnail, medium and large. Each can have their own dimensions set.

Because WordPress will always resize images to these sizes (resulting in 4 images being stored – the original, thumbnail, medium and large sizes), it’s worth setting these first and using them within your WordPress Theme where possible.