“A picture is worth a thousand words”. Knowing how to optimize images is an important factor in building a successful website.
In a long article with thousands of words, images are useful grabbing readers’ attention and helping them not get bored with the mere text. However, too many images could cause many unwanted effects on your site. Images would take up a large amount of storage on your server, which over time will increase your hosting cost, and induce slower page loading time, which affects your conversion and makes your SEO rankings suffer. Reading this article, you would be able to select the right format for each image, and know how to compress images to save your visual space.
Select the right image formats for web use
Understanding different formats and picking the right ones help save significant space on your site. Images are still preserved in good quality but occupy smaller file sizes.
There are 3 image formats commonly used: GIF, PNG, and JPEG.
GIF: GIF is suitable for photos having few colors, simple graphics (such as website bullet, button). It is not a good choice for high-quality images. This format is today more widely known as animation support. Thus, use GIF only when you need animation.
If animation is not required, consider using PNG or JPEG.
PNG: This format applies lossless compression which produces high-quality images but also results in larger file sizes. You should use PNG for screenshot, website design images.
JPEG: A combination of lossless and lossy compression are used to produced JPEG image. Therefore, images in this format will have lower quality compared to the ones in PNG but have smaller file sizes. It is best suited for images with many colors, images containing gradient.
Optimize images easily with these free applications
Proper image compression decreases size in bytes of images but still assures images look good on your site.
Below are some tools you could use to optimize images for your website:
- Kraken (Online)
“Kraken is a robust, ultra-fast image optimizer and compressor with best-in-class algorithms. We’ll save you bandwidth and storage space and will dramatically improve your website’s load times.”
Kraken is an easy to use online tool. It offers both free and pro package. In the above picture, I compressed 1 photo with 2 methods: lossy and lossless. As you can see, the former efficiently reduced the file size by nearly 50% while it was around 4% using the lossless method.
This is the JPEG photo after lossless compression
And this is it after lossy compresison
The photo still looks good after lossy compression and also efficiently saves your storage space.
- RIOT (Windows)
The advantage of this application is the dual view of both the original and the optimized image so that you can easily compare the two.
- ImageOptim (MAC)
This tool is free to download and also easy to use. Simply drag and drop the images or folders you want to optimize. There are no new files generated. The files you drop are optimized in-place and are saved automatically.
- Trimage (Linux)
If you’re using WordPress, check out these plugins
Not only available online, Kraken can also be integrated into your WordPress site to optimize all the images uploaded.
This plugin will automatically optimize your images as you upload them to blog or support optimizing images that have been already uploaded.
With over 1 million downloads, this plugin, brought to you by WPMU DEV, has proved to work effectively. The way it works is similar to EWWW Image Optimizer’s.
I am using WP Smush to optimize images uploaded on the blog
Proper image optimization is a step you should do to optimize your website. Its benefits are many: more images at smaller file sizes are allowed to be stored, faster loading times make happier customers, and your SEO rankings are also increased. Moreover, optimizing images is not a difficult job since there are many available applications and plugins out there to help you compress all images just in seconds. Let’s try it out to see the effects on your website!
Featured image designed by Freepik