Professional Documents
Culture Documents
a study
Nick Arvanitas
0419
INTRODUCTION
GOALS + STANDARD
#Goals
The outcome of this project is to demonstrate different file types
and their various export options. After reading through this guide, it’s
anticipated that more knowledge will be gained about the different
file types and how they interact with images, video, and audio.
Process
To compare the file types a variety of images have been chosen. The
subjects of each photo differ to showcase nature, text, people, and
hair. These different images are marked with different focal points to
show where the image is altered the most.
The file types that will be demonstrated are GIF, PNG, JPEG, and
JPEG 2000. It is anticipated that JPEG and JPEG 2000 will handle
larger, more detailed images better, while PNG and GIF will do better
with images with less color. Regardless all will be tested.
2
IMAGE FORMATS
IMAGE FORMATS
IMAGE FORMATS
VECTOR & RASTER
tiff Adobe
TIFF files were originally developed for sending text over scanners. They
evolved over the years and are now used to store multiple layersof color
images.
png W3C
PNG files use a lossless compression. They became popular because of
their high color depth and the ability to have a transparent background.
eps Adobe
EPS or Encapsulated PostScript files are some of the first vector
files created. They require printers that s upport PostScript to
print the vector image. gif CompuServe
GIF files became one of the first popular images fileson the internet. By
ai Adobe piecing together multiple imagesit creates an animation with a relatively
low file size.
AI files originated from Adobe Illustrator. They vary in the fact
that they were developed specifically with a program in mind.
P
svg W3C
SVG files have become popular recently for use in theweb. Since
they are a vector image they can be scaledinfinitely without loss
of quality.
webp Google
WebP is a relatively new format when compared to the others. It
can do almost anything the other formats can as well. It supports
transparent backgrounds, animation, and can be lossy or lossless.
It’s not been adopted widely for one reason old habits die hard.
4
IMAGE COMPRESSION
JPEG
Standard
To avoid any bias with the image rendering, I first had to downsize the
original image. I cropped the image to a 128px by 636px dimension
with a density of 300 ppi. This helped me establish a standard for the
images to work with, and avoid super sampling.
The first image in this set is the truest to the original, with the
following images being exported in increments of 25%. I exported
them through Photoshop using the Export As...feature in Photoshop
cc 2019.
File Structure
Lion_100
Lion_75
Lion_50
Lion_25
Quality 100% Quality 75% Quality 50% Quality 25% Quality 1%
Lion_1 1MB 457.2KB 231.4KB 129.4KB 61.4KB
5
IMAGE COMPRESSION
JPEG
Lion
The noticeable difference between
JPEG images it the macroblocking
through the different quality levels. As
the quality level gets lower, it seems
100%
that the macroblocks get larger.
6
IMAGE COMPRESSION
PNG
transParent N G
PNG has been a long used format made popular by it’s ability to
support transparent pixels. It was commonly used previously for logos
and different typography. It supports less colors than JPEG, but more
than GIF while maintaining a relatively small file size.
File Structure
Water_256_Dither
Water_128_Dither
Water_128_noDither
Water_64_noDither
Water_64_noDither_Snap100
256 Dithered 128 Dithered 128 No Dither 64 No Dither 64No Dither Snap
825KB 716KB 639KB 524KB 281KB
7
IMAGE COMPRESSION
PNG
Water
By applying the Snap feature in the
last column, it changed the colors
drastically, and made them seem more
artificial and harsh. The color gradients
100%
that appear much more smoothly in
the previous column are completely
replaced.
256 Dithered 128 Dithered 128 No Dither 64 No Dither 64No Dither Snap
825KB 716KB 639KB 524KB 281KB
8
IMAGE COMPRESSION
GIF
File Structure
Face_256_Dither
Face_128_Dither
Face_128_noDither
Face_64_noDither
Face_64_noDither_Lossy
256 Dithered 128 Dithered 128 No Dither 64 No Dither 64 No Dither Lossy
521KB 635KB 440KB 335KB 82KB
9
IMAGE COMPRESSION
GIF
Hair
With GIF exporting, the size of the
pixels didn’t seem to change across
the board. As the number of colors
were reduced, the edges didnt
100%
become less crisp or defined, but
overall they stayed the same.
10
IMAGE COMPRESSION
JPEG 2000
4k divided by 2.
JPEG 2000 was introduced in the year (drum roll please....) 2000.
It was made by the same developers of JPEG to supersede their
previous format. The downside is “old habits die hard,” and the JPEG
form is still in the top most popular formats used today. JPEG 2000
is arguably better by it’s different codec, and support of transparent
pixels and animation. However, it’s seriously lacking when it comes to
support with programs.
File Structure
Characters_100
Characters_75
Characters_50
Characters_25
Characters_1
100% Quality 75% Quality 50% Quality 25% Quality 1% Quality
1.6MB 735KB 236KB 66KB 20KB
11
IMAGE COMPRESSION
JPEG 2000
Chinese Characters
The hard part about exporting in JPEG
2000 is finding a place that supports
the file format. InDesign isn’t one of
those programs, so to import this file
100%
I converted it back to JPEG since that
seemed like the closest format.
12
IMAGE COMPRESSION
DITHER
Ditherin’
The images to the right show the different effects Dithering has on an To better understand the effect Dithering has on an image, I used
image. To show this I exported the same image 4 times using the Save
for Web (Legacy)... option through Photoshop. I exported the image
as a PNG file that only uses 2 colors. This helped me better isolate the
Dithering effect to show exactly what was happening.
The method that seemed to recapture the original photo the best was
Dithering by Diffusion. With No Dither the photo was extremely dark,
and with Pattern and Noise options the images were drowned out
with white pixels.
13
IMAGE COMPRESSION
MULTIPLE EXPORT JPEG
File Structure
Headshot_1
Headshot_2
Headshot_3
Headshot_7
1st Compression 2nd Compression 3rd Compression 7th Compression 10th Compression
Headshot_10 455KB 1385KB 1487KB 1656KB 1722KB
14
IMAGE COMPRESSION
MULTIPLE EXPORT JPEG
15
USE CASE SCENARIO
IMAGE FORMATS
WEB
GOOGLE CHROME
Optimus PNGrime
17
WEB
GOOGLE CHROME
JPEG GIF
18
CONCLUSION
GOALS + STANDARD
Takeaway
In a perfect world where file sizes could be whatever we want them
to be and there was no limititations on pixel size, images would look
pretty good. Viewing the images at 100% for JPEG the differences
weren’t completely obvious. Sure there was some macroblocks here
and there, but the image quality wasn’t as bad as originally expected.
Most of the errors that are comitted in this day and age, is when
images aren’t used on a pixel:pixel ratio, or if the wrong export option
is used (a PNG or GIF vs JPEG).
However, for best practice for high quality images here are the main
takeaways:
19
VIDEO FORMATS
IMAGE FORMATS
VIDEO FORMATS
OVERVIEW
webm Google
WebM was the Google’s sister project for making WebP, an image file
format. Originally based off the mkv container, both WebM and its codec
(VP9) are royalty free. It has proved to have better quality and be more
Other (Metadata, Subtitles, etc.)
efficient than its predecessors.
21
VIDEO COMPRESSION
STANDARD
MP4_H.264_Youtube
Container Codec Defining Feature
This on average made the file size 20% larger where the quality level
remained the same
22
VIDEO EXPORT
STANDARD
Export
All videos started out as an HD resolution MP4 H.264 format. They were then
exported through Adobe Premiere Pro. From here a 1:1 preview was opened through
QuickTime, and a PNG screenshot was taken of the entire image. The images were
then uploaded to Indesign and zoomed in 200% so that fine details could be seen.
Some of the effects seen are caused from the PNG export and not the video itself.
Normally the videos would be directly imported into the PDF document, however file
types such as MPEG and HEVC are not supported. Thus all were uploaded as PNG’s
for consistency.
23
VIDEO COMPRESSION
TRAIN
Blue Hat
Right off the ‘hat’ the wider range of colors that MOV supports is
MP4 H.264 Youtube MP4 HEVC
noticable. The video overall looks darker and many artifacts are
visible. Compare this to the MPG file which overally looks smoother
but supports less colors.
24
VIDEO COMPRESSION
CAMBODIA
Stacks
The MPG file has taken the smoke stack and turned it into one
MP4 H.264 Youtube MP4 HEVC
big blob. Whereas the rest of the files can support the smaller see
through smaces. The Youtube export seems to show a bit more darker
colors than the HEVC as well.
25
VIDEO COMPRESSION
FOOD
Hair
My wife on a train in China was the perfect way to showcase how
MP4 H.264 Youtube MP4 HEVC
video compression effects hair. The color seems warmer with the
MPG output as a pinkish shade appears in the background. Both
the HEVC and the MOV seem to capture the finer detail while the
Youtube video seems to have an overall lighter tone.
26
VIDEO COMPRESSION
MAHJONG
Tiles
These Mahjong tiles are another great example at looking at finer
MP4 H.264 Youtube MP4 HEVC
details. Once again the MPG file seems to have the worst quality
and have the most blurred numbers. The other 3 seem to be pretty
consistent in quality.
27
VIDEO COMPRESSION
SIZE COMPARISON
Food
Cambodia
219MB
211MB
Train
Mahjong
188MB
173MB
28
VIDEO FORMATS
ALIASING
29
USE CASE SCENARIO
IMAGE FORMATS
30
WEB
SAFARI
Phase 2
The next step was to send the videos through my use case scenario test by publishing
them on the web. Through using HTML I was able to make a video tag that would
display the full resolution. The catch was that for web best practices I had to keep the
video under 7MB. This required me to be more selective when it came to exporting.
In the end all of them ended up being under 7MB for a 10 second clip with MPG as
the largest file (6.7MB) and Twitter 1080P being the smallest (3.2MB).
From here the videos were added through HTML coding, and accessed through Safari
(side note Google Chrome wouldn’t support the .mpg file format)
31
WEB
SAFARI
Limited Space
When size matters so does the exporting format. When keeping it under 7MB the
differences became a lot more obvious. The first surprise came with the 1080p Twitter MP4 H.264 480p Vimeo MP4 H.265 720p
export option. Although it was listed as HD and the output had the largest resolution,
the quality was severely lacking. In fact, exporting at a lower resolution and having it
scaled larger had less artifacts and better aliasing.
Another surprise came when looking at the MPG format. This had the largest file type,
but arguably the worst quality. Granted .mpg files are the oldest out of the bunch, but
it brings up the question “how much of quality loss is due to old file format exports?”
32
AUDIO FORMATS
IMAGE FORMATS
AUDIO FORMATS
OVERVIEW
Fast-forward to mid 2010 and the music industry was changed again. Music piracy
was running rampant with consumers outraged by the rising prices to own music,
especially when one could stream Youtube for free (even without ads in those days).
This begged the question whether it was needed to own music or not, and many
people made the switch to streaming services such as Apple Music or Spotify.
All audio will be sampled at 44,100 Hz with a sampling rate of 16 bits per sample.
34
AUDIO COMPRESSION
MP3 320kbps
Standard
All songs were played through a 4 channel speaker through Bluetooth 4.1. Some of
the loss in sound quality was due to playing through Bluetooth, however this did not
skew the results since all the files were played in a similar manner.
35
AUDIO COMPRESSION
M4A 256 KBPS
Apple’s equivalent
Apple originally designed the .m4a file to compete with the .mp3. Said to have the
same file quality but a larger size, the file was put to the test. It preformed surprisingly
well too! The sound seemed almost identical to that of the 320kbps .mp3 file. One
interesting thing to note though, is when converted through iTunes and uploaded
to audacity to view, it came out as a mono file instead of a stereo file. This seems to
be however a compatibility issue with using an arguably outdated software such as
Audacity that lacks support for such file types.
36
AUDIO COMPRESSION
WMA 192KBPS
Windows Media
Out of the 3 audio formats .wma was the one that lacked the most in terms of audio
quality. This could be because of it’s lower bitrate compared to the other 2 file
formats. During parts of the song with reverb it sounded a bit tinny and lacked a bit of
the sound depth the other 2 had.
37
USE CASE SCENARIO
IMAGE FORMATS
38
WEB
GOOGLE CHROME
Compatibility
The 3 audio formats were then added through HTML to test sound quality through
Google Chrome. However, this was very short lived because only the .mp3 file was
directly compatible through HTML5. The sound quality through adding it seemed to
be relatively unchanged as well.
39
CONCLUSION
IMAGE FORMATS
40
CONCLUSION
TAKEAWAY
Final Remarks
Whether it comes to images, video, or audio: file types matter. It’s not good enough
to use a file type just because it’s popular, or it’s been used for a long time without
considering the pros and cons of each one. Not all popular file formats have the best
quality, but when it comes to compatibility they are usually unmatched.
Such are the constraints we need to know if we call ourselves designers. Carelessly
choosing file types, and bad organization techniques will inevitably lead to quality loss,
and that’s not okay.
Because if we don’t take a stand against bad file type practices, who will?
41