WordPress comes with a few set image sizes out of the box, and most of the time these will get the job done. However, if you’re serious about WordPress development, particularly if you are looking to optimise your images for SEO, then it’s worth taking a look at custom image sizes. It’s actually pretty simple when you know what to do.
The first thing to think about is the difference between using custom image sizes, and simply resizing your images in CSS. Many web images, particularly with responsive web design, will be resized dynamically via CSS, and that’s a great tool to use. However, the downside to this is that sometimes you can end up loading a needlessly large image, which is then shrunk down to the correct size. In terms of your website load time, and hence your SEO, this ads unnecessary delay and can result in your website getting penalised by Google and subsequently pushed down the search engine results pages (SERPs).
Most web developers won’t see this as a big problem, as they tend to upload the original image in the optimal dimensions anyway. However, with the explosive growth of WordPress and other CMSs, it’s increasingly common for clients to upload their own images, and you can’t just assume they have the knowledge and software required to resize all their images before uploading. This is where WordPress’s custom image sizes really come into their own. By setting a custom image size anywhere that a client may want to upload their own image you control the exact dimensions (and cropping!) of the image that is inserted into the page.
So how do we do this? Firstly, you need to enable custom image sizes by adding this to your theme’s functions.php file:
add_theme_support( 'post-thumbnails' );
Once you’ve set this up, you just need to define your custom image sizes. Again, you need to add some code to your functions.php file. Here are a couple of examples of new image sizes that we could add:
add_image_size( 'mid-thumb', 250, 200 ); // This will soft crop add_image_size( 'small-thumb', 80, 80, true ); // This will hard crop
Let’s take a quick look at what this does. The first part of the code is a PHP function called add_image_size, followed by the options, or arguments, in brackets. These arguments are how you set the parameters of your custom image size. The first number is the width, in pixels, of your image, and the second number is the height. Finally, you have the ability to set whether the image will be hard cropped (by including the word true) or soft cropped. Soft cropping will retain the specified width of the image and try to match the height, but without distorting the image. This means that you may end up with several images that use the same custom image size each having varying heights but the exact same width. Hard cropping will literally cut away any parts of your image that don’t fit into the specified dimensions, so you end up with exact images sizes everywhere that the custom image size is used, but at the cost of sometimes chopping off more than you anticipated!
Once you’ve decided on your image sizes you will need to insert them into your theme’s template files wherever you want the images to show. It’s much the same as inserting any other WordPress image, though with a slight tweak:
<?php the_post_thumbnail( 'your-custom-image-size' ); ?>
You’ll notice that the above PHP references ‘your-custom-image-size’ – this is the name of the custom image size that you specified in the arguments for the add_image_size function above. For example, if you wanted to insert an image that was 80 x 80 pixels, you’d insert the following code:
<?php the_post_thumbnail( 'small-thumb' ); ?>
However, doing this likely won’t be enough, especially if you are making changes to your custom image sizes and reloading your pages to test. Whenever you upload an image to WordPress, the CMS will automatically create several different copies of the file in various sizes – you can then insert these as ‘thumbnail, ‘small’ or ‘medium’ sized images via the content editor. Custom image sizes work in the same way, but only once you’ve told WordPress about them by adding your sizes to your theme’s functions.php file. This means your custom image sizes will only work for images that are uploaded after you add your specified sizes to the functions.php file, as WordPress won’t have created the necessary image copies. One way around this is to just upload a new image each time you want to test out any new custom image sizes, but that might get pretty cumbersome, and is no use for images that are already in your media library.
Fortunately, there is a simple solution to this. You can use a plugin called Regenerate Thumbnails, which will go through every image uploaded to your website and generate a fresh set of thumbnail images for each one, including your custom image sizes. Bear in mind that this can take some time to run, especially if you have hundreds or even thousands of images in your media library, but it should eventually regenerate all the sizes you need.
That’s all there is to it – as a final tip, try to make sure you’d happy with all your custom image sizes before you regenerate your thumbnails, as having to continually regenerate huge numbers of thumbnails each time you modify your custom image sizes might get pretty tiresome!
