Probably the easiest way of increasing page speed and reducing bandwidth is shrinking and optimizing your images. Compressing images will help you do that. If done right, it won’t affect the quality of the images. It’s becoming the norm so thankfully it’s easy to do with the use of free online services and plugins.
Here are few tools that can help with image compression:
- ReSmush.it – An online tool also available as a WordPress plugin that optimizes images
- TinyPNG – Free online tool for optimizing images that’s also available as a WordPress plugin and a Photoshop plugin. It can even compress animated PNG files (APNG)
- Compressor – Easy, free online tool (pictured below… showing this tool being used for the image, too! You can see that this image’s size was reduced by 72%)
- ImageOptim – Another online tool that optimizes your images while giving you total control. It can also optimize high def retina images. However, this one is not free, as pricing starts at $9 for 1000 optimizations per month.
- This image was compressed by over 70%
If you’re using WordPress, it’s very easy to optimize your images through the use of plugins. Besides the services above that offer a plugin, here are a few more:
What is the WebP image format?
In addition to compressing images, you may also want to consider using the WebP image format, a newer format developed by Google. It’s been shown to reduce image size by over 80% in some cases. However, it isn’t supported by all browsers, most notably Safari and Internet Explorer. Firefox doesn’t yet, but they have announced plans to natively support it.
But when you use WebP, it doesn’t replace your existing JPEG or PNG files. So if visitors are using a browser that doesn’t support WebP, they’ll simply be shown the other version. Yes, this means you have more images on your site, but if most are displaying the WebP version then it can still dramatically decrease the size and weight of your site, making it run faster.
And there’s a WordPress plugin for doing so – Optimus Image Optimizer.
Even for unsupported browsers, WebP support can be added through the use of the WebPJS library.
Here’s a great explanation on everything WebP.