Lossy vs Lossless Formats – Which is Better For Your WordPress Site?
No matter what kind of website you are running, chances are you are hosting content in multiple formats. Also, whatever else you are doing, you are also likely working on improving your website and making it work better for you, your staff, and your visitors. How does the format you store your files in affect your website‘s performance or its user experience? And where does the lossy vs lossless dilemma figure into the whole story?
As is so very often the case, there is no simple answer. The question of whether lossless is better than lossy or vice versa depends largely on what the file is supposed to be used for and what it does on and for the website in question. To fully examine the issue, we will be taking a step back first. We will discuss the difference between lossy and lossless formats, as well as some typical use cases, before returning our verdict. We will spoil it for you in advance, though: it really does depend and there is no one single answer.
Here‘s what we‘ll be talking about:
Qode Themes: Top Picks
View Collection
First things first: what is the difference between lossy and lossless? Well, it‘s all down to encoding. Encoding is the process of converting analog input into a digital signal and storing it in a format readable by computers – a file. This file is then decoded and displayed for website visitors using a browser.
But this is already several levels of abstraction beyond the thinking of the casual internet user. Let us consider photography, for instance. A photograph is basically captured light presented as an image. In order for it to be digitized as a computer file which can be stored, copied, edited and displayed to website visitors as an image, it needs to be parsed in a way understandable to machines – rendered into ones and zeroes, if you will.
This is what encoding is all about: converting real-life information, in this case an image, into an electronic signal.
Inevitably, some information is always lost – real life imagery cannot be infinitely accurately mapped to a finite grid of pixels, for instance. One can never get out quite what one puts in. Therefore, there is no truly lossless encoding. But the difference between lossy and lossless compression is how much information is lost.
With lossy compression, the file size is the key. Lossilly encoded files do away with the absolute most they can, making for a tiny, low quality file.
As far as lossless compression is concerned, the goal is to keep the high quality of the original media file. This means a greater level detail is present, but the file size is also generally greater.
The terms lossy and lossless mean the same in the context of image, audio, video, and other media files. Throughout this article, as in the example above, we will be using image files as an example, but the principles apply.
When optimizing image files for the internet, one is usually thinking about reducing the size of the file. In this case, lossy compression has several advantages: your images can often be reduced to mere kilobytes of data, conserving storage space. If you are stuck for storage, you might want to resort to lossy formats in order to do more with less.
There is another important advantage to small file sizes – website loading speeds. A lot of the time, lossy media is completely fine. Most times you don‘t need high-resolution images for your website graphics, for instance.
So, when are lossy file formats used? Most times. They load faster and they get the job done.
As we‘ve mentioned before, some degradation is a necessary product of encoding. With lossless formats, you get as much of the data as it is possible to save. This means that the quality of the media encoded is very good, but that goes at the expense of size and speed. Since the goal is to preserve as much of the original input as possible, lossless compression often only means slightly slimmer files, which means slower loading times and greater file sizes.
However, maybe lossless media is just a feature of your website. Maybe you are hosting an archive of rare old video stock for filmmakers and documentarians, or high-resolution scans of Cold War era military maps for history nerds. In that case, you really need the best possible quality for your media. However, loading speed is related not only to your visitors’ user experience – it is a question of performance. Slow loading may cause more than just frustration in visitors, too. If they leave the website before it even loads, your bounce rate will be adversely affected, and that may in turn have an effect on your SERP ratings.
This means that you need to take the adverse effects of using large files on your website and try to mitigate them.
Lossy. Definitely.
If you thought that’s suspiciously simple, you are right.
As we‘ve said before, lossy formats mean lower media quality, but most often it does the trick.
So, lossy it is.
Unless your entire concept revolves around high-quality media files. In that case, you have to go with lossless.
Regardless of the concept, though, sometimes you just need one large file or two to achieve your website‘s purpose or design vision. In that case, you need to do your best to avoid it adversely affecting your visitors‘ experience of your website.
A thing you can do, in the case of images, is not make your visitors load all your images at once, but rather offer them an image gallery with clickable thumbnails. The thumbnails are quick to load, and the visitors will know to expect a slower loading time for the full-size image. In the case of video or audio, you may offer compressed versions as demos which load with the website, and download links for the full versions. Most websites host video externally, anyway.
In Conclusion
As you can see, we can‘t offer you a straight answer. It all depends on what you wish to use the media for. Need some background music? An .ogg or .mp3 will do just fine. A .flac file will take ages to load, but is indispensable to audiophiles and might be appreciated by sound engineers. Want some fun ornamental graphics for a vignette on your website? A tiny .png is probably fine. Hosting digital photos? A high-resolution .jpeg (or .jpg) is a must. Consider your options with regards to server space and your website‘s performance, and make the choices which work best for you.
