Lossy vs. Lossless Compression – Idiot’s Guide

Lossy vs lossless compression is one of the most searched phrases among photographers and web designers. Choosing one over another can save your hard drive space, make your site faster or even degrade the quality of your photo.

I am asked so many times the differences between lossy and lossless compression, and which one is better. So, I thought that I should write one article on it so that I can give this link to all the people who ask me the differences between lossy and lossless compression.

1. What is lossy compression?

Lossy compression reduces the size of the file by removing some of the details and colors.

Some similar type of data is grouped or averaged out and make the resulting file smaller. For example, there are 10 pixels side by side in a photo and they all have similar but slightly different shades of blue. Lossy compression would average out that blue color and the result would be somewhere around 1 shade of blue.

The changes are normally not visible to the human eyes for a low compression value because human eyes are more sensitive to the brightness rather than colors. So, unless the brightness is altered, you will be having a hard time to find out if the images are compressed because lossy compression does not alter the brightness of the photo.

1.1 Example of lossy compression

Here’s a screenshot of lossy compression. The images are 300% zoomed in. You can clearly see the difference in quality.

 

1.2 How to decide the compression value in lossy compression?

The amount of details and colors that we can remove from a photo depends on the compression value. When you use any tool like Photoshop or online websites to compress an image, you’ll see a slider where you can decide the value of the compression. Higher the value of compression, smaller the file size and lessen the details and colors.

Examples of lossy files – JPG/JPEG, audio and video files.

1.3 Each time you save a lossy file, some amount of details is lost

Yes, you read it right. Suppose you have printed photo and you took a photo of it from your iPhone. Now, the photo you’ll see on your iPhone will not have 100% of the details that are present in the printed photo. Already, some details are lost.

Now, you took a photo of the same photo on your iPhone from your Android phone. Now, this Android phone’s photo will have even lesser details.

The same thing happens when you edit a lossy file like JPG. When you edit it for the first time and save it, some of the details are lost but that’s OK. When you can again edit it and save it, more details are lost. So, basically, every time you edit and save a file, some details are lost.

1.4 How to avoid lossy compression?

The only way to avoid lossy compression is to use lossless file types like PNG, TIFF, and PSDs. If you know that you need to keep every single of details and colors, save the photo in PNG or TIFF format. The file size will be larger, but you get to keep the details.

1.5 Who should and should not use lossy compression?

Should use when:

  1. If you’re going to send the image to someone and he’s not going to print it
  2. For emails so that the receiver can see the image in lesser time.
  3. For webpages (but up to a certain amount; don’t overdo it) so that it decreases the page load time. You should also make sure that your images’ dimensions are complying with the width of your site. For example, there’s no point in adding a 1600 pixels wide image to a site which is 960 pixels wide because the image will be realigned to 960 pixels.

Shouldn’t use when:

  1. You need to re-edit the image because the quality decreases each time you save it
  2. You need to print the photo
  3. You’re a photographer

1.6 Google also encourages lossy images for websites.

Do you use Google PageSpeed Insights? If so, you’re probably familiar with the warning that says to “Optimize Images.” Back in 2017, Google updated their documentation and recommend using lossy compression as a way to further speed up your site.

2. Lossless compression

Lossless compression does not remove the details in the file, so your file size does not reduce.

A typical example of lossless compression is text files, spreadsheets, etc. You definitely don’t want your financial data from the spreadsheet to be edited out.

Example of lossless files PNG, TIFF, PSD, RAW files, and so on.

2.1 Who should and should not use lossless compression?

Should use when:

  1. You need to re-edit the image because the quality decreases each time you save it
  2. You need to print the photo

Should not use when:

  1. If you’re going to send the image to someone and he’s not going to print it
  2. For emails so that the receiver can see the image in lesser time.
  3. For webpages (but up to a certain amount; don’t overdo it) so that it decreases the page load time. You should also make sure that your images’ dimensions are complying with the width of your site. For example, there’s no point in adding a 1600 pixels wide image to a site which is 960 pixels wide because the image will be realigned to 960 pixels.

3. Lossy vs Lossless (Tabular comparison)

Lossy filetypesLossless filetypes
Reduces the size of the file by removing some of the details and colors.Does not reduce details and colors.
Takes less space in your hard driveTakes more space in your hard drive
Should use when you need the photo just to show like for emails and websitesShould use when you need to re-edit the photo multiple times or you need to print the photo
Example: JPG, audio files, video files, and many moreExample: PNG, TIFF, RAW, PSD and many more

 

Adobe Photoshop vs. Adobe Illustrator

For every craft, there is a different set of tools, each serving their own purpose. Some of these tools could look alike, some serve similar purposes, but there are often essential differences which make each of those tools the best option for a single operation.

In graphic design, the difference between Adobe Photoshop and Illustrator alludes most common user, but those who truly desire to become the masters of the craft should be acquainted with fundamental differences between these two pieces of software. In order to make things clearer, we decided to create this article, which is going to show the main differences between Photoshop and Illustrator.

1. File types

Photoshop uses raster files, as opposed to Illustrator which is manipulating vectors. A raster file is any graphic created by closely arranged blocks of various colors. Another word for raster file is a bitmap, which many people have heard of before. The trouble with raster graphics is that you can zoom in only so much until the image begins to look all squared and losses its original crisp and sharpness.

Vectors, unlike pixels, allow the computer to render images much smoothly. The reason why vector graphics are much easier to scale is that they are constructed via a series of mathematical formulas, instead of colored blocks. Therefore, if you would try to enlarge or make an image smaller, the quality would stay the same.

Raster file types include:

  • JPEG
  • PNG
  • GIF
  • MPEG4

Vector files include:

  • SVG
  • EPS
  • PDF

2. Use

When it comes to Adobe Photoshop, it’s the best choice you could have for manipulation of already created images. Although changing the scale of the object is not the best thing to do with Photoshop, there are many other features like changing background, adding various other objects, etc. In addition, Photoshop is widely used for web graphics, since these types of projects usually stay the same size.

Illustrator, as we already said, uses vectors – a line connected via two dots through a computer algorithm. This characteristic allows enhanced scaling feature which makes Illustrator the weapon of choice for any graphic designer who wants to design logos or any printable graphics.

Imagine having a client who wishes to print an assignment masters logo on T-shirts and business cards. Instead of creating different graphics for each of these purposes, you can simply use Illustrator to create a single design and then scale it in accordance with the project requirements.

3. Different features

Now let’s take a look at some of the more detailed differences between these two software solutions.

Photoshop zooms up to 300 percent but only to display a messy pixelated image. Illustrator shows a crispy sharp image at 900 percent zoom.

Photoshop provides a single canvas, while Illustrator gives you the chance to design in multiple Artboards. This is another reason why Illustrator is a more optimal choice for web designers, as multiple Artboards allow you to work on multiple design options for various devices or screens.

With Illustrator, layers can contain multiple objects, while Photoshop provides you with a single object per layer. This makes Illustrator a better solution for complex graphics which would require adjusting and editing later.

Both Photoshop and Illustrator can create amazing 3D images, however, Illustrator is a more potent solution due to its vector-based nature.

4. Conclusion

As we can see, the difference between Adobe Photoshop and Illustrator is not in regards which one is better or more useful. What separates these two pieces of Adobe Creative Cloud is their purpose. While Photoshop is an excellent choice for image manipulation and simple web graphics like buttons, Illustrator is a tool you would use for logos and printable media.

This article is provided by Cathy Baylis. She is a freelance content writer specializing in leadership, career development and education. She loves sharing her interests with readers, and she has something to say, for sure. Writing is not only her hobby but the profession at the same time.