This lesson is all about image optimization.
But you might be asking what is image optimization 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 them and understand page content.
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 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.
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 of 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 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.
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, depending on the plugin, some features might only be supported by the Pro version.
For new image uploads on your site, you might want to consider using modern image formats.
This plugin has been created and is managed by the WordPress performance team.
And basically converts images to more modern formats such as WebP or AVIF during upload.
In this example, I am going to install and activate the EWWW Image Optimizer plugin.
Once activated, we can go to Settings and we will see an option that says "Optimize Local Images".
And if you scroll down, you will see more options that come with the premium package.
But if we make our way to media, we can click on Bulk Optimize and then scan for unoptimized images.
And there we can see we have 184 images to optimize and there are some more options on the right.
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 and you will notice the width automatically updates.
Next, I will go to Compress and save the image as a WebP file.
And bottom right, we can see that this file size has been reduced by 97%.
Finally, you also have the option to use image editors such as Pixlr, Photopia, Gimp or Canva.
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 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.