3 5.15 The Difference Between Lossy and Lossless

                               

In a previous blog post, I listed a couple of reasons as to why some images load slower than others. One of the solutions that was quickly mentioned in my blog post but expanded upon in the referenced article “6 Reasons Your Images Are Slowing Down Your Website (And How To Fix It)” written by Imagify writer Marine Larmier was to compress the image(s) you were going to use in your website.

If you have already seen J. David Eisenberg’s HTML: Images and Figures course on LinkedIn Learning, then you might remember that he mentions lossy and lossless compression. After researching this topic, I stumbled upon Leonardus N. article “Lossy vs Lossless Image Compression” over at Hostinger Tutorials. After reading his article I now have a better understanding of both image compressions. Here is what I learned:

Lossy Image Compression

Lossy image compression removes some of the data from your image file, reducing the overall file size. This is great news if your website loads slow due to the size of your image files. There are however two drawbacks to lossy compression. Lossy image compression is irreversible, once the data from the file is removed it is permanently removed. It is highly recommended to keep a backup of your image file. The second drawback effects the image quality. While lossy compression can reduce your file size, it will also cause the image quality to degrade.

Lossless Image Compression

Lossless Image Compression won’t reduce image quality and will instead only remove non-essential data. The only drawback to lossless image compression will be that the image(s) you use on your website will still be somewhat large in file size and could still have a big impact on how fast your website loads.

Which One Should You Use?

When it comes to simple websites like a blog it is recommended to use lossy compression as it can easily help your blogsite load faster and improve your website performance. An eCommerce website can also use lossy compression, but it recommended to only use this method for thumbnails and product image previews.

When it comes to the items themselves you should use lossless image compression to give the viewer a more detailed view of the product. If you are running a website that relies heavily on images like a photography site, then it is also recommended to use lossless compression.

Final Thoughts

There is no clear answer as to what compression is the right one to use, it all depends on the type of website you are running. If you have a WordPress website, then you don’t need to worry about compressing your images since WordPress automatically does it for you. However, that doesn’t mean that you shouldn’t worry about compressing your images when you need to. If needed there are tools and plugins that can help you compress images like ShortPixel, Smush, and Imagify.

Note:  This chapter is a revised version of a blog post titled “The Difference Between Lossy and Lossless” on A Web Publisher’s Odyssey.