Why File Types Matter
Finding balance between file size, look and output quality
We’ve all had a time when we’ve seen a low resolution image or video online and it forces us to squint and reel back a little in disgust. I’ve found myself groaning when online streams suddenly buffer and change to 420p. Its safe to say that we have become accustomed to a near HD quality in this age of constant technology and that anything lower than 720p resolution is an eye-sore that diminishes any hope of continuing as we usually hit the refresh button or simply exit.
Knowing that quality is an important facet to interactive media but also knowing that media must also run effectively encouraged me to delve into a handful of digital file types common to image, video and sound. I studied commonly used file types and went on to test them against each other before creating an interactive iBook as grounds for a final testing area.
Which One?
Some file types are unique while others are used for a specific purpose, especially when it comes to image formats. Another interesting concept of file types is that some are used for transportation rather than display. With each file type I chose a single file that was of high quality to begin with and drove it through multiple types of settings in programs such as Adobe Photoshop and Adobe Media Encoder.
Image
Most commonly used image types are JPEG, PNG, GIF, PSD etc. A few key things to look for when choosing image type is if it is a “lossy” (loses data when compressed) or a “lossless” (retains data when compressed) file type. This can greatly impact the life and look of an image. Another element to consider is if the image is a vector or raster image, meaning can it be scaled up and down without quality being affected. If it is raster then the image can be affected by scaling.
Audio
When researching audio, the formats evolved fairly quickly and most audio formats became points in history. Most commonly used these days is the infamous MP3, WAV with the growing AAC in tow. These files types tend to retain a good amount of audio data and make for smaller files sizes which make streaming easier, although the difference in compression can be heard. Some of the dinosaurs of audio are file types such as OGG, WMA and FLAC, which were created for a somewhat specific formats.
Video
While audio has an ever changing history, video follows in the line of image file types in that it is fairly consistent in what is used. The most common video format is MP4 (H.264) and like its audio counterpart MP3, its a good format for streaming and having a satisfactory quality.
Case Study - Interactive ibook
With the case study, I decided to use iBooks author to create a project of what could be considered a real piece of interactive media that a person might read or download. I decided to focus my topic on a favorite video game of mine called “Overwatch”. I chose this topic as I knew that I could get high quality assets from the Blizzard Entertainment press site for Overwatch such as images (used in this case scenario) as well as audio and video.
When compiling my media, I chose the PNG format from the press site as the PNG file type is lossless, meaning there would be no loss of data and the image would be high in quality. PNG also made it so I would have data to work with if compressing the file again was needed. Reducing the file size of my images and the book were important for this project as I wanted to determine what the best output would be to balance between the areas of quality and file size. After creating the project, I used iBook author’s method “Export as…” and saved the book in two files types, one of which had three quality choices.
Image quality output
As stated previously, I exported my project in two forms, once in the regular iBook form as is usually intended with iBook author and the second in PDF form. With the iBook file, it gave one option of quality and overall had a good quality that didn’t seem to differ much in quality. The iBook looked exactly like it did in the editing process and was easy to interact with as I had placed pop up boxes in the book.
The PDF file was more interesting as this raised the question of what quality to choose, the first choice was “good”, but was it? Not really. While the file size was small, the quality drop is very noticeable as the images became blurry with the file compression and especially the icons. The PDF best size is comparable to the iBook output, both in quality and file size and overall seems like the best choice, the only downside (the same goes for all PDF outputs), the file is incapable of utilizing the pop up touch features that are used in the iBook version. Finally, the PDF best output seems like a good choice for a high quality file but ultimately, the extra megabyte of file size doesn’t seem worth it as the quality doesn’t differ much from the better output.
Layering Elements
For part of this project I included Icons to represent the abilities of the character that is being covered. I was able to download PNG versions of the icons and compressed them into smaller PNG files so that they retained quality but most importantly retained transparency. I needed the transparency element so that they would be an isolated object and I could pair it with other objects or have it on its own.
As can be seen in the examples above, I originally started by placing the icon on its own (see example 1 in above image) but I felt that although the icon was white it didn’t stand out enough as an interactive element. I then used the shape feature in iBook Author to build a simple circle to place behind the icon (see example 2). As I layered there objects, it immensely improved the look of the icon as well as the implication that it is an interactive object.
While I felt I have achieved a great deal in layering the icon with the circle, the look of the icon seemed flat and after deciding to implement feedback, I added a slight drop shadow (see example 3) to the icon so that it stood out from the circle behind it. With the drop shadow added, I felt that the icon looked more interactive with minimal affect upon the image itself. Slight pixelation can be seen on the edges but not to the point where it affects the image.
Interactive Elements
In regards to the box itself, the default setting gives a solid color pop up box. I decided to change the color to a solid black and then lower the opacity so that the main page background image could be seen slightly through the box but not enough to convolute the text and image. I set an opacity on the pop up box so that it blended with the main background image but didn’t take away from the focus of the pop-up.
To add to the pop-up being the main point when opened, I also added a Jpeg image of the ability being highlighted. With the Image in the pop-up, I was able to lower the quality slightly as the image was a smaller image compared to the large images for the pages. With lowering the quality, I was able to save on file size when saving the images and placing them, which assisted with load time
It was important to take load time into account with the images in the pop-up as they need to be available right away. If the information isn’t available in a pop-up, it takes away from the “pop” as the user is left waiting and isn’t struck by the initial impression when selecting the icon.
Audio Quality Output
When outputting the audio aspect of this project, I decided to follow through with using the mp3 format. From researching and testing audio formats, I felt like mp3 had a good quality and small file size making it a great fit for my intended purpose which was an iBook for use on an iPad. From looking into the iPad specifications, I knew the speakers on an iPad can handle mp3 format ranging from 8–320kbps, once again making mp3 a good choice as the highest mp3 setting I had experimented with was 256kbps. In my final output, I compressed the audio into a mid range of 192kbps which gave satisfactory sound and allowed me to save on some file size.
When displaying the audio clips in the iBook, I chose to use interactive buttons with the overwatch logo on them so that the user could quickly tap and hear the playback. With the buttons, I made them a larger size so that it would beckon the user to interact with them. I also played with different colors for the background circle as I had to highlight the white and orange of the logo. Straight black and white proved to be too light and too dark and didn’t make the icons pop, so I decided to use a lighter gray which helped the icon pop off from the background image. The logo itself, I used a small png image that was transparent sharp but low in file size.
Video Output Quality
The video portion of my iBook was a tough choice to make when compressing and exporting the assets as I feel its a narrow margin between quality and file size balance. I took an mp4 clip (originally 95mb) directly from the game that I had recorded and used the h.265 HD 720p preset to encode my video file. I chose the HD 720p version because in my opinion, it was the best balance for video quality and file size (compression took the 95mb down to 28mb).
While the file size was still bigger than I would have liked it to be, the next file size down was for a 420p resolution which was a step down in quality. Although 420p would have saved me file space, it would have affected the experience and quality of the video. Therefore, I opted to go with 720p as I would save file space and have a good quality video to play in the iBook. When placing the video into the iBook, the iBook author program made further changes to the video as it stated “optimizing movie”.
The optimization didn’t seem to make a difference to the quality of the video but the video does run smoothly in the iBook. Using a 720p resolution, provided me video a good video that was a good choice for use on an iPad and handheld size device.
Balance Found
From researching and experimenting with different platforms of media and the several other options they offer, I have learned that it always comes down to the question of balance between quality and quantity. Of course there are special situation that call for one or the other to be favored, but when approaching a project, you should always try and have a balance. With the example of my use case scenario, I used certain compressions and formats with my assets so that I would have great audio, video and images, while at the same time keeping the file size low so that the ibook could be downloaded easily, opened quickly and even sent over email for sharing as the file was 23mb, which most email services can handle.
The creation of my iBook in the case scenario was made easier by the experimentation and study of the formats I would be using. I was able to determine that JPEG and PNG would work in my project as they saved on file size while still delivering a near top quality image. PNG was especially useful when I needed a transparent image with a low file size. The in-depth study of the image format outputs allowed me to create an iBook with images as a focus because I knew what compressions and formats to use. The same goes for audio and video, although the studies weren’t as in depth as the image study, I was able to differentiate between resolutions and learn what could be used to achieve the goal of placing video in my project.
While file formats are an integral part in understanding project output, Its also important to take into account how the project will be consumed. Knowing what devices and platforms will be used further helps in the process of selecting what file format to use and what compression and quality settings should be used. For example, I didn’t output my media in their highest quality forms as I knew that my iBook would be viewed on fairly small screens with resolutions that wouldn’t fully pick up details of the loss of data. If I had used the highest quality of images, audio and video, I could have come out with a similar looking iBook project but with a much higher file size, making it hard for users to download and use.
Disclaimer: copyrighted material is covered under fair use as the project was for educational purposes.
