{"id":38099,"date":"2022-06-02T15:00:38","date_gmt":"2022-06-02T13:00:38","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=38099"},"modified":"2022-06-02T14:59:01","modified_gmt":"2022-06-02T12:59:01","slug":"lossy-vs-lossless-formats","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/lossy-vs-lossless-formats\/","title":{"rendered":"Lossy vs Lossless Formats &#8211; Which is Better For Your WordPress Site?"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]No matter what kind of website you are running, chances are you are <strong>hosting content in multiple formats<\/strong>. Also, whatever else you are doing, you are also likely working on improving your website and <strong>making it work better for you<\/strong>, your staff, and your visitors. How does the format you store your files in affect your website\u2018s performance or its user experience? And where does the <strong>lossy vs lossless<\/strong> dilemma figure into the whole story?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As is so very often the case, <strong>there is no simple answer<\/strong>. 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<strong> the difference between lossy and lossless formats<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2018s what we\u2018ll be talking about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#difference-between-lossy-and-lossless\">What Is the Difference Between Lossy And Lossless<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-are-lossy-formats-used\">When Are Lossy Formats Used<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-are-lossless-formats-used\">When Are Lossless Formats Used<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#lossy-vs-lossless-final-verdict\">Lossy vs Lossless: Final Verdict<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"difference-between-lossy-and-lossless\"><\/a>What Is the Difference Between Lossy And Lossless<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Is-the-Difference-Between-Lossy-And-Lossless.jpg\" class=\"attachment-full size-full\" alt=\"What Is the Difference Between Lossy And Lossless\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Is-the-Difference-Between-Lossy-And-Lossless.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Is-the-Difference-Between-Lossy-And-Lossless-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Is-the-Difference-Between-Lossy-And-Lossless-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Is-the-Difference-Between-Lossy-And-Lossless-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First things first: what is the difference between lossy and lossless? Well, it\u2018s <strong>all down to encoding<\/strong>. Encoding is the process of converting analog input into a digital signal and storing it in a format readable by computers \u2013 a file. This file is then decoded and displayed for website visitors using a browser.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 \u2013 <strong>rendered into ones and zeroes<\/strong>, if you will.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is what encoding is all about:<strong> converting real-life information<\/strong>, in this case an image, into an electronic signal.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Inevitably,<strong> some information is always lost<\/strong> \u2013 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 <strong>no truly lossless encoding<\/strong>. But the difference between lossy and lossless compression is how much information is lost.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-are-lossy-formats-used\"><\/a>When Are Lossy Formats Used<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossy-Formats-Used.jpg\" class=\"attachment-full size-full\" alt=\"When Are Lossy Formats Used\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossy-Formats-Used.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossy-Formats-Used-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossy-Formats-Used-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossy-Formats-Used-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">optimizing image files for the internet<\/a>, one is usually thinking about <strong>reducing the size of the file<\/strong>. In this case, lossy compression has several advantages: your images can often be reduced to mere kilobytes of data, <strong>conserving storage space<\/strong>. If you are stuck for storage, you might want to resort to lossy formats in order to <strong>do more with less<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There is another important advantage to small file sizes \u2013 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-mobile-page-load-speed-in-wordpress\/\"><strong>website loading speeds<\/strong><\/a>. A lot of the time, lossy media is completely fine. Most times you don\u2018t need high-resolution images for your website graphics, for instance.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, when are lossy file formats used? Most times. They load faster and they get the job done.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-are-lossless-formats-used\"><\/a>When Are Lossless Formats Used<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossless-Formats-Used.jpg\" class=\"attachment-full size-full\" alt=\"When Are Lossless Formats Used\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossless-Formats-Used.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossless-Formats-Used-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossless-Formats-Used-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/When-Are-Lossless-Formats-Used-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As we\u2018ve mentioned before, <strong>some degradation is a necessary product of encoding<\/strong>. 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,<strong> lossless compression often only means slightly slimmer files<\/strong>, which means <strong>slower loading times<\/strong> and <strong>greater file sizes<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, maybe <strong>lossless media is just a feature of your website<\/strong>. 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,<strong> you really need the best possible quality<\/strong> for your media. However, loading speed is related not only to your visitors&#8217; user experience \u2013 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This means that you need to take the adverse effects of using large files on your website and try to mitigate them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"lossy-vs-lossless-final-verdict\"><\/a>Lossy vs Lossless: Final Verdict<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Lossy-vs-Lossless.jpg\" class=\"attachment-full size-full\" alt=\"Lossy vs Lossless\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Lossy-vs-Lossless.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Lossy-vs-Lossless-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Lossy-vs-Lossless-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Lossy-vs-Lossless-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Lossy. Definitely.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you thought that&#8217;s suspiciously simple, you are right.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As we\u2018ve said before,<strong> lossy formats mean lower media quality<\/strong>, but <strong>most often it does the trick<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, lossy it is.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Unless your entire concept revolves around <strong>high-quality media files<\/strong>. In that case, you have to <strong>go with lossless.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Regardless of the concept, though, sometimes you just need one large file or two to achieve your website\u2018s purpose or design vision. In that case, you need to do your best to avoid it adversely affecting your visitors\u2018 experience of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-image-gallery\/\">an image gallery<\/a> 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/youtube-or-vimeo\/\">host video externally<\/a>, anyway.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, we can\u2018t offer you a straight answer. It all depends on what you wish to use the media for. Need some background music? An <em>.ogg<\/em> or <em>.mp3<\/em> will do just fine. A <em>.flac<\/em> 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 <em>.png<\/em> is probably fine. Hosting digital photos? A high-resolution <a href=\"https:\/\/qodeinteractive.com\/magazine\/jpg-vs-jpeg\/\"><em>.jpeg<\/em> (or <em>.jpg<\/em>)<\/a> is a must. Consider your options with regards to server space and your website\u2018s performance, and make the choices which work best for you.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Optimizing your content? Can&#8217;t decide on lossy vs lossless? Check out our handy guide on media file optimization!<\/p>\n","protected":false},"author":16990,"featured_media":38112,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[30,61,4,13],"class_list":["post-38099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-creative","tag-images","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=38099"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38099\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/38112"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=38099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=38099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=38099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}