September 25, 2019
September 25, 2019
Lossy and lossless image compressions are the two most popular methods for decreasing the size of the images. It’s highly recommended to use one of these methods when uploading image files to your website. In this article, we’ll tell you why and how to do that, to help improve site performance.
Large images can slow down your site’s performance, which can damage your visitors’ experience and SEO ranking.
A Google study found that 45% of visitors are less likely to visit the same website if they encounter a bad experience.
Large image sizes tend to hold up the site, slowing load times. At the very least, it can create a small delay that might annoy your website visitors. Or at worst, it can also make your site unresponsive or completely inaccessible.
SEO ranking, as we mentioned before, is another factor that can be at risk. Google has confirmed that page speed contributes to a major ranking factor. Slower page speeds can impact on page crawler and indexation even further. Bing also reports that page speed matters.
Slow page performance can affect your conversion rates too. It’s reported from outdoor lifestyle company, Dakine, that faster page speeds improved their mobile revenue up to 45%. And one of the methods that they used is optimizing the images on the website.
Smaller images offer other benefits for your hosting subscription. In a nutshell, it won’t eat up your server resources, allowing you to save money.
That’s because small images help save storage space and reduce bandwidth use. If you’re on a shared hosting plan, this is a critical issue, especially if your site has many images.
In addition to that, backing up your website can be a lot faster when you optimize images.
You don’t need to worry about the overall quality of your images when compressing them. The methods we’re going to discuss a sophisticated technique to remove unnecessary information in your image file.
Lossy image compression is a process that takes away some of the data from your image. Thus reducing the file size. This process is irreversible, meaning that the redundant information will be removed permanently.
This technique can considerably compress the original image, but it usually comes at a trade-off for quality. While the size can get very small, your image will also get pixelated (degrade in quality). That’s why it’s better to have a backup file before you do that.
JPEG and GIF formats are great examples of lossy compression. JPEGs are suitable for images/photographs with no transparency, while GIFs are your best choice for animated images. These formats are great for a site that needs faster load times, as you can adjust the size and quality for the right balance.
Here’s an example that we made, using the Shortpixel service to perform lossy compression:As you see, we can’t really tell the difference between the original and compressed photo. You can only notice pixelation if you zoom in the compressed one. Interestingly, we managed to reduce the file size by 85%.
If you use WordPress, it will automatically help compress JPEGs when you upload a file to the media library. That’s why your images look a little pixelated on your WordPress site.
By default, the image will be reduced by about 82% of its original size. You can increase the percentage or disable the feature, we’re going to discuss that a bit later.
Unlike the previously covered option, lossless image compression won’t reduce the quality of an image. That’s because this method only removes additional, non-essential metadata that is automatically generated by the device used to take the photo or the image editor.
The drawback is that you won’t see a significant reduction in file size, with sometimes the size staying close to the original. As a result, it’s likely won’t save a considerable amount of storage.
This lossless compression method is best for text-heavy images and ones with a transparent background – alpha layer. The formats that benefit from lossless image compression are RAW, BMP, GIF, and PNG.
Here’s an example of a lossless image compression outcome.As you can see, it’s almost identical. In fact, using the same service as before, we only managed to reduce the image size by 5%.
We believe that the right answer depends on your needs. The majority of users, especially ones that manage an ecommerce site, blog, or news site, might prefer lossy compression. It offers significant file reduction, saving more storage and bandwidth while helping the site load faster.
On the other hand, websites related to photography, fashion, modeling, and similar topics which require high-quality images might prefer lossless image compression. That’s because optimized images are pixel-by-pixel similar to the originals.
If you choose lossy image compression and use WordPress, you have the function to have the CMS do it automatically. If you want to tweak the percentage, you can dig into some code, and modify the values.
Important: Always create a backup before making a change on your site.
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
If you want to increase WordPress’ automatic compression ratio, you can do so by adding the following filter. In the example snippet, the image would be compressed to about 70%.
add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );
You have to remember that this method won’t impact the images that are already present on your site. You need to regenerate all of them, using a plugin such as Regenerate Thumbnails.
Alternatively, if you find this is not practical, we recommend using a plugin to help you with image compression, as it’s a lot safer! For this tutorial, we’ll show off Imagify.
If you’re new to WordPress, here’s our tutorial about how to install and activate WordPress plugins.
Imagify helps speed up your website with lighter images while optimizing the ratio according to your needs.
Not only will it help you compress, but it will also automatically optimize all the thumbnails you’ve uploaded. It makes the entire process a lot more efficient.
There are three optimization levels available should you use this plugin:
Imagify also helps convert and serve WebP images too. This is the most recent image format developed by Google, offering both richer quality images while at the same time significantly reducing file size. We’ve covered WebP in this article.
Now you know all the basics required to put lossy and lossless image compression to use.
Lossy compression can reduce the file size significantly, at the trade-off for quality.
On the other hand, you can preserve the quality using lossless compression which will in turn only reduce the size minimally. With the help of plugins, you can easily compress images on your WordPress site.
Good luck optimizing and speeding up your site!