Have you already heard about Lossy and Lossless compression but want to know more about their usefulness, the differences, and how to make the most of them to optimize your website’s performance? Then you’ve found the right article!
The media files (images, videos, audio, …) are the heaviest resources (in terms of Kbyte) that can be uploaded on a page or post on your website, but they are also extremely useful contents for information consumption. Therefore, it is necessary to find a balance, keeping the minimum number of multimedia contents or reducing their sizes as much as possible and thus trying to “kill two birds with one stone”.
The quality video standards of devices on the market have risen enormously, whether they be mobile or portable, pc, smart TV, etc., these products use screens with high-definition video output, in 4k and even higher. Users who view your website from a high-definition screen will immediately notice if the images do not have an optimal resolution perceiving them as defective because ‘pixelated’ or blurry.
It therefore requires particular attention to the quality of images for optimal rendering (high definition), but this must not affect the loading times of your site pages so as not to be penalized by Google both for loading speed and consequently putting SEO at risk.
Let’s see what possible solutions there are:
- do not insert images (not advisable)
- load images in original format (but often too heavy for the site)
- compress web-optimized images.
How to choose between a very light image but with too low resolution for today’s screens and an high-resolution image that slows down the loading of your webpage?
The correct solution is to optimize images before uploading them to your site, and there are two possibilities: Lossy (with data loss) or Lossless (without data loss).
Let’s discover the differences in detail.
Table of contents
Reduce the impact of images
Assuming that we do not want to give up using images on our website, it is necessary to compress them appropriately. This procedure is fundamental for having a reduced impact on the page loading time of the site.
The data emerging from some research shows that the majority of websites have a average page loading time of 6 seconds, double the average speed suggested as “target” for having good online performance. One of the ‘best practices’ suggested by Google is to optimize the images contained in the pages of your website.
To do this, it is necessary to optimize multimedia contents so that they are as light as possible without losing data and quality.
We will therefore look at the two types of compression possible:
- Lossy or lossy compression
- Lossless or lossless compression
In base al tipo di immagine e alle esigenze del tuo sito web, i due metodi sono entrambi soluzioni valide, ma devi tener conto dei pro e dei contro e degli effetti collaterali del sistema di compressione che scegli. Trovare il corretto equilibrio tra funzionalità dell’immagine e velocità di caricamento della pagina dovrebbe essere l’obiettivo finale. Analizziamo quindi i due tipi di compressione nel dettaglio.
Lossy Compression: what it is, when and why to use it
The Lossy compression is the simplest and fastest to execute and is the one that manages to compress images and content in general the most. However, this method entails data loss and may turn out to be of little use in solving your content optimization issues.
In the context of images, the Lossy formats are the files with extensions jpg/jpeg, gif and some compression configurations for the new image format AVIF.
This method of compression is very effective in the case of large images or images that are overdimensioned for the intended use.
The Lossy allows therefore to obtain very light images and is a useful compression for web pages with many images and guarantees an excellent loading speed on the web.
The problem with this compression system is the loss of data that can compromise the quality of images. The defects of the compressed image can be轻微的（远处的小圆角）or become visible (a monochromatic spot) depending on the level of compression applied and the amount of data loss.
Lossless Compression: What It Is and Why to Use It
The compression Lossless is a slower optimization process to execute on images but allows for compressing them without data loss.
Among lossless image formats, the most known and used are png, pdf, and WebP.
The lossless compression, in addition to optimizing image weight, allows going back and undoing the compression because this method does not involve data loss.
Pur essendo meno efficace in termini di ottimizzazione di dimensione dei file, risulta molto efficace dal punto di vista della qualità finale dell’immagine (visto l’aumento di risoluzione dei dispositivi video in commercio), ottenendo così immagini estremamente dettagliate pur avendo ricevuto una notevole compressione di dati.
When to use Lossy instead of Lossless and vice versa
To make the right choice, it is necessary to evaluate the situation case by case. All information should therefore be considered to decide how to proceed, such as the type of image to optimize and the purpose within our website page.
At this point, choices will be based on the context:
- The image has no detailed content for example, a landscape photo. In this case, it might be a good idea to use a lossy algorithm to achieve better compression in terms of weight (Kbyte);
- the image has a graphical content that must not be altered, such as a company logo. It is advisable to use lossless compression here to maintain all the image details, even though the file size will be larger;
- none of the previous choices but it is still necessary to reduce the image size. In these cases, the choice is fairly free and usually lossy compression is chosen because it is faster and compresses the file size more.
Lossy vs Lossless: let’s do some math
Online we find images optimized both with Lossy and LossLess compression, not to mention that often images are optimized using both methods. Algorithms are frequently used that apply one compression and then the other or allow configuration based on input.
Optimizing all the images of a website can be a long and tedious process. To do it in a massive and fast way plugins for CMS and specific tools are needed that guarantee quality compression optimizing the loading speed of web pages. This work requires proper planning to get the most out of this type of tools.
For our WordPress sites we have chosen ShortPixel, which allows a precise control of all image compression parameters ensuring us an optimization of the SEO of images. The optimization is done evaluating the purpose of the images and the single post and trying to compress the image in the correct format according to the purpose (Lossy, LossLess or intermediate between the two).
This kind of changes on the site media is a delicate work, because it heavily impacts both the SEO positioning and the web page loading times. Indeed, in the path of optimization and improvement of a site, it is necessary to think also about images and other media both for optimizing loading times and for search engine positioning.
If you are not an expert in website programming, the main advice is to rely on a team of experts that knows how to correctly manage the optimization of your websites from the perspective of performance, SEO, and security, so as to have the guarantee that you are doing things right.
If you are using a mediocre or low-quality web hosting provider, you should consider the opportunity to switch to a more professional hosting solution. Few know that this can have a huge impact on your website’s loading times.
