Site icon Hip-Hop Website Design and Development

Lossy vs Lossless Compression: A Beginner’s Guide to Both Formats

Digital images are an inherent part of the web, and it’s hard to create any content without some media. The humble still image is a terrific way to offer extra context to your writing.

However, an image can be enormous in file size without optimization. Lossy vs lossless compression is a common consideration because each can reduce the size of an image, although there are quality trade-offs to consider too.

You will almost always need to apply some compression to an image. This keeps the quality at a level you specify as acceptable while keeping file sizes down. Choosing the right compression level will depend on your end goals and requirements.

For this post, we will look at lossy vs lossless compression. Throughout, we’ll talk about the process an image takes to get “into shape,” what compression is, and many other aspects of optimizing your images.

Differences Between Lossy vs Lossless

When it comes to any digital image compressions, there are several different formats to choose from. Sometimes these will have other names depending on many factors. However, at a core level, you’ll find two types:

In most cases, your decision about which format to use will come down to your end goal: Do you want tiny files, or is your focus on preserving quality?

Lossy compression will remove data it deems unnecessary from the image permanently. It uses many different techniques to achieve this, resulting in much tinier file sizes.

Lossless compression also removes data, but it can restore the original if needed. The goal is to keep quality high, yet reduce the file size.

There are a few ways to achieve this, but the result is often the same. To find out the right option for your needs, let’s first take a step back and review the basics of images and compression in general.

body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border-left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt .novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height:18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4}body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}Lossy vs lossless compression- which one is right for your images? Click to Tweet

Elements of a Digital Image

Like software and web development, there’s often a “stack” to take an image from the camera to the web.

An image starts as “raw” data (hence the name RAW). This is akin to an app’s code: The snippets, lines, and values translate into backgrounds with color, image placeholders, dynamic elements, and more.

For an image, the RAW file presents a slightly different image representation based on the camera manufacturer, editing software, color space algorithm, and more. From there, you edit the image and export it as one of several file formats (more on these later):

An example of editing a RAW file in Capture One.

There are a few different elements that make up a standard digital image:

These elements combine to deliver a final image of varying quality. For example, a large, high-resolution, high-bit-depth JPEG photograph will offer supreme quality and sharpness:

 

An image with high quality.

In contrast, even an image with large dimensions and the ability to display a lot of colors can look poor at a low resolution:

An image with low quality.

This balance is how you develop the core image before applying compression. However, the format you use for the image has a big part in the final quality.

How Web Image Optimization Works

Because image compression is the same in a general sense under the hood, you can apply standard rules to the way you optimize images for the web.

We cover a lot of these concepts elsewhere on the Kinsta blog, but it’s worth giving a quick summary for reference:

It’s a simple format that can give you consistent results, although the compression and optimization is something we’ll expand on over the rest of this article.

To that end, let’s look at the benefits and drawbacks of lossy vs lossless compression.

How Image Compression Can Help Your Web Images

In general terms, “compression” squeezes the minimum and maximum closer together. For example, compression raises the lowest volume in music and reduces the highest. This makes the average level louder to the ear.

For images, compression is more of a reductive process. This means there’s a greater emphasis on taking away data from your image to reduce the file size, while keeping the quality as high as possible.

There are lots of different proprietary algorithms to help reduce image file sizes. In many cases, these are proprietary to a specific company. You’ll find lots of “lossy” and “lossless” compression standards, each with unique descriptors:

The compressions options within ShortPixel.

All that said, there are plenty of benefits to applying image compression that aren’t exclusive to a particular format:

Much like creating a shareable image, playing with various compression values, using a specific company, and choosing the correct algorithm are vital in finding results that work for you.

Pros and Cons of Lossy Compression

Lossy compression reduces the image’s file size, almost to the exclusion of all other aspects. The way the algorithm works is to remove data permanently. This can be as destructive as it sounds.

While we won’t get into the nuts and bolts too much, know that some of the data lossy compression removes is visible in the image. The idea is to offer the best representation of the original, high-quality image at a lighter weight — and this means some data won’t make the cut.

In general, there are a couple of benefits in using lossy compression:

Sign Up For the Newsletter

This brings us to the negatives for using lossy compression — that the image quality will reduce with any amount of compression:

A compression slider for a JPEG image.

You’ll find that color banding — where color shades don’t render in the right way — and a loss of edge clarity will be visible in some cases. Images with fewer colors will show less of this, but the reduction in clarity will still be present.

Also, image degradation is a permanent feature of the compression process. This means there’s no way to reverse the effects at a later date.

Despite the drawbacks, lossy compression is excellent for the web and your site’s performance. The tiny file sizes don’t always result in grainy images, although you can (of course) take things to extremes:

An example of an overly compressed image.

However, lossy isn’t the only option. Lossless compression is an alternative for the quality-conscious site owner.

Pros and Cons of Lossless Compression

Lossless compression does what it says on the label: It compresses an image’s file size as much as possible without affecting the visible quality. It does this by removing image metadata, which can take up unnecessary space:

An image’s metadata.

The lossless compression algorithm also looks for repeating pixel sequences, then encodes a shortcut to display them. For example, take “Command Line Interface.” You will often define its acronym once, then use “CLI” (or your chosen acronym) to reference it at lightning speed

Lossless compression works in the same way in that it’s less destructive. While removing the metadata won’t be reversible, some of the compression will be, making it a flexible algorithm for many uses.

The pros of using lossless compression revolve around retaining quality:

However, there is something to note about how well lossless compression serves specific niches: The range of applications is small. This reduces its overall availability.

All Kinsta hosting plans include 24/7 support from our veteran WordPress developers and engineers. Chat with the same team that backs our Fortune 500 clients. Check out our plans!

Here are some other cons of lossless compression to consider:

Next, we’ll look at the fastest (and potentially best) way to do so.

How to Choose Between Lossy vs Lossless

At this point, you understand the difference between lossy vs lossless compression. However, you still may not know which is the best algorithm to use on your site.

There are two situations to consider:

  1. For most use cases on the web, lossy compression is acceptable to use.
  2. If you want to display photography or photographed art, lossless compression will serve you better.

These considerations rely on using one of the standard web image formats, such as JPEG, PNG, or GIF. However, your compression needs may differ with more modern formats like HEIC and WebP.

We’d go as far as to say that unless you display photography on your site, lossy compression should be your default choice. WordPress compresses images by default, which goes far to illustrate that lossy compression is suitable for almost every application.

Using an Online Compression Service to Optimize Your Images

There are many ways you’ll compress your images before you show them on your site. For example, you might choose to apply compression at the editing stage. This could be a by-product of converting from RAW formats anyway.

However, a popular choice is one of many online services. Each one will offer a selection of algorithms and an exemplary user interface (UI). What’s more, most have some free service, at the least to try out the app before you commit.

We cover a few options in our article on image optimization, although these are WordPress-specific plugins that connect to an application programming interface (API). The good news is that lots of these plugins provide an online interface too. For example, consider ShortPixel:

The ShortPixel interface.

Here, you’ll drag images onto the uploader, then wait for the app to compress and process them. However, you’ll want to choose the algorithm first, as the process will begin straight away.

The choice is simple: Two forms of lossy compression (“Lossy” and “Glossy”), and a lossless option. ShortPixel’s interface does a good job of explaining the difference between each algorithm, and you can download the images within seconds.

Although both can cope with your demands, the Imagify interface looks slicker and more professional than ShortPixel’s. There are also three “compression levels” here — Normal, Aggressive, and Ultra:

The Imagify interface.

The slight difference here is that Imagify starts with lossless compression, and works its way up to a lossy algorithm with heavy artifacts. However, there are a couple of other options you won’t find in other solutions.

For starters, you can keep the EXIF data intact for your image, and even resize them after conversion. This is invaluable at times, especially if you want to apply a level of compression that may otherwise remove EXIF data or limit how you resize an image.

Much like its mythical namesake, Kraken can wrangle your images and apply various types of compression. Most users will opt for either the Lossy or Lossless types.

The Kraken interface.

However, there is also an Expert mode:

The Kraken Expert mode options.

This lets you adjust the compression to your own needs, among other options. For example, you can adjust both JPEG and PNG compression levels, choose to preserve metadata from the image, and even work with chroma subsampling to change the colors further.

Summary

Images can seem like a simple aspect of your site: You take a file, upload it to WordPress, then add an Image Block to display it.

However, there’s a lot more that goes into the process of preparing an image for the web than you may realize. The compression format you choose can impact file size, image quality, and more.

This post has looked at lossy vs lossless compression and summed up which one you should choose. Despite walking a tightrope of quality vs size, lossy compression is perfect for most use cases on the web. Photographers or those concerned about tampering with the quality of images will want to use lossless compression, although there are fewer benefits concerning file size.

What side do you stand on in the battle between lossy vs lossless compression? Let us know your thoughts in the comments section below!

The post Lossy vs Lossless Compression: A Beginner’s Guide to Both Formats appeared first on Kinsta®.