One of the biggest mistakes that most beginner bloggers make is to upload unoptimized images on their blog.
This not only slows down their page load speed but also affects their SEO as Google considers page speed as one of the important ranking factors.
And not to mention the increased bounce rate. People will jump off your site if it’s taking longer to load the page.
How do I know all these?
Well, I made the same mistake while I got started. For the first 5-6 blog posts, I uploaded gigantic images to my blog! I was very happy to see high-quality images on my blog until I checked my website speed.
I was shocked after seeing the results. My website speed was under 20 with a page load time of 9.2 seconds!
I had to take a step back and optimize all those images. Oh, it was very, very, very frustrating!
I don’t want you to make the same mistake and that is why I’ve been writing this guide, to help you understand how you can optimize the images the right way, right from the beginning!
Let’s jump right into it!
First of all, let me explain what exactly an image optimization means.
(Affiliate Disclosure: This post contains affiliate links, meaning if you make a purchase through my link, I may earn a small commission, without any extra cost to you. It helps to keep this little blog afloat. Thank you for your support.)
What is Image Optimization?
Image optimization is about reducing the image file size without compromising the quality of the image.
So, even though the images are small-sized, they are still detailed, clear, and attractive to viewers.
For instance, take a look at these two images that I’ve added below (source: www.pixabay.com )
Although both images look similar, image A has a size of about 277 kB, while image B is just 44 kB in size.
There are quite a number of ways to achieving image optimization, and it’s probably not as difficult as you may have thought.
Note that proper image optimization takes factors such as size, image format, dimensions, resolution etc., into consideration.
Why Do You Need to Do Image Optimization?
If done the right way, Image optimization provides the following benefits:
- Increased Website speed
- Better User Experience
- Boost SEO Ranking
- Increased Conversions
- Low Bounce Rates
If any of the above-mentioned reasons attracts you, then keep reading.
What Is an Optimum Image File Size?
Actually, there is no definite prescribed image file size that you must use for your images
However, I always use the smallest size possible- without bringing down image quality.
In all of my experience, I’ve discovered that the optimum image size is at about 50 kB to 75 kB.
Most times, I try to leave my image file size at about 70 kB, but you should still be fine if it’s a little lower or greater than that.
Now, if you want to use a high-resolution photo for some , an image size of about 150 kB is still not a bad one.
How to Optimize Images For The Web Without Losing Quality
As I mentioned above, the goal of image optimization is to use the smallest possible image size without losing quality!
Here’s the step by step process which I use to optimize images before uploading it to my blog.
1.Choose the right file format
Before starting out on image compression or rescaling, you need to consider what format is best for that particular image you’re working on. Usually, there are three file format types that are commonly used, but note that not all three formats would work all the time.
The three most common image formats are JPEG (otherwise known as .jpg), GIF (.gif), and PNG. All of these formats present different image quality and are individually useful under specific conditions.
For instance, I probably would not recommend GIF image format for huge images, since GIF formats tend to have lesser image quality. Hence, making them suitable for small images or images with some simple designs.
JPEG file format is the most utilized, because it allows more compression, without too much effect on the image quality.
PNG format on the other hand is a more “stable” image format since they don’t degrade in quality. I generally use PNG files where I need high resolution such as site logo, author image or images with some text on it.
In essence, know that each of the file formats has its own merits and demerits, so choose the appropriate file format for your purpose.
2.Identify the appropriate image dimensions for your theme
Image dimension simply has to do with the length and width of the images, measured in pixels.
Before you upload the image to your blog, you’ll need to find out what image dimensions are most appropriate for your blog or website theme.
Here’s how to do it.
First of all, select an image that you’ve already uploaded to your blog. Right-click on the image and click on “Inspect”. You’ll be able to see the image dimensions as shown below.
Once you identify the proper image size for your theme, the next step is to resize the image.
In image resizing, you’re basically reducing the dimensions, so you’ll be touching on the length and width of the images.
What I do most times is to upload the image on Canva and resize it using custom dimensions, but you can also use photoshop or any other photo editing software that would scale down the image size- without slicing the image quality.
If you use the right dimensions at all times, then you’re one step closer to having top speeds on all your webpages.
Note that there is a difference between resizing your images and compressing images.
If you’re going to be compressing your images, then you would be reducing the image file size- without affecting the dimensions ( as seen in figure 1 above).
Note that image compression would always have some effect on image quality. However, if you do it the right way, then the quality reductions should be minimal.
I usually recommend medium level compression, as this tends to significantly reduce image size without obvious changes to the quality.
I’ve mentioned the best tools to compress the images later in this post.
5.Identify poorly optimized images and fix them
If you’ve already uploaded unoptimized images to your blog, it’s important for you to go back and identify those images that are holding you back from achieving faster loading time.
There are two ways you can do this.
First, go to your media library and manually look for such oversized images. This method is time-consuming, so if you have an established blog with 20-30 blog posts, I won’t recommend you do it this way. This is for someone who has only published a couple of posts on their blog.
Another way is to use WordPress plugins such as Shortpixel, which allows you to optimize any pre-uploaded images. This can reduce image size significantly without affecting image quality.
I used this plugin to bulk optimize the images which I had already uploaded to my blog.
Now, notice that this plugin will only compress the images, it won’t resize image dimensions.
So, if you find large size images after compressing with ShortPixel, then manually resize them and upload them again.
I know it’s time-consuming but it’s worth every second of your time.
How to Optimize Images for SEO
Now, the next step is to optimize your image for SEO. The following are some proven ways by which you can do this.
1.Insert ALT text
Yes, “images probably speak more than a thousand words”, but most search engines still want you to add a description for the images.
In fact, ALT text is also primarily used by the Google algorithms for determining what images you have added.
It’s also some type of provision for visually impaired persons who can only read texts, as well as for people with text-only browsers. Note that ALT texts don’t have to be very long, as they are ideally short but concise.
2.Write meaningful captions
Adding a meaningful caption makes your whole content more engaging and pleasant to read.
Usually, image captions tell a little more about the image or diagram, and it may be the needed clue for the reader to understand it. As little as they may seem, they are important for SEO rankings as they improve user experience.
3.Give source credit
You can get into legal trouble if you use a photo from someone’s website without their consent. Hence, it is really important to give source credit.
Asides the fact that you’re referencing the original owners of an image you’ve adopted, you’re also showing readers that your content agrees with other people’s findings and observations.
Hence, giving source credits saves you from legal trouble, while also helping you build trust with readers.
4.Use an image sitemap
Another way to optimize images for SEO that I’ve found very important is the use of image sitemaps. Image sitemaps allow the Google search engine to see all of the images you’ve used in any web content.
If you already have an XML sitemap, then you can simply add your new images to the sitemap.
Best Image Optimization Plugins
Now, if you’re still not sure of how to go about your image optimization goals, then here are a few plugins that I’ll recommend to get you started:
ShortPixel is basically an image compression tool, that ingeniously reduces image file size, without tampering with the image quality. It is one of the best options that I think is reliable enough to do all the basic image compressing you may want to do. I currently use and recommend ShortPixel.
You can compress 100 images/month for free using ShortPixel.
They also have paid plans available, if you need to compress more images. You can also buy one-time credits, which I believe the option for someone who already has Thousands of unoptimized images on their blog.
Firstly, one thing I love about the WP Smush is that it is easy to use, and yet very effective. Note that it is particularly designed for WordPress users, and it is actually a cloud picture resizing tool.
Once you have it installed, the plugin adjusts image size for every image you upload. Another advantage of using the plugin is that you probably wouldn’t even need to configure or do any much setting before it gets to work.
Imagify is also a great image optimization plugin, that I’ve not had any issues with. The plugin automatically optimizes large images uploaded to your WordPress, without reducing the quality.
If you’ve been running your WordPress page for a while- with tens and hundreds of poorly optimized images, then this plugin can help you fix it. The EWWW image optimizer automatically optimizes previously uploaded images and then switches over to optimize newly uploaded ones.
Related: Best WordPress Plugins For Your Blog
Free Image Optimization Tools
You can also use the following FREE tools available online to optimize the images.
Some of the most effective image optimization tools that I’ll recommend include:
That’s everything that you need to know about image optimization.
With these top-notch image optimization procedures and tools, anybody should be able to get on track.
However, you may still need to adjust the procedures by some bits so that they particularly suit your own type of image content uploads.
I hope you find this article useful.
If you gain something out of this, please pin it and share it with your friends and family.
Thank you for reading, Happy Blogging!
One last thing: Sharing is caring, please post this pin to your favourite board on Pinterest!