If you don’t want Google to hate your website, you better make sure that your website is fast. It doesn’t matter if you have tons of great content. If your website is loading slow, users will stop coming to it, and Google will eventually stop showing it in search results. Many factors impact a website’s speed, and one of the most important factors is “images.”
If the images on your website are large and heavy, your website will experience slow loading. That’s when Google will take notice, and one fine day, it will push you out of the search results. Why do you want that to happen?
So, it is imperative that you optimize images for web and performance. Image optimization will not only help to reduce the file size, but also help to ensure that your website loads fast (at least, images don’t become the primary culprit behind slow loading speeds).
The question is, how do your optimizer images? We will find out the answer to that question and various other questions in blurb. Be patient!
So, what to expect from this article? Here is what you will learn in this article:
- What is image optimization?
- What are the benefits of image optimization?
- How to optimize images for web and performance?
- WordPress plugins and third-party services for image optimization.
- Should you be using SVG images?
- Image optimization best practices.
Now that you know what to expect from this article, let’s begin…
What is image optimization?
Image optimization is a process in which you reduce the file size of a large image so that the image loads quickly when someone tries to open the web page that contains the image. The fast-loading image in turn makes the web page load faster, thereby improving the overall user experience.
Image optimization can be done is various ways that include using a photo-editing tool installed on your desktop or device, using an online service (a website where you upload an image to get a reduced size), or using WordPress plugins and scripts. You can also use third-party image optimization services that integrate with WordPress sites.
Image optimization or compression usually uses two different methods – lossy or lossless. There is a third variant as well known as glossy image optimization. This third variant is more suitable for photographers.
Okay, now that you know what image optimization means, let’s find out the benefits of using image optimization.
What are the benefits of image optimization?
Why do you need to format and optimize your images? Why can’t you use an image as is? The simple answer is that when you format and optimize your image, your web page loads faster. Google prefers faster websites.
I don’t know whether you follow HTTP Archive or not, but according to them, images make up 21% of the page weight. That’s second-highest after videos that make up the maximum bulk.
So, if you can format and optimize your images, you can enjoy a significant boost in page load times.
Here are the major benefits of formatting and optimizing the images:
- Improves page loading speed – if your website loads slow, visitors will get tired of waiting and leave your website for good.
- Improves SEO – Google hates slow sites. If Google finds your website to be slow, it will gradually push you down in the search results. Web page loading speed is an important SEO factor.
- Faster image indexing – if the images on your website are lightweight, Google will index them faster for Google image search. In case you didn’t know, Google image search also helps to send a lot of traffic to your website.
- Faster and cheaper backups – Lightweight images help in faster backups. This means that you can take the back up of your entire website much faster. Don’t forget that many hosting companies charge for backups and bigger the backup size, the higher is the price (especially true in the case of cloud hosting like DigitalOcean, Vultr, etc.)
- Less bandwidth consumption – every web hosting company will have a bandwidth limit – even the ones that advertise themselves as ‘unlimited’ bandwidth provider. Large images will lead to more data transfer from your server to the visitor. This means that bandwidth consumption increases. If you have limited bandwidth, you must reduce the size of the images to save bandwidth.
- Saves storage – Your web hosting company isn’t going to give you unlimited storage space (even the ones that say that they give unlimited storage). There is always a limit. The bigger the image size, the more space it consumes. You can very quickly run out of storage space and then you must upgrade to a higher plan. Thus, you should optimize and format your images.
I think you have enough reasons at hand to properly format and optimize your images. So, it is time that I move on to the next question.
How to optimize images for web and performance?
The primary aim of optimizing images will be to find the lowest possible file size with an acceptable image quality. You can do this in various ways. The best thing to do, in my opinion, is to optimize the image on your computer before uploading it to your WordPress site.
The reason I prefer this method is that it gives granular control over your image. You can decide what is best. The other way is to use an online image compressor. You can define certain variable and get a compressed image quickly.
Finally, you can always use third-party plugins and services for WordPress that will perform the compression for you. Again, such plugins and third-party services will never give you the granular control that you will like to have.
There are various applications that you can use for optimizing and formatting your images on your desktop.
You will also have to decide on the file format that you want. There are different image formats. Choosing the right image format and the right compression percentage can help to dramatically reduce the image file size while maintaining the quality at an acceptable range. Also, you need to select the right compression type.
As I said earlier, there are two major types of compression – lossy and lossless. There is also a third variant called glossy, which is better for photographers.
Understanding image formats
Images can be of different formats. The most popular formats are JPEG, PNG, and GIF. What are these? Let’s learn…
JPEG or JPG: This format will give you a smaller file size, and it uses either lossy compression or lossless compression. You can quickly adjust the quality level to get a balance between file size and image quality.
PNG: This format will give you a larger file size. It was initially created as a lossless image format. However, you can use lossy compression.
GIF: This image format makes use of only 256 colors. If you want to create animated images, this format is the best choice.
Now, the aforementioned formats are the most popular ones, however, there are other formats as well. For instance, you will have WebP and JPEG XR. These formats are great formats, but they are not supported by every browser (so far).
Google, for instance, pushes the WebP format, because the format has been introduced by Google. Unfortunately, not all browsers support it. So, it is better that you use JPEG or JPG format if your image has a lot of colors in it. If your image has only a few colors, it is better to go for PNG.
You can then deploy some mechanism in place to convert those images into the WebP format on the fly depending on the browser that the user uses. I, for example, always use JPG or JPEG format to upload to my WordPress site. I also deploy Cloudflare to protect by website against DDoS and DoS attacks. I use the premium version of Cloudflare that also performs image optimization and coverts the JPEG or JPG or PNG images into WebP format depending on the browser.
Understanding lossy and lossless compression
This is important. You need to understand the differences between the two to figure out which type of compression you should use. If I put things in simple words, here is what the two things mean:
In lossy compression, there will be some loss in quality, but there will be a great reduction in image size. In lossless compression, there will be no loss in image quality, but there will be very little compression in size.
But that’s only scratching the surface. There’s much more. Technically, it is not really possible to include the detailed description here. I will still give you a simple explanation.
In lossless compression, the bits (the binary digits in a data code) of an image file are arranged in a more efficient way. No bits are removed. Therefore, there is no loss in image quality, but since the bits are arranged in a more efficient way, it takes slightly less space. The result is that there is only a slight reduction in the image file size.
In lossy compression, parts of the original bits are completely deleted. This leads to slight decrease in the image quality, but there is a massive reduction in the image file size. For example, the algorithm can remove bits from the background of the image while not touching the focal points of the image. This leads to massive decrease in the image size with slight reduction in quality.
There are advantages and disadvantages of both forms of image compression. Here is what you need to know:
| Compression Type | Advantages | Disadvantages |
| Lossless | — Retains full image quality.
— Allows restoration of the compressed data. | — Smallest reduction in file size. |
| Lossy | — Significant reduction in image size and helps with SEO.
— Image quality is only slightly reduced. | — Deleted data cannot be restored.
— The more the compression, the more the perceptible difference in image quality. |
If you don’t run a photography site or any other website where high-quality visuals matter, you should always go for lossy compression.
Okay, now that you know different types of image formats and the compression types, you need to figure out the best combination of format and compression.
Optimizing images for web and performance on your desktop
You need to understand two things clearly:
First: Lowest compression rate = highest image quality & large file size.
Second: Highest compression rate = lowest image quality & small file size.
You must find a middle ground where you can get a small file size and yet the image quality is reasonably good.
Typically, the weight of an entire webpage should not exceed 2 MB. Yes, of course, the weight of the web page can be much higher, but that is definitely not a desirable thing.
Assuming that your web page is 1 MB (1024 KB) in size, what should be the ideal image size? If you use an image that is 512 KB, that’s half the page weight! So, you need to make sure that the rest of the elements should collectively make up 512 KB. That’s not usually possible.
So, your target should be to keep your image size between 50 and 100 KB. That’s between 5 and 10% of the total page weight. This leaves enough for the rest of the elements.
That’s the golden rule of thumb I use. However, it is not necessary that you must follow the same thing. You can shoot up to 20% of the total page weight if you want. Again, the number of images you have on a single web page will also be a crucial factor.
Let’s look at these examples:
The original image:
This image of the cat is 440 KB is size. That’s a big file size for a web page weighing only 1 MB in total. The image alone makes up 43% of the page weight. That’s not desirable.
Now look at this image:
This image has the lowest compression and uses lossy compression. You can see a visible drop in quality. Not only has the image become more pixelated, but also a lot hazier. However, the image file size is now at 19.5 KB, which is 2% of the total web page weight.
It is entirely possible to improve the quality of the image and stay within the 10% range. Look at the image below:
This third image of the cat is far better in quality and it weighs 94.6 KB, which is 9.2% of the total page weight. This third image still uses lossy compression, but the compression level is set to medium.
Now, how do you achieve that? There are few ways. Let’s find out…
Adobe Photoshop
Photoshop is the default application I fall on when it comes to image optimization. You can use any other application you want. Since I am comfortable using Adobe Photoshop, I find it easier than other options.
To use photoshop and define the compression level, follow the steps below:
Step-1: Resize the image
Open the image in Photoshop and use the key combination of ALT + CTRL + I to pull up the dialog box where you can see the image dimensions in pixels. 
Take a closer look at the dialog box that you pull up using the ATL+ CTRL + I key combination:
You can change the dimension of the image by adjusting the width and height. As far as the resolution is concerned, keep it to 72. Using a resolution of 300 will make the file heavy and unsuitable for web. 300 dpi is usually used for print.
Step 2: Compress the image
Once you have resized the dimensions, click on to see the resized image on your Photoshop application window. Now use the hotkey combination of ALT + CTRL + SHIFT + S to save the photo for web usage. This is where you can adjust the quality. When you use the ALT + CTRL + SHIFT + S key combination, you will find this dialog box:
Take a closer look at the new dialog box that you will see with the aforementioned dialog box:
This is where you have to set the compression parameters. Now take a look at the image below which has four highlighted boxes numbered 1, 2, 3, and 4.
The box highlighted as 1 is the place where you set the image format and the compression quality.
There are few parameters here. You can set the compression level to low, medium, high, very high, and maximum. You can also define a numerical value to the quality. You have to select the check box against the option which reads ‘Optimized.’
The values you put in here will along will determine the file size of the image [you can see the file size in the box numbered 3].
There will be no impact on the file size depending on the choice you make in box marked 2. In box 2, you can select to include metadata or remove it completely.
Do keep the sRBG box checked here, because that box because sRGB images look better on the web.
Here is what box 3 looks like after the selections made in box 1 and 2:
Notice the image format as shown in box 3 is JPEG and the file size is 94.6K or 94.6 KB.
What about box 4? It shows an exclamation mark. This exclamation mark shows up when you select the Metadata to be None in box marked as 2.
When you are going for metadata removal, you are essentially opting for lossy compression. The image will lose this information forever. You cannot recover it later.
Once you are satisfied with the image quality and the file size, hit the save button, and your new optimized file should be ready.
Affinity Photo
If you don’t want to work with Photoshop because of its cost, you can always go for Affinity Photo which is much cheaper than Adobe Photoshop and comes with nearly identical set of features. In fact, Affinity Photo will be a one-time purchase that will help to save a lot in the future.
Affinity Photo works pretty much the same way as Photoshop. If you want to optimize an image for web and performance, you can compress the image. To pull up the image resizing dialog, you have to use the same key combination as in Photoshop [ALT + CTRL + I].
To pull out the export settings dialog where you can set the compression level and select the image output format, you need to use the same key combination as in Photoshop [ALT + CTRL + SHIFT + S] and then select the parameters.
Other image optimization tools and programs
There are many more tools and programs that you can use for optimizing your images before uploading them to your WordPress site. It is not really possible to mention each one of them in this article. Here is a quick list of some of the most popular options you can select from:
- GIMP – Alternative to Photoshop and Affinity Photo. It is completely free.
- GIFsicle
- JPEGtran
- OptiPNG
- Paint.NET
- JPEGMini
- ImageOptim
- FileOptimizer
WordPress plugins and third-party services for image optimization
There are people who heavily depend on WordPress plugins for image optimization. I cannot blame them. Not everyone is comfortable with image editing using software programs like Photoshop or Affinity Photo or GIMP. So, they use the easy way.
However, I always recommend not to do that! The more plugins you use, the slower your website becomes. Each plugin adds codes to your site, and everything needs to load when someone visits your website.
To improve your website performance, you eventually end up degrading its performance. That’s never a good idea. Yes, image optimization plugins will help you reduce the image size to some extent, but the result may not always be pleasing or acceptable.
What more? Such plugins also put an immense load on your website while performing such image optimization tasks. Things can become really nasty when you are on a shared hosting server with very limited resources. You may soon receive an email from your hosting provider asking you to upgrade.
So, it is always worth spending some time learning how to optimize your images right on your computer before uploading.
However, if you choose to ignore what I said and still go for WordPress plugins, here are some of the plugins that I will recommend:
- Optimole
- EWWW Image Optimizer Cloud
- Optimus Image Optimizer
- Imagify Image Optimizer
- ShortPixel Image Optimizer
- WP Smush
- TinyPNG
- ImageRecycle
Let’s take a look at each of them individually. But before that:
“Do not upload images to your WordPress library that are larger than 2MB in size. It is better that you optimize your images on your computer and then upload them to WordPress and use one of the plugins to optimize the images even further.”
Optimole
This is one of my favorites. I used it for quite some time (about six months) before I eventually stopped using it. The main concern was the price. It is really expensive, and unless you have a fat wallet, thinking of Optimole is not a wise choice.
What I like about Optimole is that it is entirely cloud-based. In fact, Optimole is an image-only CDN (it uses Amazon’s CloudFront). When you upload an image to your WordPress site, Optimole will copy it to its own server and optimize it there.
It will then serve the optimized images through CloudFront CDN. The major benefits of using Optimole include:
- It puts no pressure on your server while optimizing the images. Everything happens on their server.
- They serve WebP images (Google wants you to use WebP).
- It serves images depending on the viewport of the user. This means that if a user is using his or her mobile device to view your website, Optimole will automatically serve an image that is perfectly sized for that screen size.
- It is a plug -and-play plugin with some very basic settings. You need to define the compression level you want (there are three options – low, medium, high). If you are already using pre-optimized images (images that you have already optimized on your computer), make sure that you are setting the compression level to medium. High compression will make the images ugly.
- It uses lossy compression to achieve a smaller file size.
- It also uses lazy load to vastly improve the website load time.
In fact, my encounter with Optimole was a pleasant one. It indeed helped to improve the page speed greatly.
EWWW Image Optimizer Cloud
Okay, this thing works, but it is really complicated. You need to spend some time to configure it properly. Once you achieve proper configuration, EWWW Image Optimizer can be a life-saver. It works with pull mode CDNs like Cloudflare (my recommended CDN provider), KeyCDN, StackPath CDN (previously known as MaxCDN), etc.
It is also compatible with Amazon S3, DigitalOcean Spaces, & Google Cloud Storage. (provided you know how to configure them and use with EWWW IO).
EWWW IO can bulk optimize your media library or you can selectively optimize the images you want. It can also convert your images into WebP format if you want. The plugin is also capable of finding the best image format with multi-format conversion.
It is not free and you have to pay $0.003 per image for the conversion.
Optimus Image Optimizer
If you decide to use this plugin, make sure that you are using pre-optimized images. The reason why I am telling this is that Optimus Image Optimizer uses lossless optimization. As I have said earlier, lossless optimization leads to larger file sizes compared to lossy compression.
The plugin works perfectly well with WooCommerce and even WordPress multi-site. There is a bulk optimizer available that can optimize your entire media library at once. If you don’t want to pay for it, there is a free version available, but its capabilities are quite limited.
For the premium version, you have to pay annually and there is an option of using their Cache Enabler plugin along with the premium version. Together, you can enjoy WebP images on your site.
Imagify Image Optimizer
The people who created WP Rocket are the same people who developed Imagify. This plugin is compatible with WooCommerce, WP Retina, and NextGen Gallery. This plugin has the option of bulk optimization of images. What’s best is that if you are not happy with the post-compression images, you can use one-click restoration.
Talking of compression, there are three levels of compression – normal, aggressive, and ultra. If you are not happy with the results of your selected compression level, you can restore the images to the original version and then select the other level of compression.
Imagify offers both free and paid plans. However, with the free plan the total image quota for a month is only 25 MB. That’s too less! To unlock the true potential of the plugin, you will have to upgrade to their premium plan.
What’s interesting is that Imagify will process all the images from their server. This will mean that there will be no load on your server. This is ideal especially for people who are on a shared hosting server.
ShortPixel Image Optimizer
ShortPixel Image Optimizer is a free plugin that will allow you to optimize up to 100 images per month. If you need to process more images, you need to buy credits that will cost $4.99 for every 5000 images.
This incredible plugin is capable of compressing different file types that include PNG, JPG, PDF, WebP, and GIF.
ShortPixel will allow both lossy and lossless compression, and even converts CYMK color profile to RGB profile. The plugin will take all your images from your hosting storage to the cloud, process the images there, and then put the processed images back to your hosting server and replace the originals.
Don’t worry, it will even create backups and let you restore them in case you want to do that. The good thing is that there is no limit to the file size. Your images can be extremely large images. However, I won’t recommend doing that!
WP Smush
Available in both free and premium version, WP Smush can reduce the size of the images by removing all unnecessary data from the images. The plugin will compress your images as you upload them.
It can also optimize the images that you uploaded before using the plugin. You can resort to bulk optimization, but with the free option, you can bulk-optimize up to 50 images at once.
However, there are certain shortcomings to WP Smush. It can carry out only lossless compression. Lossy compression is not available. The original images cannot exceed 1 MB is size, and it can optimize only GIF, JPG, and PNG images.
On the brighter side, it can find and optimize images irrespective of which directory you put them in. You can even set standard width and height for all images.
TinyPNG
Though the name suggests that it works with PNG images only, the truth is that it can work even with JPG images. Using the free account, you can compress up to 100 images a month. If you need more, you need to upgrade.
Any new image that you upload will be automatically compressed. For previously uploaded images, you need to use the bulk optimization feature. This plugin offers 60% compression for JPG images and 80% compression for PNG images. It also saves storage space by converting CYMK to RGB.
Another great thing about TinyPNG is that it doesn’t set any limit on the file size like WP Smush.
ImageRecycle
This plugin can optimize both images and PDFs. One of the coolest features of ImageRecycle is that it will allow you to set the minimum image file size for compression. For instance, if you set 80 KB, it will optimize only those images that are 80 KB or higher in size. Any image that is smaller than that size will be automatically removed from compression queue.
Other features include bulk compression and image automatic image resizing. ImageRecycle is a full premium service. However, you will get a 15-day trial in which you will have the full version working for you. The service will cost you $10 for every 10,000 images compressed. That’s the bare minimum plan you have to purchase even if you don’t have 10,000 images.
What’s best is that the images will be compressed on their servers, thereby reducing the load on your server.
Should you be using SVG images?
This is a big question. SVG stands for Scalable Vector Graphics. Ideally, if possible, you should be using SVG alongside other image formats. SVG format works great for text, icons, and logos. So, it is desirable that you create your logo in SVG format, if possible.
SVG can scale in both browsers and in image editing tools. They are, therefore, a great option for using on web. In case you are thinking that using SVG will impact your SEO score, you cannot be more wrong! Google indexes SVG images the same way it indexes JPG, PNG, WebP, etc. So, you shouldn’t be worried about SVG images at all!
There are many websites that use SVG along with other image formats. In fact, traditionally, SVGs have smaller size than PNG and JPG images. That’s not always true, but as I said, traditionally SVG images are smaller. So, if you can use SVG variant that is smaller than its JPG or PNG counterpart, you will actually be improving your SEO score, because it will give a boost to your website speed.
Uploading SVG to WordPress will be a big problem because of security concerns. However, you can use the Safe SVG Plugin to safely upload SVG images to your WordPress site. This plugin will sanitize the SVG image and make it safe. You cannot upload SVG to your WordPress site without using a plugin. You will get an error.
Now, you need to understand that SVG format works best with flat images. Any gradient mesh will not work. So, if your image or logo is a flat one, using SVG version is always a desirable thing to do. Here is an example of SVG image:
This image weighs only 4.08 KB.
Now, here is the same image in JPG format:
The file size of this JPG image is 81.3 KB.
Finally, here is the PNG version:
The PNG version weighs 52.8 KB.
You can see the difference. There is a whopping 95% reduction when you compare the SVG and JPG formats. When you compare the SVG and PNG version, there is a whopping 92% reduction is size.
That’s the beauty of SVG images! They are super lightweight! But as I said, you have to ensure that you are using a flat image with no gradients, and you need a proper plugin to upload SVG to your WordPress site.
The bottom line here is that you should be using SVG image wherever possible. Using SVG will dramatically reduce the file size and hence, the web page size, thereby improving page load speed.
Image optimization best practices
Now that you have learned how to optimize images for web and performance, here is a quick list of best practices that you should follow:
- Try to optimize your image on your computer. If you cannot do that, use a plugin that optimizes your images on their servers and not your server. This will reduce server load and image page load speed.
- Try to use SVG images wherever possible as long as the SVG image is smaller in file size.
- Use a CDN. A CDN will help to deliver images from server closer to the visitor. This will improve page load speed. While Optimole is a good choice, going for Cloudflare premium also makes sense, because it can also optimize images and serve WebP version.
- Use JPG images or PNG images only when your image has a lot of details and shapes. Such images don’t look good in SVG format or GIF format.
- Use lossy compression unless you are a photographer and you need to focus more on your images.
- For high resolution and high details, settle for PNG.
- For normal photos, settle for JPG.
- If you need animation, use GIF.
- If you are using photo editing tools like Adobe Photoshop or Affinity Photo, use the ‘save for web’ option while saving your photos.
- Try to keep the image size within 10% of the total webpage size.
- Try not to use more than 3 images per web page.
- Ensure that you have WebP conversion available, especially for Chrome. Not all browsers will support WebP version.
- Enable lazy-loading of images. This will help to increase page load speed.
- Do some experiment and you should be able to quickly learn which image size and format works best for you.
Conclusion
Optimizing images is not a difficult task. It does take some technical knowledge, but you can acquire it using quick Google searches. It is not rocket science. You should always use optimized images on your website to ensure that the overall page size doesn’t exceed 2 MB. Fast-loading website is a necessity. Google hates slow websites. If your website is slow, Google will penalize it by pushing it down in search results. You really don’t want that to happen, do you?
