Images are one of the most important elements of websites. But more important is to optimize images properly to have a better user experience.
Websites with bad image optimization will have many issues and it will have an impact on the website’s user experience and speed.
Fortunately, with WordPress, image optimization is not a hard thing to do and there are many tools that can help you to optimize images and make your website faster.
Table of Contents
Why Image Optimization Matters
Websites use many images or graphics for beautiful design. And all the images must be very high quality. Because of that, many times images are the number one reason for slow website loading time.
And slow loading time is a problem and can cause several issues. So, when you building websites, you must always try them to be fast for a better user experience.
That’s where the importance of image optimization comes in. No matter what hosting, CDN, or caching plugin you use. If you don’t have a good optimization for images, it will still slow your website down.
With WordPress, you have plugins and other tools to optimize images but in this tutorial, I want to show you the two ways of image optimization.
Two Methods Of Image Optimization
Of course, there are many ways for image optimization for WordPress websites but I will show you the two ways.
Also, the two most important parameters to pay attention to when optimizing images are:
- Image Resolution – Resolution is measured with pixels. For example, 1920×1080, 700×350.
- Image Size – This is the actual size of the image and if possible, it should be under 1MB.
The first way is much easier and perhaps most of you will like that one because it requires minimal manual work. Also, it can be great for big websites with lots of images.
Also Read: Best Gallery Plugins
But the second way is my favorite one for image optimization. This method is especially great for blogs.
I hope you will find this tutorial useful and it will help you to optimize your websites and make them faster.
Method 1: Optimize Images With Plugins
The first method is to use plugins and it’s the easy way. You install plugins and the optimization process will be automatic.
There are several good plugins for image optimization. These plugins can compress and reduce image sizes, properly resize image resolutions to different screen sizes, etc.
Optimole
The first plugin you can use is Optimole which is a really powerful plugin. This plugin can do many things but its power is in compression, scale, and formating.
Optimole will compress images and reduce size. And the best thing is that image quality will be the same. You won’t see the difference between the original and compressed image.
Optimole will scale images properly. It will resize images depending on screen size and its parent element. This will increase load speed.
And it will convert images to WebP format. WebP is a next-gen image format that is lightweight and loads faster than JPEG or PNG.
Smush & ShortPixel
Other great plugins to optimize images are Smush and ShortPixel. They also compress images and have lazy load features. However, lazyload is built in WordPress from version 5.5.
These two plugins also have WebP conversion capabilities. So, you can use any of these plugins. Also, they use CDN for images which will have a good impact on website load time.
But the free versions have a limited number of options and for the full features, you should consider buying the pro versions.
Pros & Cons
Like with everything, this method has its advantages and disadvantages. But for some people, it might be the best solution.
The advantages of plugins are automatic optimization, no manual work, and great results.
But you have to buy them for better performance, sometimes plugins may cause some minor issues, and also many plugins can slow websites.
Method 2: Optimize Images Manually
Now, the second method is my favorite and I use it every time I can. It needs manual work but the results are great. Although it can work with every type of website, I think this method is the best for blogs.
Note: Before you implement this method, you should always have a website already built. You have to have pages, post archives, and single post pages already designed to your liking.
There are only five easy steps to manually optimize images.
Let’s start.
Step 1: Set WordPress Media Sizes
The first thing to do when optimizing images is to set media sizes. As you may already know, when you upload images, WordPress makes 3 versions – large, medium, and thumbnail.
So, in the database, there will be four versions of one image – the original image and three WordPress versions. But there can be more versions depending on a theme or page builder.
Also Read: Top Minimalist WordPress Themes
So, we need to set custom media sizes. Go to Settings > Media and there you will see the default sizes for WordPress media.
Don’t worry about medium and thumbnail sizes. I don’t change them. The large one is the most important. And also height can be anything. What we want to pay attention to is the width of an image.
For this tutorial let’s make the large image size to 900×600 and then save changes.
Step 2: Upload Image & Check Size
As long as we’ve set custom sizes, now it is time to upload images, find out about sizes, and then optimize images.
I will show how to make the correct sizes for featured images and images that are in the post. But it can work with images on different pages too.
Now you need two images – for the featured image and for the post image. You can download high-quality images from Unsplash. The width of the image should be more than 1000px.
Also Read: Gutenberg vs Elementor Speed Test
Next, create a demo post, set one image as a featured image, and upload another one as a block in the post. We want to know the correct sizes for both images.
Now we want to know how many versions did WordPress created. For that, we need to navigate to the uploads directory.
If your hosting uses cPanel, go to File Manager and in the public_html directory go to wp-content > uploads and here you will find all the images. There might be another folder of an upload year and month.
Alternatively, you can use the File Manager plugin to navigate through the files and find the images folder that way.
Now, your image versions could be different depending on a theme but here is mine.
As you can see, WordPress created additional five versions of a featured image and in total there are six.
- Feature – Original size
- Feature 1536×1024 – Theme size
- Feature 900×600 – The custom large size we set earlier
- Feature 768×512 – Theme size
- Feature 300×200 – WordPress medium size
- Feature 150×150 – WordPress thumbnail size
The original size of the image was 1920×1080 and WordPress created five other versions with the same ratio. But we don’t need that many versions. We only need three.
Pay attention, although we set the large size to 900×600 and the medium size was 300×200, there is another one between them – 768×512.
And that is the custom size of the theme (Blocksy in my case) for the featured image. That means that my featured images must have exactly that size. However, an important size is a width, height can be smaller or bigger.
Now, as we know the exact size let’s upload a new featured image with the size of 768×400.
Look what happened. Because I uploaded the exact size that my theme required for the featured image, there are only three versions of the image – original, medium, and thumbnail.
You can use this exact method to post images. In my case, featured and post images needed the same size but different themes may have different sizes.
Step 3: Resize WordPress Media
Now as I know the exact size of images I need, I will go and change the WordPress media size for the large images.
Instead of 900×600, I will set it to 768×400 and from now on, there always be only three versions of one image. This will reduce my database size and will have more disk space.
And if you do this correctly and test your website on GTmetrix, there won’t be a ‘properly size images‘ issue.
But this step may not be the same for everyone. For blogs that use images only on blog posts, this step works.
If you have images on other pages such as home or about, you can do this step for every section and set the WordPress media sizes accordingly.
The goal is to minimize the number of image versions. You should have as few versions as possible in your database.
Step 4: Compress Images
Now as we know the size of our images and scaling is not a problem anymore, it is time to compress our images to reduce their size. This will also reduce the load time of a website.
And instead of using a compression plugin, we will use another tool that can be more powerful.
The best tool for image compression is TinyPNG. It is simple to use and can compress an image up to 70% of its size without losing the quality.
You just upload images on the website and it automatically compresses them. Then you can download them in a ZIP format.
Other similar tools for image compression you can use are:
However, sometimes compression doesn’t work as well on PNG as on JPEG format images. I almost never compress PNG images or images that have vector graphics. But you can test it yourself and it may work for you.
Step 5: Convert Images To Progressive JPEG
We scaled images properly, compressed them, and reduce the size without losing the quality. To optimize images more we need to accomplish the last step which is to convert them to Progressive JPEG.
Progressive JPEG is a differently encoded image than baseline or regular JPEG. It is smaller in size, loads differently, and will have a good impact on load speed.
When a regular JPEG loads, you may see a third of an image, then half of it, and then the whole image.
But when Progressive JPEG loads, it’s blurry or pixelated until the load is fully completed.
So, it is a better user experience and can reduce the load time. Also, it’s a little smaller in size than a regular JPEG.
This step is not mandatory, but I like to reduce the image size as much as I can.
And the tool that will help you to convert regular JPEG to Progressive JPEG is Jpeg.io. Works like TinyPNG – just upload an image and it will convert it. This tool works with JPEG, PNG, GIF, SVG, and more.
After you complete all the steps, you will have properly sized, high-quality images, that load fast.
Pros & Cons
Although it looks time-consuming to optimize images this way, it’s not. When you get used to it, you will do it fast. Also, scaling is done once and the only thing you have to do repeatedly is compressing.
It has many advantages – it’s free, it’s powerful, you can heavily reduce image sizes, and you don’t need any plugin. Less plugin equals lightweight website.
The only downside of this method is that it’s all manual. But you will get used to it pretty soon.
I personally use the second method. I’m very happy with the results and doesn’t take too much time. Also, it allows me to use fewer WordPress plugins which is always a good thing.
Conclusion
Now you know how to optimize images for your WordPress website. Both methods work very well. The only difference is in the approach. If you want to have a faster website, you need to start image optimization.
Also, both methods can be used together. You can install one plugin and then use tools like TinyPNG or Jpeg.io for more compression. Also, you can set image sizes once with the second method and never touch it again.
