How to Maximize Image Impact with Pre-Defined Sizes for WordPress

Optimizing images on a website can be a challenging task. You can use fewer images, compressed images, sprites, or SVG; the list goes on. Many WordPress sites struggle with defining image sizes, which is a crucial aspect of optimizing content-heavy sites.

Image sizes are vital because images are automatically created according to the sizes defined when they are uploaded. This ensures that even if you have a 3000px wide original image, it is never used if a 600px image is enough. Ideally, a 600px wide space should use a 600px wide image instead of scaling down a larger one.

In this article, I’ll walk you through what image sizes are and how to define them effectively.

Understanding How WordPress Handles Images

If you’ve ever inserted an image in a WordPress article, you should have encountered the image size selector. This feature allows you to insert small, medium, and large versions of your images. The actual sizes for these can be modified in the WordPress settings.

Whenever you upload an image through WordPress, it generates different versions of the image and stores them separately. For example, if you upload a 1200×800 image, WordPress may create 100×100, 600×400, and 900×600 versions. When you insert an image and choose “medium,” the actual medium version will be used, as opposed to a shrunk-down version of the original.

This is hugely beneficial because it conserves bandwidth on the server and reduces processing time on the client computer. Downloading a 600×400 image is faster than downloading a 1200×800 image.

If a larger image is used and needs to be scaled down, the browser has to handle the calculations to make this happen. While this won’t take hours, it may be noticeable on image-heavy websites.

The Right Image in the Right Place

The ultimate goal should always be to use appropriate image sizes. If you need a 440×380 image, then use an image with that exact size from the server. There are two main places where you’ll be using uploaded images: featured images and in-post images. I would advise focusing on featured images first.

In most articles, it doesn’t really matter if an in-post image is 220px or 245px wide. Whichever version you have available would be equally usable. However, featured images are usually shown at common sizes. For article lists, you may use a 178×178 thumbnail, and for article headers, you may use a 1200×600 wide image.

In addition to these, you may also want to keep a separate thumbnail, medium, and large size as defined in the settings to give you easy access to specific dimensions when adding images to posts.

So, what it all boils down to is this: wouldn’t it be great if we had two extra image sizes which we could use for featured images? These image sizes would be created right alongside the rest when an image is uploaded. The good news is that WordPress has you covered with a pretty simple function.

Creating Custom Image Sizes

By using the add_image_size() function, you can define all the image sizes your website needs. Let’s create the two examples mentioned above. Place the code below in your theme’s functions.php file or in a plugin’s file.

add_image_size('featured_thumbnail', 178, 178, true);
add_image_size('featured_wide', 1200, 600);

As you can see, this function takes four parameters. The first parameter allows you to set a name for the size. The second parameter is the maximum width, and the third is the maximum height. The fourth parameter sets hard cropping. If set to true, the image will be created at the exact size you specify.

Once this has been added to your theme or plugin, two new versions of each file you upload will be created by WordPress.

Using Image Sizes

These image sizes can be used in a number of functions that deal with retrieving media. Let’s look at featured images first. The the_post_thumbnail() function is commonly used to display a post’s featured image. The following code can be placed in a WordPress loop:

the_post_thumbnail('featured_thumbnail');

The first parameter of this function allows you to specify the image size to use. Since I’ve specified “featured_thumbnail,” the 178×178 version of this file will be used.

There are a number of other functions, such as wp_get_attachment_image() and wp_get_attachment_image_src(), which also use the image size parameter. Whenever you use such a function, you should always specify an appropriate image size.

Regenerating Thumbnails

If you already have a site in place, you won’t be able to optimize your articles retrospectively just by defining an image size. Image sizes are only taken into account when a new image is uploaded, so they are not applied to images already in the system.

Fear not, the Regenerate Thumbnails plugin will make things all better! This plugin can regenerate the thumbnails for all your images, taking into account all defined image sizes. It can also target a specific image, which is useful if you just have a few or are doing some testing.

Once your thumbnails are regenerated, you should see the optimized versions loaded on your site. You can check this by viewing the source of the image. If you uploaded ‘example.jpeg’ and you see ‘example.jpeg’ as the source for your featured image, something isn’t right. If you see “example-178×178.jpeg,” then all is well; the optimized image is shown.

Responsive Images

One difficulty in maintaining an optimized site is responsiveness. When viewing an article on an iPad, an in-post image of a large size will be downscaled since the maximum width will be around 786px.

The easiest solution is to use a plugin like Hammy. Hammy works based on the content width of your theme (as opposed to the window width of the browser) and can serve optimized images based on that. This is especially handy for mobile users where processing power and bandwidth may be an issue.

Further Image Optimization

As I mentioned in the introduction, there are countless ways to optimize images. From sprites to image compression, many techniques can be used to decrease the load times associated with images. Ashutosh KS has written a great article showcasing 9 WordPress Plugins to Improve Image Performance; I suggest giving it a read!

I also recommend checking out Hassle-Free Responsive Images, which shows you how to add support for the picture element—something you’ll want to use if you plan to write your own code.