Compression: Your best weapon

Lauren Madsen
A Digital Portfolio of Lauren Madsen
4 min readApr 30, 2017

What do you do when you finish a beautiful photoshop project and are ready to export it? You want it to look the best, so you go with 100% quality right? Wrong! There is a delicate balance when exporting various types of media. Compression can be a dark art. But when understood, can be one of the greatest tools you can have for almost any project.

So what is the goal when it comes to compression? It is to try to find the highest quality with the lowest file size. This balance will be different for every circumstance, so there is not always a one-answer-fits-all solution. Some things to note is what will be the end result? Is it a video, website, song, a combination of several things? Where will your content be placed? Will it appear on it’s own website or many? How will it be viewed? Will it be only viewed on a computer? Tablet? Phone? Who is your audience? All of these things will affect that balance between the highest quality for your viewers and the lowest file size. So you may not know where to begin when dealing with compression but this article can at least give you some tips when experimenting with compression.

Frist lets talk about image compression. There are several different file formats including JPEG, JPEG2000, GIF, PNG, SVG, BMP, and more. Each of these formats have different algorithms that will affect the look of your image. JPEGs are good for raster based images like photographs. PNGs are great for vector images. It is important to know what formats are good for what purposes. If you know what format you want but have no idea what settings so export it with, you can make a little experiment. For my experiment I took several images and ran them through different compression settings and analyzed them. Then tried to figure out how they would be treated in another program. My program of choice was Mag+, an InDesign plugin.

Several tests were created to make sure that I had enough data to make some comclusions. At this stage in the experiment, it was important to have a solid organization to your resulting images. With over 100 resulting images, it needed to make sure I knew what image was what. I included the compression setting in the image name to help me keep track.

For this example I chose this image to be put through a test with different GIF settings. This image has a lot of detail with the brush strokes and a wide range of colors. The resulting images were interesting.

Original Image (on left) and resulting swatches of different compression settings (on right)

The dithered settings were all pretty similar. There is a big jump between the 64 an the 128. The restrictive setting was very different in how it treated the image. It had a harsher change between colors instead of the gradual change like in the others. All of the settings resulted in a smaller file size. Most were under 1 MB.

So what did this give us? Well now we can see a little bit more of how these GIF settings treated our image. But we don’t stop there. Just because we know how the algorithms treated the images, we still have another step. In most cases, this will not be the end result. You might put your image on a website or app or something else. For my end result I used Mag+. When putting the images in Mag+, it treated all the images pretty well. I found that it does render all the images as PNGs. This creates another layer of compression. Sometimes it would decrease the quality and sometimes it would increase the quality. There were options to be able to view the image zoomed in through Mag+ as well. When I experiemented with this option, it greatly increased the file size to something bigger than the original.

You can see how there are many layers of compression. Whether it is the initial editing you do to an image or the other programs that you put the image through, there are so many options and results. It may seem daunting at times, but it is worth it. You will be able to finally have more control over your file sizes and quality.

Why does all this matter? It is a lot of information to take in and it might seem like a lot of work to do just for one image; however, now that you know a little bit more of how you can manipulate your images, you will have complete control over file size and quality. In the industry, this means everything. You will save much more money by being able to decrease your file sizes and your audience will recieve high quality images without the price of a high file-size.

These same principles can be applied to video and audio. Remember that compression can be your greatest weapon. Don’t get overwhelmed by all the exporting setting on those programs. Take control of them and become a master at edting your content!

Lauren Madsen is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to the Compression project in the DGM 2341 Course and representative of the skills learned.

--

--

Lauren Madsen
A Digital Portfolio of Lauren Madsen

UX Designer for voice interfaces. Let’s solve design problems not by falling in love with a solution but falling in love with a problem.