WordPress has rich image processing capabilities that are used by the WP core and third party plugins. Uploaded images can be scaled and cropped to different sizes and also rotated and flipped. Most importantly, the image editor is used when generating different image variants from uploaded images, called thumbnails in WordPress. These thumbnails are used in WordPress admin interface and also in the WP theme that is visible to the end users.
Themes often specify new image sizes for things like hero images and user avatars so end users will get images that are correctly sized to the element. This ensures that users will not have to download huge multi-megabyte images for an element like 64x64 author avatar. The image thumbnails are especially useful when it comes to responsive images. Because there are so many different screens sizes and densities, you might end up with dozens of image variants. Having many variants can significantly slow down the upload process.
Under the hood, WordPress uses two alternative libraries to do the image processing: GD and ImageMagick. These are tried-and-true, stable libraries but might not always be the most performant, especially when it comes to memory use. For example, GD and ImageMagick store images they process in an uncompressed format which can lead to memory exhaustion when processing large images.
Luckily for us, there is a third alternative library for processing images: VIPS. Originally a research project sponsored by EU in the 90s which was created for digitizing paintings, VIPS is optimized for low memory and CPU use. Back in the day the top-of-the-line workstations had only 64 megabytes of RAM and a 25 MHz processors. Because the project was originally created with these constraints in mind, its performance is far superior to GD or ImageMagick, sometimes several times faster.
So, how can we make use of VIPS in our WordPress project? First we need to install VIPS on our system. It’s pretty easy, just check your package manager. On an Ubuntu/Debian system this can be done using apt install vips-dev. Next we need to install the PHP bindings for VIPS. This is a PHP extension that allows us to use VIPS from our PHP code. You can install the extension for PHP extension repository using pecl install vips . Then we need to enable the PHP extension in our PHP installation by adding the line extension=vips.so in our php.ini .
Now that we have VIPS working in our PHP installation, we can create a WordPress plugin that replaces the default WordPress image editor with one powered by VIPS. The WordPress image editor is an abstract class that defines methods such as resize(), crop() and rotate(). This class has two implementations in WordPress core that extend it, WP_Image_Editor_GD and WP_Image_Editor_Imagick. These classes implement these with GD in ImageMagick respectively.
We simply need to create a class in our plugin called WP_Image_Editor_VIPS that implements these methods using VIPS. I’ve saved you the time and effort and created one here. After we have the class ready, we’ll simply need to tell WordPress to use the class for editing images if VIPS extension is loaded.
add_filter('wp_image_editors', function($image_editors) {
if (extension_loaded('vips')) {
array_unshift($image_editors, 'Image_Editor_Vips');
}
return $image_editors;
}, 9999);Now we have image processing powered by VIPS in our WordPress project. So, how well does it perform? To test it out, I’ve downloaded top 20 images from Unsplash and ran them through Regenerate Thumbnails plugin. I’ve also added 18 image sizes from a real-life WordPress theme so this will be a good benchmark for image processing. You’ll see the results below.
As we can see, GD is the slowest of the three, but it also uses least memory. ImageMagick is faster than GD, but uses significantly more memory compared both to GD and VIPS. VIPS is clearly the fastest. It is more than two times faster than GD and significantly faster than ImageMagick, but it uses slightly more memory compared to GD. So, in the end, using VIPS is a big win when it comes to both processing speed and memory use.
So, next time you are working on an image heavy site, give VIPS a try. You can download the VIPS Image Editor plugin on our GitHub page.