File Formats and UX
I heard a story once about a recent college grad who was meeting with a company about their website. Why? I don’t really know, but anyway, she had pointed out that their website took a while to load because the image sizes they were using were huge and that they could be much smaller without losing the quality of the images. She also stated that this is probably why their site is seemingly ineffective. She fixed it for them and almost immediately the director in the room offered her their current UX Designer’s position.
Understanding different file formats (containers), CODECs, etc. is monotonous and boring (trust me, I took a whole class on it in college.), 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…
I’ll try to make it a little more interesting though by showing you how I made an iBook take up less space on your phone than the last picture you took with it. Okay, that’s not true, but if it weren’t for the video it might be.
Before I get into it, I should explain my process a little bit. 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”.
There’s a lot more to this documentation, but this part is centered on an 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 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 want to mention that for some reason, within Photoshop, Save As works better for JPEGs while Export As works better for PNG. Why? I have no idea.
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.
Honestly, being able to tell the difference in this article is even harder 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.
Nikolas Sprunt is a student at Utah Valley University, studying Interaction & Design. The following article relates to DGM2341 taught by Professor Michael Harper and representative of the skills learned.