What is a CODEC?
Setting up a testing process + a whole lot of documentation
Before I started this project I didn’t even know exactly what a codec was (yikes) — the truth is I have been using different types of codecs over the past three years without even knowing! A Codec is a computer program or device that uses compression data to shrink or convert files. Have you ever been browsing a shopping website and notice the listing of a product is blurry? Bad compression. Knowing the in’s and out’s of Codecs is crucial to delivering good content without slow loading speeds.
File Formats
After a thorough investigation of image file formats what they do and when to use them, I created my own testing scenario. This scenario would determine which file format would be able to withstand a lot of compression but retain good quality.
File Saving System
For my testing scenario I chose to look at Jpeg, Jpeg 2000, Png and Gif. Before I began testing I had to create a well organized file system (and I’m really glad I did after exporting well over 400 photos in my testing process).
To set up my asset management I decided to use colors tags. By using blue, orange, and gray tags I would be able to keep track of things that were original, compressed, and edited easily. For my naming conventions I used _ underscores to separate the name, how I was exporting the file, and the quality exported. On my testing images I added comments to help me remember the source of the photo, and what I was testing specifically within the photo.
My Scenario
The Challenge
Creating an output system so that every file you saved generated correct results. For Jpeg I chose Export As and only changed the quality bar. I chose to test 25, 50, and 100 percent quality. Jpeg 2000 I used Save As and used a similar quality bar choosing 25, 50, and 100 percent quality. For Png I tested Export As using Png 8 bit and Png 32 bit. Lastly for Gif I used Save for Web and saved Gif as 32, 64, and 128. I then chose 4 different types of photos — Landscape, Portrait, Action, and Architecture. I output each photo based on the scenario above and then picked 3 testing points. I tried to focus on picking test points that had color contrast, texture, and shadows to diversify the results. Within the 3 testing points I then zoomed in at 200% and 400% so I could show the pixels up close.
Conclusion
After testing 4 different images through the testing scenario I came to several conclusions. My guess before I started this process was that Jpeg and Png would be in favor, and I was mostly right. Jpeg retains great quality even at 25% and Png had some similar results. Gif’s 256 color allowance is bad when dealing with anything heavy in color. I tested a black and white building and Gif did really well when compressed because it was only dealing with two colors. I also was able to measure the size of each file when compressed. I found that Png through all my photos was consistently higher in size and Jpeg 2000 or Jpf was usually on the lowest end. My professor said before we started this project that would we would come back and use this project for years to come and I’ve already used it twice for work!
Cassidy Bouse is a student in the Digital Media program at Utah Valley University, Orem Utah studying Web Design with an emphasis in Interaction & Design. This article relates to the DGM 2341 Digital Output Course and is representative of skills learned during the Image Compression Evaluation.
For more of my design projects follow along here @bousehaus
