Image Optimization

Optimizing images is an easy way to improve the performance of your WordPress website without requiring any coding skills! In this session, we’ll talk about:

• What image optimization is, and why do we need it
• How you can optimize your images
• Tips, methods, and tools

Learning outcomes

1. Identify the advantages of optimizing images.
2. Editing a file name and adding alternative text.
3. Choosing the correct image type.
4. Optimizing images using a variety of methods.

Comprehension questions

1. How many different ways are there to optimize images for your website?
2. Why is it important to change the file name before adding an image to your Media Library?

Transcript

Welcome to Learn WordPress. Today’s session is all about image optimization. But you might be asking what is image optimization. Image optimization maintains the balance of image quality while reducing file size. It is the process of delivering high-quality images in the ideal format, size, and resolution to increase user engagement. It also involves accurately labelling images so search engines can read them and understand page context.

Before moving forward, let’s briefly talk about the advantages of image optimization. Image optimization will help you improve page loading speed, the user experience, SEO, and it doesn’t require any development skills. Image optimization clearly has a domino effect. If your images load quickly, it will increase user engagement and then lead to improved search engine rankings.

So how do we optimise images? Firstly, we need to change the file name of an image before uploading and then add alternative text. Secondly, make sure you choose the correct image type and then we can also scale or crop an image, and lastly, compress the image file. So make sure you change the file name of an image before uploading it to your Media Library and remember to add the alt text.

When you add an image to your Media Library you can open it up and top right it says Alternative text. The alt tag is simply a brief text description of an image but it explains the content of images to website users when a graphic can’t be loaded. It also allows search engines to better crawl and rank your website and it also helps visually impaired users to understand the content on a page. It is also important to note image SEO starts with the file name. You want a search engine to know what the image is without even looking at it so use a focused key phrase.

WordPress lets you upload images in several formats. Most commonly images are saved as JPG, PNG or GIF. JPG is usually used for images of people and objects, PNG is a good option for graphics and illustrations, and GIF is best suited for animations. Lastly, we are going to look at four methods to optimise images. Firstly, you can alter images using your media settings. Secondly, you can install a WordPress plugin or you may decide to use a web-based tool or image editing software.

Before we look at how to edit an image within the Media Library, let’s make our way to Settings and click on Media. Keep in mind that WordPress saves four different sizes of an image when you upload it to the Media Library. The original size will keep its dimensions and the other three sizes listed below will not exceed the maximum heights set. And I will show you how this works when we go to one of the pages that I’ve created. I’ve added the same image three times with the sizes that WordPress provides: the thumbnail, medium size, and large size, and if you click on image size in your sidebar settings, you will see there’s also a fourth option; full size.

Now if we would like to optimise this image, we need to make our way to the Media Library. Open the image. Firstly, you will notice that the file type is JPG, and secondly, I’ve already added the alt text. Then we will also notice the file size is 432 kilobytes and the dimensions are 2560 by 1708 pixels. To edit the image, click on Edit Image below and now we can go ahead and scale the image top right. Once you’ve entered your new dimensions, click on Scale. Now we can return to view the details of the image and we will notice that the file size decreased and the dimensions display the new dimensions we set. If we go back to edit the image and we’re not happy with the changes, we can click on Restore original image and it will discard any changes made.

Another option you have is to crop the image and once cropped we can save it, and now we will notice the file size and the dimensions have been updated. Secondly, you may wish to use a WordPress plugin that does all the work for you. To add a plugin, let’s make our way to Plugins. Click on Add New, and then type image optimization in the search block. Now you will notice there are many different plugins to choose from. Some plugins worth exploring are Imagify, Image Optimization and lazy load by Optimole, Smush or EWWW Image Optimizer.

I’m going to go ahead and install and activate the EWWW Image Optimizer plugin, and once installed, we can go to Settings. Select Speed up your site, and in this case, I will continue with the free mode. Then there are recommended settings. Number one is Remove metadata. This will remove extra information about the image and lazy load is a really cool setting where a page only loads the section being viewed and delays your other resources from populating until they are needed. And when you’re ready, click Save settings and Done. Now we can head back to the Media Library and click on the List View. Here you have the option to optimise images one-by-one that’s already been uploaded to your site before you installed the plugin or if you click on Bulk optimise you have the option to update all your images simultaneously. But please note, at the top, it says Bulk optimization will alter your original images and cannot be undone. Please be sure you have a backup of your images before proceeding. But what happens if you upload a new image after you’ve installed the plugin? Well, let’s add a new image and when the image has been uploaded, you will notice it has already been compressed and optimised without doing anything. So the right plugin optimises images on your behalf.

Next, let’s explore some web-based tools where you can optimise the image before uploading it to your WordPress site. Some options worth considering are tinypng.com, tiny-img.com, kraken.io and squoosh.app. Let’s see how tinypng.com works. Upload the image from your computer and once uploaded and compressed, you will notice that the file size has been reduced by 59%.

Finally, you also have the option to use image editors such as Adobe Photoshop, Gimp, or Preview, which is built into macOS. You might be asking what is an optimal size for use in WordPress. Well, it depends on how you will use that image. 1200 by 628 pixels is a good size for header images. For other images, the optimal size is at least 640 by 480 and up to around 1024 by 768 pixels. I trust this information has been helpful and that you will find the right method that works for you. Visit Learn WordPress for more tutorials and training material.