Compared to all the other elements on a web page, like HTML, CSS, JavaScript, etc., images are more than likely the one element that make up the bulk of your web pages. Images help support your page content and offer a visual way to illustrate to users and visitors what your organization offers. Due to this, images can not only be overused, but can cause page load performance issues. High-resolution images typically come with large file sizes, and this can slow down page load times. And the larger the image, the more time the browser must take to process it.
Encoding images, also called compressing, is an algorithm that can reduce the overall image file size but maintain the quality of the image. There are a couple of different methods, lossy and lossless, that need to be considered when compressing images. Lossy compression reduces file size, but at the expense of quality. Lossless compression reduces file size but maintains quality. However, there is no reversing lossy compression. Lossless compression can be reversed. So, if you are looking for a way to reduce image size, but maintain decent image quality, lossless compression is the method of choice. However, with lossy compression, you can reduce the file size down more than lossless compression. There is no real single, clear-cut method. However, for most websites, lossy compression is ideal. For sites that need to display high-resolution images, like photography sites, lossless compression should be utilized.
