Optimizing WordPress Image Scaling for a Better Performing Website

In my previous post discussing the importance of serving appropriately scaled images on your web pages, let’s delve into how WordPress handles image scaling.

The Problem

When you upload an image to your WordPress media library, the default behavior is for WordPress to automatically generate three downscaled versions of that image. For example, if you upload an image sized 2048 x 1536 pixels, WordPress will create a thumbnail (150 x 150 pixels), a medium-sized version (maximum width and height of 300 pixels), and a large version (maximum width and height of 1024 pixels).

Now, consider a scenario where you have a card on your site that is 300 pixels wide, and you need to place an image in it. While you could use the original full-size image, it’s not optimal because it will only be displayed at 300 pixels wide, resulting in unnecessary resource consumption. Instead, this is an ideal situation to utilize the medium-scaled image size.

However, if you have a card that is 600 pixels wide and you want to use an image that spans the entire width of the card, the medium image size is inadequate. Enlarging it to fill 600 pixels will make it appear pixelated. The next available scaled image size, large (1024 pixels), is too large for the container, although it’s still better than using the original full-size image.

The Solution

To address this, you can generate a new scaled image size tailored to your specific needs. Here’s how you can do it:

In your functions.php file, include the following code:

/**
 * Register new image sizes
 */
add_image_size('image_size_600', 600, 600);

The first parameter is the name you choose for your new scaled image, the second parameter is the image width in pixels, the third parameter is the image height in pixels, and the fourth parameter (not used in the example above) is for image cropping.

For more details about this function, refer to WordPress add_image_size function.

Once you’ve added your new custom-scaled image size, you can use a plugin like Regenerate Thumbnails to process the images in your media library and create new images of that scale. Subsequently added images to your media library will be automatically scaled.

Now, you can serve appropriately sized images according to your site design requirements.

Caution

Keep in mind that each time you add an image to your media library, three additional versions are created by default. Introducing new image sizes means more versions for each image stored on your server, potentially bloating the size of your media library. Therefore, use this feature strategically to avoid unnecessary increases in server storage.