Optimizing images on a website is a daunting task. You can choose to use fewer images, compressed images, sprites or svg; the list goes on. One place where many WordPress sites get tripped up is in 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 given when images 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.
Recommended Reading: JPEG Optimization For The Web – Ultimate Guide
How WordPress Handles Images
If you’ve ever inserted an image in a WordPress article you should have come by the image size selector. This lets you insert small, medium and large versions of the images. The actual sizes for these can be modified in the WordPress settings.
Whenever you upload an image through WordPress, it generates versions of these images 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 processing time on the client computer. I think it comes as no surprise that downloading a 600×400 image is faster than downloading a 1200×800 image.
If a larger image is used which needs to be scaled down, the browser needs to take care of 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 be to always use appropriate image sizes. If you need a 440×380 image, then grab 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 all but the most visually directed 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. Featured images however are usually shown at common sizes. For article lists you may use a 178×178 thumbnail, 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 / 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 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, the third, 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 which deal with retrieving media. Let’s look at featured images first. the_post_thumbnail() 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.
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 you’re doing some testing.
Once your thumbnails are regenerated you should see the optimized versions loaded on your site. You can check this out 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.
One difficulty in maintaining an optimized site is responsiveness. When I view an article on the iPad an in-post image of a large size will be downscaled since the maximum width will be 786px or so.
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.
Read Also: 5 Methods To Serve True Responsive Images
Further Image Optimization
As I mentioned in the introduction there are countless ways to optimize images. From sprites to image compression a lot of techniques can be used to decrease the load times which come hand in hand 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 suggest taking a look at Hassle Free Responsive Images which shows you how to add support for the picture element, something you’ll want to use if you want to write your own code.