Transcript
Introduction
This lesson is all about image optimization. But you might be asking what image optimization is all about. 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 labeling images so search engines can read and understand the page content.
Advantages
Before proceeding, let’s briefly discuss the advantages of image optimization. Image optimization will help you improve page loading speed, user experience, and SEO, and it doesn’t require any development skills. Image optimization clearly has a domino effect. If your images load quickly, they will increase user engagement and then lead to improved search engine rankings.
File name and alt text
So how do we optimize 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. Then, we can scale or crop an image and compress the image file. So make sure you change the file name of an image before uploading it to your media library. Remember to add the alt text. When you add an image to your media library, you can open it up, and at the 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 crawl better and rank your website and helps visually impaired users understand the content of a page. It is also important to note image SEO starts with the file name. You want a search engine to know the image without looking at it. So use a focused key phrase.
Image format
WordPress lets you upload images in several formats. Images are usually saved as JPEG, PNG, WebP or AVIF. JPEG is typically used for photographs and images of people and objects. PNG is suitable for graphics, illustrations, and images with transparency, while WebP and AVIF are excellent choices for optimizing website performance, especially for non-vectorized assets like photos and animations due to their superior compression capabilities. I would also recommend avoiding GIFs as they present accessibility challenges.
Plugin
Lastly, we are going to look at three methods to optimize images. Firstly, you can use a WordPress plugin, or you may decide to use a web-based tool or an image editor. Let’s start with plugins. 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 Modern Image Formats, Image Optimization by Optimal, Smush, or Imagify. Please note that depending on the plugin, some features might only be supported by the Pro version. You might want to consider using modern image formats for new image uploads on your site. This plugin has been created and is managed by the WordPress performance team. It converts images to more modern formats such as WebP or AVIF during upload. I will install and activate the EWWW Image Optimizer plugin in this example. Once activated, we can go to Settings and see an option that says “Optimize Local Images”. And if you scroll down, you will see more options with the premium package. But if we make our way to media, we can click Bulk Optimize and scan for unoptimized images. We can see we have 184 images to optimize, and more options are on the right.
Web-based tools
Next, let’s explore some web-based tools where you can optimize the image before uploading it to your WordPress site. Some options worth considering are tinypng.com, tinyimg.com, kraken.io and squoosh.app. Let’s see how Squoosh works. It’s open source and supports all image formats. Once you add an image from your computer, you can edit or compress it. Firstly, I will click on Resize and then change the height of the image. You will notice the width automatically updates. Next, I will go to Compress and save the image as a WebP file. In the bottom right, we can see that this file size has been reduced by 97%.
Image editors
Finally, you also have the option to use image editors such as Pixlr, Photopea, Gimp, or Canva.
Optimal size
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, an optimal size is at least 640 by 480 and around 1024 by 768 pixels.
Conclusion
I trust this information has been helpful and that you will find the right method that works for you.