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.
What is PNG and JPEG?
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.
WordPress Image Compression Plugins
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
|EWWW Image Optimizer
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