File Formats and UX
Why it Matters
Understanding different file formats (containers), CODECs, etc. is monotonous and boring (trust me, I took a class on it at university.), BUT it’s a big deal and oftentimes overlooked. Google says you’ve got 3 seconds for your site to load or you’ll lose 53% of website visitors. 53%! Damn. I guess it's time we learn about the monotonous… or hire someone like me to know it for you ;)
I’ll try to make it a little more interesting by showing you how I made an iBook file take up less space than the last picture you took on your phone. Okay, that’s not true, but if it weren’t for the video it would be.
The Process
Before I get into it, I’ll explain my process. I took the images from my iBook and threw them into Photoshop one at a time. From there, I ran multiple tests by saving them in different ways such as using Save As, Export As, and Save for Web. For each different method of saving the images, there are more options for example with a JPEG, you can select what quality you want the image to be saved at (1–10). PNG offers variations as well such as saving it as an 8-bit, making it transparent, etc. With that being said, you’ll know that I mean I saved the image using Save As at a 6 quality when I say “I saved it at a 6”.
Making of The iBook
There’s a lot more to this documentation, but this part is centered on a short iBook about Into the Spiderverse. Here’s a GIF of the iBook before we jump in.
Now that you can see it, let’s take a closer look at the assets within it.
I used JPEG for almost all of the background images because JPEGs are typically smaller than PNGs. I should also point out that nearly all of the assets I used started out being at the very least 15 MB if not up into the 20s.
I chose to export these as PNGs because they can have transparent backgrounds. For nearly all of the PNGs I exported as 8-bit which helped make them even smaller.
I found that for some reason, within Photoshop, Save As works better for JPEGs while Export As works better for PNG.
Next, I get into the video which proved to be tricky to make the file size smaller.
The video threw me off. I couldn’t understand why I couldn’t get a similar file size with close to the same quality as the original, but I couldn’t. The files that were close to the same quality when rendering were much, much higher.
Conclusion
Honestly, being able to tell the difference between the images in this article is almost impossible than in the actual report, but you still get the gist. I played around with the file formats and sizes until I was able to get them to be as small as possible without losing quality that’s visible to the naked eye. JPEGs were typically best when using the Save As method at around a quality of 6 and sometimes I could get away with lower. PNGs are definitely better using Export As. Honestly, if you just stick with those two methods you’ll be alright. Oh and if you didn’t read that last slide, I just want to point out that overall, the iBook was 15.5 MB and the video took up 12 MB of that. That means that the iBook without the video but with all of those high-quality images ended up equalling 3.5 MB. That’s insane! To give a bit of comparison. The last photo you took with your iPhone probably has a bigger file size than all of the images used in this project combined.
By the way, isn’t it crazy that the method you choose to save an asset is going to change the outcome in quality and size? I don’t get it, but hey, it is what it is.
I learned a lot from this project. This was just a piece of it, so if you want to hear more, reach out through LinkedIn.
Nikolas Sprunt was a student at Utah Valley University, where he studied Interaction & Design. The following article relates to DGM2341 taught by Professor Michael Harper and representative of the skills learned.
