How To Reduce The Image File Size For Your Blog
Learning how to reduce the image file size for your blog will dramatically increase the page speed of your blog and help you rank better in Google search.
To reduce the file size of an image you need to compress and resize all your images before you upload them. Unless you are using a WordPress plugin such as ShortPixel Adaptive Images, that does this for you automatically.
This might sound like a lot of work, but it needs to be done if you want to rank higher in Google search.
In May 2021 Google introduced its core web vitals into its algorithm, which are a set of factors that websites must pass to rank better. In short, these factors show Google how fast or slow your website is on your readers’ device.
Large images can slow down your website and will cause your website to fail Google’s core web vitals factors.
You can resize and compress images using many methods.
- Online Tools
- WordPress plugins
- Photo editing software
We will cover these tools in more depth later in this article.
I use a WordPress plugin called ShortPixel Adaptive Images. This plugin will not only compress your images but will also resize them, saving you so much time. I use this alongside TinyPNG which is an online image compression tool.
Why You Should Reduce Your Image File Size?
For an article to be ranked on Google it needs to have good SEO (Search Engine Optimization) this also applies to images. More and more people nowadays are using Google images to search for content.
According to Moz 26.79% of all queries generated across the top 10 US web search properties are from Google images. This tells us that over a ¼ of all searches on these search properties are from people who are searching for content using the Google image search function.
We all want our articles to rank high on Google, especially after putting in so much work writing them. Once we press the publish button then it’s all down to Google to do its part and rank our articles.
Google does not only rank written articles but also images. Images can also be searched to find your content.
Articles that are not SEO friendly will not rank well on Google and the same applies to images.
There are many steps you should be taking when it comes to image SEO, the one we will focus on today is reducing the image file size which will improve your page speed.
Why is this important you might ask, well in short, the bigger the image file size the slower your page will load on your readers’ device, such as a mobile phone, tablet, etc.
Have you ever tried to access a website that took so long to load that you ended up pressing the back button? The chances are the images on that page were too big and were causing the website to load slow.
What Is Resizing And Compression Of An Image?
If you are wondering what it means to resize and compress an image let me quickly explain what both of these terms mean.
Why You Should Resize Images?
A size of an image is measured by pixels (width x height).
Let’s assume that the WordPress theme that you have installed recommends using a featured image that is 1280 by 768 pixels, this means that the maximum space available for a featured image is 1280 by 768 pixels.
But the image that you plan to use is twice the recommended size of 2560 by 1536 pixels.
This means an image that is twice the size of the space available will be loaded onto your readers’ device each time they access your article.
Large images = slow page speed
However, if you were to reduce the size of your image to the recommended size of the WordPress theme, you will not only reduce the size of the image but also the file size, this will result in the image loading faster on your readers’ device, which will help your article to have a better page speed.
When you resize your images, your images do not get cropped, they are only reduced in size (width & height), which will make the file size smaller also.
What Does It Mean To Compress An Image?
In simple terms when you compress an image, the image quality is reduced without much noticeable difference.
There are a few different types of image compression including:
Lossless
This type of compression only reduces the file size by a small amount, by preserving a perfect copy of the original image. You would use this type of compression, where the quality of your image was important to preserve.
Lossy
This type of compression is the most popular, as this reduces the image file size the most. The smaller the image file size, the quicker the image will load on your readers’ device.
Glossy
This type of compression is exclusive to ShortPixel plugins. It is mainly used in photography websites, where the images need to be kept to their optimal quality.
How Do I Check The Size Of My Images?
There a few ways you can check the file size of your images.
PC Method 1: Hover
- Locate your image.
- Hover your cursor (mouse) over the image file and after a second or so you will see the following information in a small popup box.
- Item Type: JPG, PNG, GIF, etc.
- Date Taken: The date you created the file or took the image if it’s photography.
- Dimensions: The size of the image (width x height).
- Size: The size of the file.
PC Method 2: Right-Click
- Locate your image.
- Right-click on the icon of your image.
- Choose PROPERTIES
- Here you can see the image file size and much more.
On A Mac
I don’t have a Mac so I can’t take any screenshots for you.
MAC Method 1: View Details
- Click on FINDER on your dock.
- Locate the image you want to check the size of.
- Hold down CONTROL & CLICK and the image menu will popup.
- Click on the General down ARROW.
- Here you can see the image file size and much more.
Why Is My Image File Size Big?
If you find that your image size is too big, this is usually caused by the resolution being too high. When you take a photo using your mobile phone or your camera, the images are usually taken in a very high resolution.
If you plan to have your photos printed then the higher the resolution the better the quality of your photos will look. However, the image resolution doesn’t need to be so high when uploading your images to your blog.
Like we discussed earlier we can solve this issue by resizing the images and compressing them. Either manually, using a WordPress plugin, or photo editing software.
Not to worry if this all sounds like a lot of work. When your blog starts to bring an income it will make all the hard work you put into your blog worth it.
Now that we know what can cause your images to be large in size, let’s have a look at some methods for reducing their size.
We will look at 3 types of methods.
- Online Tools
- WordPress Plugins
- Software
Reduce Image Size: Online Tools
There are many online tools available that will compress your images which will reduce the file size. In this section, we will cover the most popular ones.
TinyPNG
Type: online
Cost: free & paid version available.
TinyPNG is an online service that will compress your images without them losing any noticeable picture quality.
Without getting too technical when you upload an image to TinyPNG, it analyses your image to figure out how to reduce the image file size without losing any quality of the image.
It does this using the lossy compression technique, which reduces the colors in an image which brings down the image file size.
Even though the colors get reduced in the image you can’t see any changes with the naked eye. This is why this service is very popular amongst bloggers or any other website creators.
You might be thinking if its so great why is it free.
This is exactly what crossed my mind when I first came across this service.
TinyPNG does have a paid version of this service, but the free version is good enough for most people when they first start blogging.
TinyPNG Free Vs Paid
Even though the free version is fantastic for reducing image file size however it does have a few limitations compared to the paid version.
TinyPNG free version
- Image size: up to 5MBs per image.
- Compress up to 20 images at once.
- Cost : free
TinyPNG paid version
- Image size: up to 75MBs per image
- Compress more than 20 images at once
- Cost: $25 per year.
As you can see from the above screenshot that ‘image 1’ went from 4MBs to only 533.1KBs, this is a huge difference.
But in the case of ‘Image 2’ it didn’t get compressed because the file size was above 5MBs.
If you are thinking of using TinyPNG to reduce the size of your images. You need to ask yourself the following 2 questions to decide which version you need, free or paid.
Question 1: What is the average size of my images?
- To check the size of an image right click on your image icon and choose ‘Properties’ and from here you can see the size of that image or you can hover over the icon of your image like below.
Questions 2: How many images am I likely to compress at the same time?
- If you are going to compress more than 20 images at a time then you should consider the paid version, however, this said in most cases the free version should be more than enough.
Alternatives To TinyPNG
If for some reason you find that TinyPNG is not suited for your needs, there are alternative online tools that you could use instead.
Here is a list of alternatives and their price structure.
| Package Name | Monthly Usage Allowance | Monthly Cost |
| Starter | 20MBs | FREE |
| Growth | 500MBs | $4.99 |
| Infinite | Unlimited | $9.99 |
Best features
- You can adjust the compression level.
- Easy drag and drop interface with the option to upload in bulk.
| Package Name | Monthly Usage Allowance | Monthly Cost |
| Micro | 500MBs | $5.00 |
| Basic | 2GBs | $9.00 |
| Advanced | 5GBs | $19.00 |
Kraken has 2 more packages for higher usage (15GBs & 60GBs).
Best features
- Supports multiply image formats – PNG, JPEG & GIF.
- It lets you download your compressed files in .zip file format.
Image Compressor offers a simple drag and drop tool to compress both PNG and JPEG image files. One of the best features of this tool is that it lets you upload and download in bulk and it’s FREE.
Why is this tool free? it makes money by displaying ads on its pages.
There are many more alternatives but these 3 are some of the most popular ones.
Final Thoughts On TinyPNG
In my opinion, TinyPNG is a fantastic online tool that does a great job reducing the image file size. Its interface is simple and easy to use. With its drag and drop function, it makes it very easy to upload and download your images.
Using any online compression tool can be time-consuming. To upload your images and then to download the compressed version.
If you only have a few images then it’s fine, but if you have lots of images then the time can add up.
This said I still use TinyPNG alongside my recommended WordPress plugin.
Reduce Image Size: WordPress Plugins
ShortPixel Adaptive Images
Type: WordPress plugin
Cost: free & paid version available.
ShortPixel offers two plugins for WordPress.
- ShortPixel Adaptive Images
- ShortPixel image optimizer
| Compression | Resize | |
| ShortPixel Adaptive Images | Yes | Yes |
| Shortpixel image optimizer | Yes | No |
I use and recommend ShortPixel Adaptive Images.
ShortPixel Adaptive Images does much more than just compress and resize your images such as:
WebP
It converts images to the modern image format known as WebP. WebP reduces the image file size even more (up to 35% smaller).
CDN
It serves your images on its CDN (content delivery network). Basically, this means, it has multiple servers around the world, and depending on where your reader is located it will upload your images to your readers’ device using the closest server to them.
This will not only improve the speed of your website but it will give your readers a better experience which gives Google positive signals to rank you better.
Multiple Compression Types
It can compress your images between lossy, lossless, and glossy with a click of a button.
Lazy Load
If you want a faster website then you need this option. Normally when you access a webpage all the images on that page are loaded all at once. This can cause the page to load much slower resulting in your reader pressing the back button (high bounce rate).
ShortPixel Adaptive Images Free Vs Paid
This plugin is available in a paid version and a free version which is limited to only 500Mb of traffic per month.
Please note, as your website grows so will your monthly traffic which will impact which plan you need for this plugin.
Keep in mind that WordPress generates multiple versions of each image that you upload. It can generate up to 10 versions of each image and each version needs to be optimized.
For example, a different version is used for your thumbnail images and a different version for your featured images.
As you can see 500Mb per month won’t last long. For this reason, you should consider purchasing their paid version. It is worth every penny. This is what I use for this website.
ShortPixel has two payment plans for each plugin.
- Monthly plans
- One-time payments
For more information on ShortPixel Adaptive Images plugin please click here.
Price Plans For ShortPixel Adaptive Images
| MONTHLY | FREE | $3.99/mo | 8.33/mo | 24.99/mo | 83.33/mo |
| Monthly CDN traffic | 500MB | 25GB | 80GB | 275GB | 1100GB |
| ON-TIME | $9.99 | $19.99 | $29.99 | $99.00 | $249.00 |
| CDN traffic | 50GB | 150GB | 250GB | 850GB | 2500GB |
Check out their website for their latest prices, ShortPixel Adaptive Images.
Shortpixel Adaptive Images Pros & Cons
Pros
- Great value for money and speeds up your website.
- Lazy load option.
- Supports JPEG, PNG, GIF, TIFF, BMP.
- Converts images to WebP on the fly.
- Monthly Payment option as well as a one-time payment that can be topped up later.
- Resizes images automatically.
- Supports lossy, lossless, and glossy compression.
- Let’s you keep a backup of the original image files if you ever decide to stop using the plugin.
- Smart cropping.
Cons
- The bigger your website the more it will cost.
- You will need to install another plugin, the more plugins you install, the more it affects the overall speed of your website.
Alternatives PlugisnTo Shortpixel Adaptive Images
Imagify
Imagify is a plugin developed by the creators of WP Rocket, another plugin that I use with this website.
Key Features
- Creates WebP images.
- Resizes images automatically.
- Easy to use interface.
- Offers lossy and lossless compression.
Smush
One of the most popular WordPress image optimization plugins. It offers both a free and paid version.
Key Features
- Lazy load images.
- Resizes images automatically.
- Strip EXIF metadata.
- Lossy & Lossless compression. (loss compression on available on the paid version only).
- WebP (paid).
- CDN (paid).
Final Thoughts On ShortPixel Adaptive Images
In May of 2021, Google had a huge update to its algorithm, in simple terms this update meant any websites that didn’t meet Google’s core web vitals test would not receive a ranking boost. In other words, if your website took more than 2.5 seconds to load it could affect the rankings of your articles.
I spent weeks trying to speed up my website. Eventually, I managed to get my website loading much faster. This is thanks to the ShortPixel Adaptive Image plugin and my caching plugin that I use which is WP Rocket.
So from my experience, I would highly recommend this plugin as it helped me improve the speed of my website.
As a plugin, it is easy to use and set up. You will be surprised how much it can improve your website speed. This said, if your website is slow, reducing the size of your images is just one step you will need to take to speed up your website. Other steps include:
- Caching Plugin
- Better hosting
- Fast WordPress them etc.
Reduce Image Size: Software
If you don’t have a budget for any paid plugins for now, then don’t worry. There are a few free programs you can use to get you started.
In this section, we will look at 3 programs that will help you get your images reduced in their file size, either by resizing your images, compressing them or both. We will cover the following programs.
- Paint App (free)
- GIMP (free)
Microsoft Paint
Cost: free
Image resize: yes
Image compression: no
The classic Paint app for windows may be very basic, however, it is perfect for resizing those images that are far too big for your website. If you have a windows computer then this program will come preinstalled.
Using the Paint app to resize your images is easy but keep in mind that it doesn’t compress your images.
To compress your images you will either have to use another program or use an online image tool such as TinyPNG that we covered earlier.
How To Resize Your Images Using Microsoft Paint
For this example, we are going to resize an image that is 1280 pixels by 853 pixels and the file size is 159KB. Even though this image isn’t super huge in file size let’s resize it and see how much we can save just by resizing it.
Before
Steps to resize images in Microsoft Paint:
- Open your image in the Paint app.
- Under the HOME tab click on the “RESIZE” option.
- Change the resize option from PERCENTAGE to PIXELS and set the new size to your desired size. In this case, we will set the new size to 600 pixels by 399 pixels. Using the original ratio of the image, once you type in the new horizontal size it will calculate the vertical size automatically.
- Now, let’s the how much of a difference it has made to the image file size.
| Before | After | |
| File Size | 159KB | 64.6KB |
| Image Size | 1280 x 853 | 600 x399 |
| SAVING | 94.4KB |
As you can see from the above example, just by resizing the image we saved 94.4KB. This is almost 60% saving just by resizing your image.
- Now to compress this image all we do is either use TinyPNG or our next free program on the list.
I recommend using TinyPNG, This makes the whole process a lot easier and quicker compared to manually compressing your images.
After using TinyPNG we have saved a further 58%. So by manually resizing our image and using TinyPNG we went from 159Kb down to only 28.1KB.
As you can see, you can resize and compress your images manually however if you had 5 images per post then this whole process can take up valuable time. Not forgetting you will need a different size of your images for desktop, tablet, and mobile.
This is where the ShortPixel Adaptive Images plugin comes in handy. It takes care of all of this automatically including the different sizes needed for desktop, tablet, and mobile.
GIMP
Cost: free
Image resize: yes
Image compression: Yes
Even though I love using Adobe Photoshop, if you don’t have the budget for their monthly subscription yet, then there is a great free alternative and this is GIMP.
How To Resize And Compress Images Using GIMP
For this example, we are going to resize and compress an image in GIMP.
The image size is 1280 pixels by 853 pixels and the image file size is 159KB. Even though 159KB isn’t that big, it’s still considered big when it comes to image size for a website.
Let’s see how small we can get this number down to using GIMP to resize and compress this image.
Before
Steps for resizing & compressing images in GIMP:
- Open your image in GIMP.
- Under the IMAGE tab click on SCALE IMAGE
- Make sure that the width and height are locked. So, when we change the width the height will be automatically adjusted according to the original image ratio. We are going to set the width to 600 pixels and the resolution to 72ppi.
- Press SCALE to resize this image.
- The option to compress this image is available during the saving process.
- Go to the FILE tab and click on EXPORT AS, give your image a name, and click on EXPORT to save your new image size.
- On the popup menu tick SHOW PREVIEW IN IMAGE WINDOW, by doing this we can see the quality of the image as we compress it using the quality bar at the top.
- In this example, we decreased the quality down to 25. Please note, the lower you bring this number down the more pixilated your image will become.
- From the image above we can see that the file size is now only 17.1KB.
| Before | After | |
| File Size | 159KB | 17.1KB |
| Image Size | 1280 x 853 | 600 x400 |
| SAVING | 141.9KB |
As you can see the file image size has gone from 159KB down to only 17.1KB. This is a huge difference from the original file size.
We get great results but like before, it can be very time-consuming having to do this for all your images.
What Can You Use Gimp For Your Website?
GIMP is a fantastic photo editing software that does much more than just resize and compress your images.
In my opinion, Adobe Photoshop is much easier to learn and use compared to GIMP, however, once you have learned the basics in GIMP you will be surprised how much you will use it for your blog/website such as:
- Colour correcting and enhancing your images.
- Creating catchy featured images.
- Creating YouTube thumbnails.
- Creating Pinterest pins.
- Ebook images.
- Post images, icons, banners.
- The list goes on and on.
Final Thoughts
If the images that you have on your website have not been resized and compressed then it is very likely it will have a huge negative impact on your page speed.
And we all know what this means in Google’s eyes. If your page speed is poor (over 2.5 seconds) it will impact your ranking.
Can you imagine working very hard on an article for 2-3 days and then finding out that Google decides not to rank it high in its search because it doesn’t load in less than 2.5 seconds.
For this reason, all the images that you use on your website must be optimized (resized and compressed).
There are many tools that you can use such as:
- TinyPNG (online)
- Imagify.io (online tool)
- ShortPixel Adaptive Images (WordPress plugin)
- Imagify (WordPress plugin)
- Smush (WordPress plugin)
- Microsoft Paint App (software)
- GIMP (software)
What I use on this website and highly recommend is using the ShortPixel Adaptive Images plugin.
This plugin has saved me so much time by doing everything automatically for me, so I can focus on writing more content for this website.
This plugin has helped me meet Google’s core web vitals user experience factors.
Whatever tool you decide to use, resizing and compressing your images will improve the page speed for your website.
We hope this article has been informative and you have a better understanding of how to reduce the image file size for your blog?
If you have any tips or advice on the topic, please share them in the comments.
Let’s share and learn together.
Happy Blogging!
Wow. Very informative