Images are an important component of your website, which when used right, can help your website engagement and improve its performance. In this section, we will look at some fundamentals of WordPress images and explore the methods to optimise them for your website.

1. Image Dimensions

Images you add to your website are stored in the WordPress media library. The Media Library serves as a repository to store all the media (videos, audio files, etc) that you upload to your website. If you access the backend of your website via an FTP/SFTP client, media files can be found in the wp-content/uploads/ folder. These files are, by default, stored date-wise in the backend. You can, however, change this in the WordPress Settings. 

WordPress offers a simple interactive interface to upload images. By default, WordPress will create four different sizes for each image that you upload:

1. Thumbnail size: 150 x 150 pixels
2. Medium size: 300 x 300 pixels
3. Large size: 1024 x 1024 pixels
4. Full size: the original dimensions of the image are preserved.

These different versions of an image can be extremely useful as different parts of your website may need different sizes of images. In addition, images also need to be resized for optimal and consistent layout across devices.

2. File size and Optimisation

Here’s some guidance to help you decide the best image dimensions. Depending on your website, these may vary:

Make your image sizes as large as they need to be. For example, if the largest image size on your website is 900 pixels, there’s absolutely no need to upload images larger than 900px. Always try to upload your images in the largest size possible.

In addition to the correct dimensions of the images, you must also ensure appropriate file sizes. If an image is too large, it would take up too much space on your server and would also take longer to load, affecting the site’s performance. 

Before you begin uploading an image, check its file size. You should ideally target a file size of 125kb or less. Try to save the image files in a lower quality if it’s too large. There’s a trade-off here between the file size and image quality, and you may need to do a bit of trial and error to achieve the best results. Online tools like Tiny JPG and Compress or Die can be extremely useful in helping you achieve the desired results. 

Another thing to bear in mind while uploading images is setting the alternative text and title for the image. These increase your website accessibility by adding a useful description for viewers with a visual disability. Moreover, it also helps search engines like Google index your website. Your website will have a higher chance of showing up in the search results if you use clear alt texts and relevant keywords. As a rule of thumb, ensure that you add alternative text and descriptive titles for all images on your website. You can easily add or edit these details in the WordPress Media library.

Featured images are basically the visual accompaniment of your blog posts. They help engage the reader and set the tone of your content. The appearance of the feature images depends on how your theme has been designed. While it may vary across themes, the featured image is likely to appear at the top of your blog post. When you share your posts on social media platforms, these are the images that appear as the thumbnail preview of your content. 

Cover images are images that, like featured images, give the website visitors a quick sneak peek into your content and website theme. They are the wide images that can appear at the top of an article/page or at the beginning of a new section on your page. Their appearance also depends on the theme design. However, unlike featured images, they don’t appear in the content preview when the page or post is shared.

While WordPress offers four default sizes for every image uploaded, it might not always be the right size of images you require for your website. You might require a larger image for your blog post or a smaller thumbnail. To achieve this, you can go ahead and edit the default image dimensions in the WordPress settings. 

Here’s the step by step guide to help you change the default image sizes in WordPress:

a) From the WordPress sidebar, hover over Settings and click on the Media option.

b) In the window that opens next, you will see the different dimensions listed against each default image size. You can change these figures to whatever value you prefer. If you set these values to 0, WordPress will use your original image in all its full glory on all devices and locations. This could take up a lot of space and might not be an ideal choice as it would slow down your website and affect its performance.

c) Once you have entered the dimensions, click Save Changes to have the new dimensions take effect.

Note: the new custom dimensions that you have entered will only apply to the images you upload after you have saved the settings. The older images will not be resized automatically. To take care of the older images, you might have to resort to a plugin like Regenerate Thumbnails. Using this plugin, you can generate some or all the older images on your website. You can also delete older resized versions that you no longer need, but you must be extremely cautious while doing so. However, this plugin hasn’t been updated in the last 2 years.

WordPress also allows you to add custom image sizes on top of its default four. Adding custom image sizes can be particularly useful if you have several different image sizes across your website. This will offer greater flexibility and save you a lot of time.

There are two ways to add custom image sizes:

1. Using a plugin
2. By editing the theme files manually

1. Using a Plugin

The Image Regenerate & Select Crop plugin allows you to easily add new image dimensions, and generate resized versions of new uploads while also taking care of older images. The plugin displays two custom buttons in the media library to help you regenerate and crop the images. It also provides details about the image sizes currently in use on the website, and the sizes generated for each image. 

Once you have installed and activated the plugin, you can create new custom image sizes in the WordPress Settings. From the WordPress sidebar menu, hover over Settings and click the Media option. In the subsequent window, you’ll be able to define new custom image sizes that you want on your website.

2. By editing the theme files manually

Here’s some guidance to help you decide the best image dimensions. Depending on your website, these may vary:

The manual method of adding custom image sizes will require you to add a few lines of code to your WordPress theme files. If you’re a complete beginner, you might find this a little daunting but the method is quite straightforward. However, it’s good to take a backup of your website, in case things go awry. 

Once that’s done, follow these simple steps to add the custom dimensions:

a) In the admin dashboard, hover over the Appearance option in the sidebar. From the dropdown, click on Theme Editor.

b) From the files listed in the right sidebar, click on php. 

c) Once the file loads, search for this line of code in the file:
add_theme_support( ‘post thumbnails’ );

d) If you cannot find the line in your file, paste it in and click the Update File button.

e) Now, we need to add the custom dimensions to the WordPress code. To do this, paste this line into the functions.php file:
add_image_size( ‘blog custom image’, 1280, 630 );
Replace the blog custom image string in the single quotes with what you want to name your custom size. The other two parameters are the dimensions of the image size: width and height, respectively.

f) Click the Update File button to save changes.

g) We will now add this new image dimension to our blog posts. To do this, we will have to edit the theme file that contains the post loop for our blog. Generally, it’s the index.php file. In this article we have used the Twenty Twenty-One theme that uses templates to display posts. We found the loop in a template file and edited it. You might have to dig around a little to check how and where the post loop is located in your theme. Be careful when you edit these files as things can go south really quickly.

h) Once the file loads, locate the post loop that displays your blog posts. Once you found the loop, add this line of code inside it:
the_post_thumbnail( ‘blog custom image’ );
Replace the blog custom image string in the single quotes with what you’ve named your custom size (in step e).

i) Click the Update File button to save changes.

Note: The changes you make using the manual method will be lost when you install updates for the theme. To prevent this and preserve your custom settings, always use child themes.

In this article, we discussed WordPress image sizes and how to resize and customise them using plugins and in-built WordPress features. You can use WordPress’ default sizes or add custom image sizes either by editing your theme’s code or using a plugin. If you’re a complete beginner, using plugins might be the easier and quicker route as they will also take care of the older images on your website. 

I hope this article gave you helpful insights about WordPress images and how to manipulate them to ensure optimal website performance.