Adding some images into your website will surely make your website more visually attractive and engaging. It also making your website lively and not boring. However, while we happily adding more images into our website, we usually neglected about the performance of our website. In this article, I will share with you how to optimize image for your website.
In general, images take longer time than text to load in your website. This is because images are larger size than text. Therefore, it is important that you optimize your images before adding them into your website. Otherwise, it will have a huge impact on your website speed.
So, how do you optimize image for your website? There are few ways to optimize your image. If you are using WordPress, you can optimize your image with the help of image compression plugin. Alternatively, you can use image compression software or application.
For me, I used EWWW Image Optimizer and WP Smush for my WordPress website. However, the result doesn’t seem perform well. Recently, I changed to use TinyPNG, it is a free web app that uses smart lossy compression technique to reduce the size of your image files. I like this app because it gives very good result. I will talk more about the two plugins and TinyPNG later. For now, I think it is also good to know what are the image file formats you can use to save your image.
There are few file formats you can save your image but the 2 mostly used are PNG and JPEG formats. So, what are the differences of these 2 formats?
PNG is a Portable Network Graphics file, it uses lossless compression. In other words, PNG image format is uncompressed, and it is a higher quality image. However, the downside of PNG file is that it has a much larger file size.
JPEG stands for Joint Photographic Expert Group. It is a compression standard that makes image file size smaller by slightly reduces image quality. Therefore, JPEG image file is a compressed file format that uses JPEG compression standard and it has smaller file size than PNG image file.
Now, the next question you would probably ask is that which file format should you use?
To keep things simple, you save your file in PNG format for simple images that doesn’t has many colours or when you need to create a transparent image. You use JPEG format for images with lots of colours.
For WordPress users, you can use image compression plugins to compress your image. You can easily install the plugins and start compressing your image. In fact, the plugins will automatically compress your image everytime you add an image. It is very easy to use.
As mentioned earlier, I used EWWW Image Optimizer and WP Smush to compress images for my website but it doesn’t perform well. Then I used TinyPNG, which give me a very significant saving in the file size. Let’s do a testing to compare the results.
I used the following image for testing. The image file size is 489 KB.
Below are the test results of the 2 plugins and TinyPNG. I used the default plugin settings out of the box.
Plugin / Tool | Compressed Size | Saved (%) |
EWWW Image Optimizer | 348.9 KB | 28.7% |
WP Smush | 488.5 KB | 0.1% |
TinyPNG | 111 KB | 77% |
As you can see that the saving is not significant especially WP Smush, it’s only 0.1% saving! Whereas, TinyPNG reduces the file size by 378 KB, it’s 77% saving!
Images could help to improve your website’s engagement with your reader. However, images could also hurt your website speed because your website need more time to load images than text. Therefore, you should also optimize your image before adding it into your website.
If you have not start doing any optimization to your images then you should do it soon. When your website is slow, it will affect your website engagement and user experience to your visitors. Most importantly it will also affect your SEO ranking on search engine.
If you have any other recommendation on how to optimize image for your website or image compression tool, please do share with me 😉
To Your Success,
Kwah Choon Hiong
Do you know that you can use your mobile phone to scan documents? Of course,…
Today, I want to show you how to cast your mobile phone to your PC.…
In this article, I will show you how to install and configure Fail2ban service on…
Have you ever want to bulk delete to your WordPress posts records and you have…
Perhaps you hear about the terms “Landing Page”. Sometimes, we also call it as “Lead…
In this article, you will be learning how to embed Google Forms in WordPress. Google…