May 3, 2017

Lossy vs Lossless Image Compression

If you are looking into optimizing your website’s performance, you will come across image optimization. Reducing the size of your images for the web can help you gain precious milliseconds of load time. There are two types of compression you can pick when optimizing your images: lossy and lossless compression. There are pros and cons to both and you, as a website owner, should evaluate both before making a decision. 

Before we get started, you should know that there is no single best format or “quality setting” for images. It all boils down to which lossy or lossless algorithm is used to optimize each image.

What Is Lossy Image Compression

Lossy compression means that some data from the original image file is lost. This process is irreversible. Once you have compressed an image this way, you can’t go back. Well, you can’t go back in most cases. With the Imagify WordPress plugin, we’ve set up your image optimization in a way that lets you revert to your original pictures if you are not satisfied with the results. 

When optimizing data such as source code on a page, it’s critical to ensure that the code isn’t altered by the compression. One piece of bad data and your code can break. For other types of data, such as images or video, you can compress it and present an “approximate” representation of the original data without losing its meaning. 

But don’t panic! We use lossy image compression all the time on the web.

In theory, JPEGS and GIFS are both lossy image formats. However, our human eyes do not really notice the difference between JPEGS, GIFS, PNGS or other formats. Images are great candidates for lossy compression because of the way our eyes work. Our eyes have a different sensitivity to different colors. This is leveraged for image compression as we compress some colors more than others. 

Advantages And Disadvantages Of Lossy Compression

The biggest benefit of lossy compression is that it significantly reduces the size of the image file. The biggest con is that this is achieved with a loss of quality. Most compression tools available will let you choose the degree of compression that will be used on your images. 

Finding the right balance

With lossy compression, it’s all about finding a good compromise between file size and image quality.

Keep in mind that oftentimes a 50% compression applied to an image will decrease the file size by 90%.

If you aim to downsize your image file size beyond that, an 80% compression will only yield a 5% decrease, bringing your total reduction to 95%. For most of us, this trade off is not worth it as the compression may degrade the image to a point where it becomes noticeable. The image compression algorithms most online image optimization tools use allow them to work around such limitations to provide crisp and clear images that load fast.

Not sure if lossy compression is for you? Run a quick test on a page of your website with Imagify’s image optimizer. That way, you can download compressed images without altering your original images. 

What is Lossless image compression

Lossless compression means that you reduce the size of an image without any quality loss. Usually this is achieved by removing unnecessary meta data from JPEG and PNG files. We say usually, because with some other compression algorithms, like Imagify’s, other compression opportunities are leveraged without sacrificing the image’s quality. In theory, there are some image formats that are considered to be “lossless” such as GIF, PNG and BMP. However, depending on how they are optimized for the web, these formats may see a slight loss in quality (that your eyes won’t be able to pick up). The big benefit of lossless compression is that it allows you to retain the quality of your images while reducing their file size. 

If you are looking to retain the quality of your images, you should choose lossless over lossy compression.

If you choose to go with lossless compression for your images, the trade-off is that you will have larger files. So you will need to find other ways to optimize your website’s performance.

Which type of compression should you choose?

Picking the right level of compression depends on many factors. You should consider your needs first and foremost. If high quality images are important to your business and customers, then you should consider lossless compression. However, if your website needs to be incredibly fast, you should consider aggressive image optimization. Depending on the CMS you use, you will have certain settings to optimize to ensure that image compression remains under your full control. Do not hesitate to look into tools such as WordPress plugins to help you get the job done. 

WordPress specific Image compression

If you are using WordPress, you should know that it compresses your images by default. Your JPEG images are compressed at 82 percent when WordPress created preview images. You can increase or decrease the level of compression used by your CMS in the functions.php file. We do not recommend this for beginners or intermediate WordPress users. Instead, you should just aim to enhance what WordPress already does in terms of image compression. 

Image Compression For Bloggers

Depending on the type of blog you are running, lossy vs lossless can be turn into a battlefield. You should look into the type of image format you use most often to help you figure out your needs. Here’s a quick recap of the main image formats we tend to use on the web:

  • JPEG – best for photographs or designs with people, places or things in them. 
  • PNG – best for images with transparent backgrounds
  • GIF – best for animated GIFs, otherwise, use the JPG format

The second thing you have to keep in mind is that you may upload one image, but your CMS will be creating many more. WordPress often creates three to five variations of each image in different sizes. So, image optimization can quickly become a big deal for your blog. 

If you are unsure which route you should go, we recommend picking a lossy compression. Test things out first of course to make sure the results are up to your standards. 

Not sure if images are dragging your performance down? Take a page from your website, put it through the online optimizer and see what the results are! If you plan on using Google Page Speed Insights, you need to consider the fact that this tool uses one specific algorithm to analyze your images. Sometimes, your images are perfectly optimized with another algorithm that’s not detected by Google’s tool. This can lead to a false positive result telling you to optimize images that are already optimized.

Image Optimization for Photographers

If you are a photographer, we recommend you showcase high quality images. This means turning off the default image compression in WordPress. However, you can still optimize your images with lossless image compression. If you are plan on using Imagify, the recommended compression setting is “normal” which guarantees you will retain the image quality you seek.

Image compression for E-commerce

Images often account for most of the downloadable bytes on a page. And this tendency has been steadily growing over the years, especially for online stores. Optimizing images can really make a difference for an e-commerce website because customers expect to find what they seek FAST. The challenge is to find a way to provide high-resolution photos of products for shoppers while keeping load times fast. 

There are many strategies for optimizing photos out there. Image compression tools, photo manipulation or PHP scripts can often help you achieve the proper performance you seek for your online store. If you are using Shopify, then you should know that images are automatically compressed and optimized for you. If you are using WooCommerce, you should rely on a WordPress plugin to optimize images on the fly as you add them to your online store.

Lossy vs lossless is a choice you make, there is no “best” image optimization

Find out what you need for your website, test things out and pick what works best for you. Just remember to always keep an eye on the quality of your images and the speed of your load times to make sure you do not lose visitors or customers along the way. 

Imagify, decrease the size of your images, increase the speed of your website: try it for free
Comments 0
Add Comment

Ready to optimize
your image?
Sign up for free in few seconds