CODECs, the knowledge everyone needs, but no one wants to learn.
I tell you the information I have learned about CODECs through testing, and documenting so you don’t have to do it yourself.
CODECs are a device or program that compresses data to enable faster transmission and decompresses received data — as explained by Google. In my words they are different file types. Whether that be image file types, audio file types, or video files types. There are tons of them, and each of them are different in some way. Basically different file types have different processes as to how they save and compress your data, and each process has a different outcome. In order to be a better designer, you need to know which file types are best for your situation. This is how I learned to be a better designer.
The first thing that I learned was the different CODEC types, and trust me there are a lot. They are all made for specific things, and yes, all of the acronyms actually stand for something.
After reading up about each file type and what they are best used for, I created a scenario to help me organize all of the assets I would collect for testing later. It also helped me become better at asset allocation, and file organization within my own documents.
This video goes over what CODECs are in more detail:
To really learn and see for myself the differences between the file types, and their different quality settings, I had to test multiple photos (six to be exact) that were vastly different from each other to see the full spectrum of outcomes. I tested each other the 6 photos as a JPEG, JPEG 2000, PNG, GIF, and DNG. And within each different CODEC I tested different quality settings. This way I could figure out which file type was the best for the photo/situation I was working with, and what I could get away with quality wise.
The lower the quality the lower the file size. A lower file size is always better, but you don’t want to sacrifice image quality and end up with a blurry, pixelated image. I tested these images to see if there really was a difference between an 80% quality JPEG and a 60% quality JPEG. Or whether an image exported through “Save As” was different than an image exported through “Export As”. It seems tedious, and yes it was.
To begin the testing process I came up specific processes to export each photo as, while changing the image quality within each file type. This would let me test specific qualities in the image, and keep everything consistent so the test results wouldn’t get messed up.
Once the testing process was set up and all of the assets were collected I began the long testing process. Each photo was tested multiple times at different quality settings, in multiple CODEC types. Then once I had all of the images saved, I selected a specific spot on the image and zoomed in to see the differences better. I evaluated each image visually, and size wise then compared them to each other, and the same images of exported through different CODECs.
After hours of testing and comparing, I have come to the conclusion that when dealing with highly saturated photos, JPEG or PNG files are the best way to go. Anything that has skin tones, stay away from GIFs, especially low quality ones (the color range is very low). For an image that has muted tones, or intricate patterns, any file type will preserve the image very similarly, but their files types can have a huge range! JPEGs and PNGs (apart from PNG 24) have relatively small file sizes, and you can get away with having a lower quality image, 60% is usually fine for every day things. JPEG 2000 is also a great alternative to JPEGs or PNGs for most photos, but some programs and software do not support it, so be careful and do some testing/research before using it.
Understanding the difference in CODECs is something that can help you even if you aren’t a UX designer. Web developers rely heavily on this information. It can even help photographers and videographers when compressing their images. You can check out how I have used my knowledge of CODECs with my photography here: https://medium.com/brittany-keller-photography
I also use this knowledge of CODECs to keep file size down! You can check out how I used the knowledge I learned from this study in the digital magazine I created here: https://brittanykellercreative.com/crossfit-journal-reamped
Knowing which CODECs were made for what, and which ones work best for your situation can put you bounds ahead of other designers who don’t know. We want to be the best designers we can be, and in order to do that, we have to know the tools we are using. Because of the project, as tedious and boring as it was, taught me a lot about file types, what I can do with them, and what I can get away with when using them.
