2. Darrin Harvard - DGM 2341
Introduction
The way to tell apart a good designer from an average one is if
they know their media, how it works, and how to manipulate it.
As a designer it is very important to understand the media that
one is working with. Although it might be difficult at times be-
cause there are tons of different formats for the different media
types, images, video, and audio, one should at least know the
most popular formats for each different media type.
This is a short and simple guide to get started on the path to be-
coming an expert in order to separate from the average designer
and stick out to employers.
I will briefly cover some of the different formats of images, vid-
eo, and audio and more importantly I will bring a series of me-
dia through some of the different compression methods testing
some of the formats and I will also evaluate what happens to the
quality when brought through those methods.
4. Darrin Harvard - DGM 2341
Background
A series of images, audio, and video
will be used to test and compare several
different compression processes. The file
size as well as the quality will be looked
at to compare each compression format.
While using a series of media and saving
each of them as different formats we
will end up with a bunch of saved files.
Therefore a need of folder structure and
file organization is at hand and highly
recommended so that we know which
file is which and are able to find them
quickly.
Folders
First lets take a look at the folder struc-
ture. The folder structure is usually really
simple but still very important, especial-
ly when organizing a huge project.
There should be a clear starting point
(DGM-2341) and content organization
(Audio Formats, Image Formats, and
Video Formats). However deep the fold-
er structure goes it should have a clear
organization to it.
Take example the Image Format fold-
er: this folder contains folders for each
image compression process that will be
used.
There should be a clear folder name for where each of the me-
dia files will be saved. In this case DGM-2341 (Class folder).
Within the designated folder will then be more folders that
clearly label where each piece of media will be. There is an
Audio Folder, Image folder, and a Video Folder.
Within the Image Formats folder are a couple files and still some more folders. The
four images seen above (The original images) will be brought through a series of
tests using different image compression processes. Therefore having a folder for each
different image compression format that the image will be put through is important.
After the folder structure is decided on, there is a need for the file naming convention
as well.
5. File Naming Convention
Darrin Harvard - DGM 2341
In the case of the original image, it is a bit harder to get the exact
naming convention that is desired because well it is the original,
nothing has been changed yet, we don’t have the details needed
that should be included in the file name.
ICO_Architecture_WebLegacy_JPG_ECP-Opt-Q100.jpg
Assignment Name
Image Name Compression
Process
Compression
Format
Quality
Settings
ECP= Embed Color Profile
Opt= Optimized
Q100= Quality of 100
ICO_ActiveSport_ExportAs_PNG_8bit_Scale500%_PreserveDetails.png
I decided to alter the naming convention just a little bit. In the
quality section of the filename. Instead of using “-” i decided to
continue using “_” instead because it seemed smoother and clean-
er.
6. Walkthrough
Darrin Harvard - DGM 2341
Organization can be key to being a great
employ for any sort of career but espe-
cially as a developer.
Throughout life and through the many
different projects to come, it becomes
very clear that people like organiza-
tion. It simply just makes things easier.
Especially when someone else needs to
look at your work, when there is good
organization, folder structure, and a
clear naming convention, not only your
life but their life becomes better.
I am typically a pretty clean and orga-
nized person and man have I been angry
in the past at work trying to find some-
thing in a mess of a giant folder used by
a whole department with people coming
and going for years without a clear folder
structure and naming convention. It
becomes such a mess.
Even when it is organized, if big enough
things still can be confusing so just do it!
Be organized! Make life simple!
Project;
What is your
Project and what
are it’s needs?
Step One
Naming Convention;
Know your naming
convention for folders
and files.
Step Two
Organization;
Create a general idea
of what the folder
structure will look
like and adjust when
needed.
Step Three
Begin;
Start your work.
Make your folder
structure and create
files according to your
organization and ac-
cording your naming
convention.
Step Four
Adaptable;
Things change a lot so
it is ok to make chang-
es when needed and
better ideas surface.
Step Five
7. Darrin Harvard - DGM 2341
Introduction to Images
As designers, specifically web developers and graphic designers,
images are going to be used daily therefore it is of up most im-
portance to know the different image formats and the compres-
sion settings to be used in order to edit them for the best results.
First off it is important to know what the best results are. When
working with images, any media really, having a good balance
between quality and file size should be the target. When work-
ing in one’s respective career there will always be certain criteria
that needs to be met for a project.
In this simple guide I have chosen 4 images that vary in color,
lighting, and other aspects of images, that I will use in Adobe
Photoshop to put through the JPG, PNG, and GIF image com-
pression methods. Each image format has their use and some
will be used much more than the others. These 3 formats aren’t
the only image formats, but I think these 3 will be a good begin-
ning.
First off I will cover the image file formats, then go over the
compression process that I will use to bring these images
through the different compression methods changing many of
the different settings available for each method. After the pro-
cess has been made I will look closer at the images and evaluate
what happened to the quality and file sizes. Then finally I will
create a project that follows a use case scenario that mimics a
real world project a designer might have and cover some vari-
ables might occur in that setting.
9. Darrin Harvard - DGM 2341
Vector and Raster
In order to understand images it is
important to know the two digital
graphic image types which are Vector
and Raster. Each of these types of
images have there own uses and
advantages.
In a basic explanation, a vector image
uses polygons, line segments that
connect vertices together to make a
shape, in order to create an image.
Raster images use a bunch of pix-
els, simply put dots that vary in size
depending on graphic resolution, in
order to create an image.
After knowing the basics of these
two graphic image types, we can then
look deeper at how these images are
formatted and represented. There are
many different file formats but there
are those that are used daily and oth-
ers that are only occasionally used.
Raster images and vector images
being very different, must also use
different file formats.
In this image we get to see the same image represented in both of the
different digital graphic types. There is a lot more detail in the raster
image which gives it a more realistic look due to the the many differ-
ent colored pixels. The vector image has a different style that doesn’t
look as realistic but still looks great. Each image type is used for there
unique and specific style of imagry.
On the left side of this image we get a deeper look into the raster image
when it is enlargened so that we can see that many pixels form an
image. Then on the right of the image when at a good resolution, the
image becomes clear.
10. Darrin Harvard - DGM 2341
Raster File Formats
.jpeg
Joint Photographic Experts Group
JPEG also seen as JPG was released in
September of 1992 by the Joint Photo-
graphic Experts Group.
JPG files are used for digital still imag-
es whether the image was taken with a
camera or created digitally.
JPG is a lossy compression format used
to change the quality of an image and
its file size to find a balance between
the two. The image should be saved or
exported at the end of your process be-
cause remanipulating a JPG file over and
over causes problems.
.gif
Graphics Interchange Format
GIF was released in 1989 by Steve Wil-
hite, who led a team at CompuServe.
The main thing to take away from GIF is
that it supports animation. GIF is limited
in its color capabilities which causes it
to be used for more simple images and
animations.
Originally, in order to use GIF in anyway
you needed to have a license.
.png
Portable Network Graphics
PNG was released in October of 1996
by the PNG Development Group. It was
originally released with the intent to re-
place the GIF file format. While the GIF
supports animation and PNG doesn’t,
GIF was not fully replaced.
There are PNG8 files which support 8-bit
color like a GIF file and also the PNG24
files which support 24-bit color like a
JPG file. PNG typically has a larger file
size.
PNG is an lossless image compression
format.
.tiff
Tagged Image File Format
TIFF was originally released in June of
1992 by Aldus, now Adobe Sysytems for
desktop publishing.
TIFF are used most for digital graphics,
photgraphers, and in digital publishing.
It is used in publishing because of its
capabilities with scanning and faxing.
.psd
Photoshop Document
Photshop was released in the summer
of 1988 by Thomas and John Knoll.
The psd format was later released as
photshops main file format in septem-
ber of 1994 for Macintosh and then in
November of 1994 for Windows.
What makes the PSD file so different is
that it allows the user to view and edit an
image in individual layers. By allowing
the user to edit individual layers, the
user can highly enhance and manipulate
the image with many effects and styles
built into photshop.
.pdf
Portable Doument Format
PDF was released in June of 1993 by the
International Organization of Standard-
ization (ISO).
PDF was created for the presentation
of digital documents. PDF files can be
viewed, edited, transferred, and printed.
Simple text formatting can be done in a
PDF editor, but any other editing should
be done by other means.
11. Darrin Harvard - DGM 2341
Vector File Formats
.ai
Adobe Illustrator Artwork
Adobe Illustrator was released in March
of 1987 by Adobe Systems.
AI was created for the font development,
typography, and logo graphic designing.
AI while definitely used for typography
and logo designing, it is used for the
creation and editing of vector images.
.svg
Scaleable Vector Graphics
SVG was released in 1999 by the World
Wide Web Consortium (W3C).
SVG was created for 2D graphics with
support in interactivity and animation.
SVG uses Extensible Markup Language
(XML), in other words, text, then uses
a program to render the text in order to
create the image.
.eps
Encapsulated Postscript
EPS version 3.0 was released in May of
1992.
EPS also EPSF was created for the
importing and exporting of PostScript
language files. PostScript is used in
digital publishing and is used to describe
a printed page. PostScript is used with
any printer to read instructions on how
to print the page and rasterize the image,
convert vector images into raster images.
There are two types of compression, lossless and lossy. Lossless
compression means that when the file size of an image is com-
pressed, the quality stays the same. When the file size changes
with lossy compression the quality changes and data can be
permanently lost. This being said lossy isn’t a horrible choice
because it can be balanced and lossless is typically larger in file
size.
13. Darrin Harvard - DGM 2341
Compressing .jpg Images
There are many ways to compress an
image and many different image formats
that can be worked with. For our sake we
are only going to work with .jpg iamges
using Adobe Photoshop at this time.
In photoshop we are going to look at
three ways to compress a .jpg image and
go over the process. Those three ways are
the Save As..., Save For Web (Legacy)...,
and Export As...functions.
Very few may use the Save For Web
(Legacy)... function. Most at the basic
level use the Save As... or maybe the
Export As... functions but don’t really go
into changing any of the settings avail-
able.
If you want to get deeper into the com-
pression settings and become an expert
at the compression process most use the
Export As... function.
The original image size of this beautiful
mountainside is 1125 X 750 pixels with a
file size of 206 KB.
After playing with the different com-
pression settings in the Save As..., Save
For Web (Legacy)..., and Export As...
functions. The file size of the image will
change as well as the quality of the image.
14. Darrin Harvard - DGM 2341
Save As...
Here is the basic Save As... function in
photoshop. As you can see it is pretty
basic and not much you can change. The
only settings you can change really are
the folder location, filename, and file
format type.
Like swaid before, there are a lot of dif-
fernt image formats that can be worked
with.
The simplicity of the Save As... function
is why it is only on the basic level and
why this is the way that most people
compress there files other than the rea-
son of needing to save the work that has
been done.
15. Darrin Harvard - DGM 2341
Save For Web (Legacy)...
The Save For Web (Legacy)... function
offers so much more settings that will
change the file size and quality of the
image being compressed.
We can see that we can change the file
format type, the quality of the image,
we can give the image blur, we can
change wether the image is progressive
or optimized (changes how the image is
loaded), we can preview it in different
colors based on screen type, change the
metadata, mess around with the image
size, change the image resampling, we
can see (in the bottom left under the
image) the file type, file size, and time/
how it is loaded, we can zoom in on the
picture itself and see the pixels up closer
and how they change, and other settings
that don’t pertain to .jpg files.
After playing with the settings a little
bit I was able to get the image size at its
highest size and lowest size.
Ex. A. The image quality is at 100 (Max-
imum) and the image isn’t being opti-
mized or loaded progressively. The file
size as shown is 690.7KB and the load
time is slow.
Ex. B. The image quality is at 0 and the
image is being loaded progressively. The
file size as shown is 79KB and the load
time is pretty fast.
A B
16. Darrin Harvard - DGM 2341
Export As...
The Export As... function may look
like it doesn’t have as many settings as
the Save For Web (Legacy)... function
settings which may make it look like
the Save For Web (Legacy)... function is
better but what makes the Export As...
function better is the compression set-
tings behind the scenes.
We can change the format type, the im-
age quality, the image size with scaling
and resampling options, the canvas size,
the metadata, the color space, and we
have the scale all function, while being
able to see the file name, image format,
the image size, and the file size.
Ex. A. The image quality is at 100 (Maxi-
mum). The file size as shown is 581.1KB.
Ex. B. The image quality is at 0. The file
size as shown is 82.2KB.
The Save For Web (Legacy)... function
Ex. A. had the file size of 690.7KB and
the Ex. B. had a file size of 79KB.
Export As... Ex. A. has a lower file size,
109.6KB smaller, while at 100% quality.
A B
The next step we will take is looking at the quality of the image down to what happens to the pixels when we
change the quality while still taking the file size into consideration. We need to remember that the best image com-
pression process is the one that keeps good qaulity while lessening the file size, a good balance.
18. Darrin Harvard - DGM 2341
Now that we have a basic idea of how we
can compress images in Adobe Photo-
shop, these four images will be brought
through different compression settings
using the Export As... function.
Before we brought the picture of the
mountainside and homes through the
Export As... function using the JPG
compression settings. Now we will be
exporting these images as PNG, GIF, and
SVG formats.
Most of these images started out as JPG
files except the image of the girl on the
top right, which is a raw iamge.
There wasn’t much to report on for ex-
porting these images as .svg files because
they didn’t convert to .svg files. When I
exported them as an .svg file a blank 1kb
file was created and there was no image.
Although these images didn’t convert to
.svg files, they did convert to .png and
.gif files using the Export As... function.
Export As... Compression
19. Darrin Harvard - DGM 2341
Photoshop/Opening Raw Image
This is the page that was opened when I
tried opeing the raw image taken from a
camera in Photoshop. There are a couple
of options but honestly there wasn’t very
much that could be done from here.
You could edit the photo a little bit and
save it. The save options were really
limited. There were a couple of differnt
formats that the image could be saved as
and when working with JPG the quality
could be changed a bit. For the sake of
working with the image using the Export
As... function, I saved the image as a .psd
file and then went through the exporting
process.
20. Darrin Harvard - DGM 2341
Export As... PNG Format
There are two ways to export as a PNG,
Quick Export as PNG and through the
Export As... function.
Unlike Export As... JPG there is no
straight change the quality level of the
image. When exporting as a .png file, the
quality settings that can be changed are
checking the transparency or 8-bit boxes
(Ex. A), the scale of the image (Ex. B),
and the resampling method (Ex. B).
The original file size of this image in its
raw format is 22.5MB. The file size when
the transparency box was checked was
25.5MB, when the transparency box
wasn’t checked it was 23MB, and when
the 8-bit box was checked it was 10.4
MB.
Now when I scaled the image to 200%
the file size more than doubled being
77.5MB but it didn’t look like the image
changed at all.
When the resampling settings are
changed like in the other image com-
pression methods through the Export
As... function, the file size doesn’t really
change.
A B
ICO_HumanPortrait_ExportAs_PNG_Transparency.png
Assignment Name
Image Name Compression
Process
Compression
Format
Quality
Settings
Another example could be:
NoTransparency_Scale 200%_BicubicSharper.png
21. Darrin Harvard - DGM 2341
Export As... GIF Format
The Export As... GIF has even less set-
tings that can be changed. Like the Ex-
port As... PNG there is no quality level
setting but unlike the Export As... PNG
there isn’t even any file settings other
than the format itself.
The only thing that can be changed
when exporting as a .gif file is the image
scaling and the resampling (Ex. A).
The file size of this original image is
230KB. Now when we export it as a .gif
file its file size became 562KB, more than
doubled. The quality of her face also
clearly deteriated a lot going from the
original image to a GIF image (Ex. B).
When I scaled the image to 500% the file
size dramatically changed to 11.5MB.
A
B
22. Darrin Harvard - DGM 2341
Export As... SVG Format
This is what pops open when trying to
export as a .svg file. There is no image.
Although there is no image, the export
settings for exporting as a .svg file are
similar to the settings when exporting to
a .gif file, the only things that can really
be changed are the scaling and the resa-
mpling of the image. Just like PNG and
GIF, but unlike JPG there are no quality
level settings. Just like GIF though there
aren’t any file settings other than the
format type.
24. Darrin Harvard - DGM 2341
Image Quality Evaluation
Now that I have the image compression
process established and have compressed
the original 4 images to many different
formats using different settings, I can
now look closer at these compressed
images and compare how the quality of
the images has changed.
I have established some target areas for
each of the original images so that I can
have a similar comparison amongst the
compressed images. Many of the target
areas were chosen to get a variation of
different colors and type of image to be
compared.
I decided that I would look at the orig-
inal images compressed using the JPG,
PNG, and GIF image formats.
I thought that by using a scale of 200%
and 3200% would allow me to get a good
look at the images and how the quality
was affected.
I also took note of the file size of each
image because not only is quality im-
portant when compressing images but
the file size as well.
ICO_TextPoster_Original
230 KB
Target Area
Text
Small Objects/
Light Rays
25. Darrin Harvard - DGM 2341
Scale - 200% JPG Scale - 200% JPG
Scale - 3200% JPG Scale - 3200% JPG
ICO_TextPoster_ExportAs_JPG_Q100%
662 KB
ICO_TextPoster_ExportAs_JPG_Q0%
63.8 KB
Scale - 3200% JPG
Scale - 200% JPG
ICO_TextPoster_ExportAs_JPG_Q100%
269 KB
Quality of the JPG 0% has
deteriated a lot at 200% scale.
The colors and pixels have
melded together causing
much blurriness. The colors
of the pixels at 3200% scale
has become very different.
Quality between JPG 60%
and JPG 100% is very mini-
mal. Very slight color change
in some pixels at 3200% scale.
No noticable change at 200%.
Although there is almost no change be-
tween 60% quality and 100% quality the file
size is very different.
Forced
Distortion
Forced
Color
melding
26. Darrin Harvard - DGM 2341
Scale - 3200% PNG24Scale - 3200% PNG24Scale - 3200% PNG8
Scale - 200% PNG24Scale - 200% PNG24Scale - 200% PNG8
ICO_TextPoster_ExportAs_PNG_
Transparency
1.52 MB
ICO_TextPoster_ExportAs_PNG_8Bit
423KB
ICO_TextPoster_ExportAs_PNG_No-
Transparency
1.37 MB
Quality of PNG8 looks very deteri-
ated even at 200% scale. The colors
of the pixels have changed a little
bit at 3200% scale. Depending on
the color though it could be worse.
PNG8 doesn’t handle as much
color as PNG24.
There appears to be no quality
difference at all between NoTrans-
parency PNG24 and Transparency
PNG24. Remember though at
times a designer might need the
transparency over no transpar-
enency.
The file size between PNG8 and PNG24 is
pretty big. Although the quality isn’t as good
for PNG8, it has its uses such as for designing
icons or logos using simple colors.
Although the quality of PNG24 NoTrans-
parency doesn’t change when compared to
PNG24 Transparency, the file size is lower
with NoTransparency.
Forced
Color
blocking
27. Darrin Harvard - DGM 2341
Scale - 200% GIF Scale - 200% GIF
Scale - 3200% GIF
ICO_TextPoster_ExportAs_GIF
1.52 MB
Scale - 3200% GIF
ICO_TextPoster_ExportAs_GIF_Scale
500%
11.5 MB
When a GIF image is scaled up the file size
dramatically changes.
At 200% scale the quality is very
different. The quality looks worse
without scaling the GIF image.
When the GIF image is scaled the
amount of pixels increased greatly
which is why the image might look
better.
Of course when the
image has been scaled
up already you can’t
get the same scaling
when brought to 200%
scaling resulting in the
slightly different target
area.
Forced
Noise
28. Darrin Harvard - DGM 2341
ICO_ActiveSport_Original
343 KB
Target Area
Foot in Motion
Background
Audience
29. Darrin Harvard - DGM 2341
Scale - 200% JPG Scale - 200% JPG
Scale - 3200% JPG Scale - 3200% JPG
ICO_ActiveSport_ExportAs_JPG_
Q100%
960 KB
ICO_ActiveSport_ExportAs_JPG_Q0%
74.4 KB
ICO_ActiveSport_ExportAs_JPG_
Q60%
384 KB
Scale - 200% JPG
Scale - 3200% JPG
This image is a little special be-
cause the foot was in motion when
the image was taken causing some
blurriness and the background
audience wasn’t in focus. The color
between 60% quality and 100%
quality look nearly identical.
Although there was already blur-
riness of this image, going to 0%
quality caused even more blur-
riness and sections of the image
appear to have shifted at 200%
scale. The colors have also changed
and melded at 3200% scale.
Forced
Image
shifting
30. Darrin Harvard - DGM 2341
Scale - 3200% PNG8
Scale - 200% PNG8
Scale - 3200% PNG24
Scale - 200% PNG24
ICO_ActiveSport_ExportAs_PNG_8Bit
814 KB
ICO_ActiveSport_ExportAs_PNG_No-
Transparency
2.41 MB
Scale - 3200% PNG24
Scale - 200% PNG24
ICO_ActiveSport_ExportAs_PNG_No-
Transparency
2.7 MB
In this image the background audi-
ence target audience looks slightly
darker using PNG8 although the
pixels of the foot area aren’t darker
but slightly different in color.
Forced
Darkening
40. Darrin Harvard - DGM 2341
Evaluation
Using different compression formats and
settings may dramatically change the
quality and look of the image and also
the file size as well. Using the images I
selected I saw forced color change or
melding, distortion or blurriness, color
blocking, noise, image shifting, and
darknening.
When working with JPG compression
the 100% and 60% qualities were al-
most the same with very minimal color
change. When working with PNG24 the
NoTransparency was nearly identical
compared to the PNG24 Transparency
but had lower file size.
On the right I have compared JPG 100%
quality with PNG24 NoTransparency
and the GIF image.
The GIF image cleary doesn’t compete
with the others here but the GIF format
does have its uses.
When comparing the highest quality of
JPG with PNG24 NoTransparency iamg-
es they look nearly identical. Although
this particular PNG image was high
quality with lower file size, the highest
quality of JPG still had a lower file size.
It is clear that with the type of images
I looked at JPG compression should
be used and doesn’t have to be at 100%
quality.
Scale - 200% JPG Scale - 200% PNG24
Scale - 500% JPG Scale - 500% PNG24
Scale - 200% GIF
Scale - 500% GIF
Scale - 3200% JPG Scale - 3200% PNG24 Scale - 3200% GIF
ICO_HumanPortrait_Expor-
tAs_JPG_Q100%
9.34 MB
ICO_HumanPortrait_ExportAs_
PNG_NoTransparency
23 MB
ICO_HumanPortrait_Expor-
tAs_GIF
11.6 MB
42. Darrin Harvard - DGM 2341
Indesign/Mag+
Indesign and Mag+ were used to create
this project and was developed for and
tested on the ipad. No tesing has been
made on other devices.
I chose to do a media project on the
band Brand New. By using these pro-
grams a detailed short interactive app
was created consisting of the title page,
members page, and the discography
page.
The interactivity comes through the
ability to click on the members faces or
albums on the chapter pages of the two
and the app will jump to the clicked
interactive. Each album has interactivty
by clicking on the info button and the
album details will popup.
This project created some design apsects
that need to be played with in order
to look right and images that could be
compressed to lower the file size.
43. Darrin Harvard - DGM 2341
Image Compression Evaluation
The first issue I ran into was pretty
quick, the title page. I found this image
and brought it through multiple image
compression methods including JPG,
PNG, and GIF.
The GIF and PNG version of the image
didn’t lose much quality but the file sizes
were much more than the originals.
Even the JPG with a quality of 100 had a
lower file size compared to the original
image. The JPG with a quality of 100
looked pretty good so I played with it
more and went down to a quality of 60.
The JPG with a quality of 60 actually
lost quite a bit of quality ompared to the
original. The quality around the people
became slightly blurry enough to be
unacceptable. Before I played even fur-
ther with the JPG compression settings
though, I noticed that something was
wrong.
The colors changed a lot from the origi-
nal image using any of the compression
mehtods I tested. As you can see the
original image is darker than the JPG
with a quality of 100.
In photoshop the colors of the orignal
image and the JPG with a quality of 100
look pretty much identical but outside of
photshop they look very different. So I
used the original image for my project.
Original 280KB JPG_60Q 132KBJPG_100Q 240KB
Title_JPG_100Q
Original
500% Scale
3200% Scale
44. Darrin Harvard - DGM 2341
Members Evaluation
These two images are the original images
of Jesse Lacey (Top) and Garrett Tierney
(Bottom). They aren’t absolutely terrible
in quality, but both of them have a lot of
noise. Even though they have noise, they
still worked for what I wanted them for.
My project will be expressed on an ipad
which doesn’t have a huge screen size
and the user can’t zoom in on them to
see the noise up close.
I had to edit the picture of Garrett
Tierney to get it to the size I wanted in
my project. I end up having to crop the
photo which cut the lower half of his
body out of the picture and also much of
the top almost all the way to his head.
I ended up using the original image of
Jesse Lacey but I compressed the image
of Garrett Tierney to a JPG with a qual-
ity of 60 resulting in a file size of 92KB
when the original was 208KB.
45. Darrin Harvard - DGM 2341
Compressing the Members chapter im-
age as a JPG with a quality of 60 allows
the image to still look like the original
but reduce the file size by just over half.
I tried compressing the image to a JPG
with a quality of 50 but the image be-
comes slightly blurry at a scale of 100%
and while at a scale of 500% it is clear
that the colors start to blurr into other
parts of the image.
In all of my experience with image com-
pression, in order to keep an image in a
similar quality compared to the orignal
image when compressing through the
JPG method a quality of 60 or greater is
needed. When an image is compressed
below a quality of 60 the quality starts
to diminish. It is important to know
that some images will require a quality
greater than 60 though. It is important
for a designer to find a good balance of
good image quality while also having a
good file size.
A great example of having a good bal-
ance can be seen when we look at the
beard of Garrett at a scale of 3200%. It
is clear here that the colors shift and
change a bit but the images looks nearly
identical at a scale of 100% So although
when zoomed in the quality is slightly
different, it is ok to use in this case. It is
important to take note on what device
this image will be seen on as well.
Members_Original 532KB
Garrett_Original 208KB
Members_JPG_60Q 256KB Members _PG_50Q 200KB
Garrett_JPG_60Q 92KB
500% Scale
3200% Scale
46. Darrin Harvard - DGM 2341
PNG Images Using Mag+
When I first started this project I had
so many ideas of how I wanted to do
this and the first problem I ran into was
with the use of PNG images when using
Indesign/Mag+.
Whenever I downloaded a PNG and
put it into Mag+ I couldn’t get the
transparency to work. In the Members
image with the band name PNG the
background would appear as black and
not transparent. I played around with
photshop to try and get the PNG to
work.
When I would open the PNG in pho-
toshop it looked how it was supposed
to, no background. I played with many
settings to get it to work and I ended up
with a couple different results but I could
never get the transparent background.
It wasn’t until I was working with the
discography when I was able to finally
figure out how to get a transparent back-
ground for my PNG images.
In the Indesign/Mag+ settings, when
clicked on an object there is a setting
called ‘Use Linked Image’ when clicked
on a PNG image check this setting and
the background will appear as transpar-
ent.
47. Darrin Harvard - DGM 2341
Discography Evaluation
Once I was able to finally figure out how
to use PNG images with Indesign/Mag+
I ran into another problem unrealted to
the compression settings.
All of the images I used for the album
covers were very different in color and
detail causing my PNG buttons to look
horrible the way I originaly wanted
them. Most of the images didn’t work
with the PNG buttons I selected. I
thoiught of a solution and decided that
I could switch the color of them but no
color worked very well and I thought it
wouldn’t look good if I used different
colors for each album cover.
I ended up putting the buttons down
below the album covers which takes a
way a little bit of the use of a transparent
background, but having a transparent
background still made the PNG buttons
look better and cleaner.
When bringing the play button and the
info button through the PNG compres-
sion method in photoshop, they end up
looking nearly identical and clean even
after going through Mag+ production.
The file size though is smallest using
the 8Bit PNG compression settings. The
original play button was 20KB and the
original info button was 40KB. After go-
ing through 8Bit PNG compression, the
play button reached a file size of 8KB as
well as the same size for the info button.
48. Darrin Harvard - DGM 2341
Conclusion
From working with this project and
bringing numerous of different images
of different image formats, I was able
to have an educational and interesting
experience.
As far as I know Indesign/Mag+ can
work with JPG, GIF, and PNG image
types. Although there are certain settings
that need to be chosen inb order to get
certain images to work properly such
as the ‘Use Linked Image’ check box
for PNG images that use a transparent
background.
While working with Mag+ and some of
the interactive settings, I didn’t run into
any problems. I used hotspots on numer-
ous image format types and used jump
links/popups and still never ran into a
problem with the interactivy settings.
I am no expert using Indesign or Mag+
and I am also not an expert in working
with images in photoshop either but this
project has helped me learn that some-
times a designer must play with different
settings to figure out how to get the best
results in image quality, file size, and to
also figure out that certain media needs
to have certain settings selected in order
to work properly.
I attempted to give many of the images
a dropshadow but I couldn’t figure out
how to get that to work. I gave the
images a dropshadow in Indesign, I tried
to do the same in photshop and Illustra-
tor but everyhting I tried didn’t work for
me.
I also tried giving some of the images an
outline using the Indesign stroke feature,
but that didn’t work. I ended up having
to create a rectangle just barely bigger
than the image and arrange it behind for
the outline to work.
I used many different images that were
all very differnt in dimensions and then
had to scale them and crop them to get
to the proper size I wanted. Of course
some of the images, mostly the band
members indivdual images, didn’t turn
out exactly how I wanted them to cutting
out some of the picture I wanted to
show.
After exporting my project, the quality
of all of my images were how I wanted
them to be even after Mag+ automati-
cally sends my project through photo-
shop and compressed them. Although
the quality was what I wanted, many
of my images in the assets folder after
being exported jumped in size a lot. See
example on the right. The PNG images I
used though didn’t change in file size at
all after being exported.
The file size of my MIB file at the end of
my project was 9.6 MB.
50 KB
100 KB
150 KB
200 KB
250 KB
300 KB
350 KB
400 KB
450 KB
500 KB
550 KB
600 KB
Title_Exported
364KB
Title_Original
280KB
Members_Original
256KB
650 KB
700 KB
750 KB
Members_Exported
776KB
Jesse_Original
84KB
Jesse_Exported
500KB
50. Darrin Harvard - DGM 2341
Video Formats
.avi
Audio Video Interleave
AVI was released in November of 1992
by Microsoft and was initially developed
for the Windows OS and the idea was
taken based on the Resource Interchange
File Format (RIFF).
The AVI format is a container format
that works with both audio and video
and stores them together as one. AVI is
usually a hih quality format but comes
with the disadvantage of usually being
larger in file size.
.flv
Flash Video
FLV was origianlly released by Future-
Wave Software in 1995. Macromedia
took over December of 1996. Adobe
Systems then took over April of 2005.
Macromedia developed Flash Player 7 in
2003, when Flash Player supported FLV.
FLV, also known as Flash, is a container
format that works with both animation
(vector graphics) and video and used
across the web. FLV has high quality
while also small in file size.
Adobe won’t support FLV after 2020 and
HTML5 is currently taking over.
.wmv
Windows Media Video
WMV was released by Microsoft for the
purpose of use for internet streaming
apps in 1999.
WMV is a compressed video format
supported by multiple codecs. It can also
be used by Advanced Systems Format
(ASF), Matroska, and AVI. WMV is sup-
ported with HD videos and also Blu-ray
Disc. WMV file are usually really small
but has the price of being less in quality.
.mov or .qt
QuickTime File Format
MOV was released in 1991 by Apple and
is compatible with both Mac and Win-
dows.
MOV is a container that works with
audio, video, and even text. MOV stores
that data. MOV uses MPEG-4 compres-
sion. MOV files are usually high quality
with the price of being large in file size.
Something interesting is that quicktime
is great for editing becuase it doesn’t re-
quire the data to be rewritten after being
edited.
.mp4 or MPEG-4 Part 14
Moving Picture Experts Group
MP4 was released by MPEG in 1998 as
a container for storing videos, audio,
images, and text.
MP4 is very similar to QT/MOV but
with support of more MPEG features.
Like MOV, MP4 uses MPEG-4 compres-
sion.
MP4 is still used for the initial uses of
storing media data along with sharing
and streaming videwo and audio over
the web.
MP4 has the great capability of remain-
ing high quality even after compression
and has a smaller file size.
MP4 is also one of the reasons why FLV
is disappearing, because MP4 is support-
ed by HTML5.
51. Darrin Harvard - DGM 2341
Codec - The word CODEC comes from
the two words enCOding and DECoding.
Codecs are an algorithm or a compression
standard. Another way to look at is that a
codec is a device used for encoding and
decoding. In this case though it is important
that the word device is understood.
Format - A format is a container that han-
dles a codec or multiple codecs.
Many see a format as a layout or a method in
which, in this case, data is seen and orga-
nized.
Device - People usually think a device as
mechanical or electrical, which is true but
not in this case.
A device is something that is or was made
for a specific purpose.
So when it comes to codecs the device is an
algorithm or the process of encoding and
decoding.
Containers and Codecs
53. Darrin Harvard - DGM 2341
Video Compression Process
To put a series of short videos through
the video compression process Adobe
Encoder is a really great tool.
The process to compress videos using
Adobe Media Encoder is actually really
simple.
Quickly add the videos that will
be worked with by clicking the
‘+’ symbol, drag the files in, or
‘File’ - ‘Add Source.’
After adding the source the compression
settings can be set. Click the format
dropbox to change the format or the
preset drop box to change the selected
formats different compression settings.
Once the videos that
are desired to be com-
pressed are added and
the desired format and
format settings are
selected the play button
will ompress the videos
to the desired formats
and exported to the
selected folder.
54. Darrin Harvard - DGM 2341
Video Compression Evaluation
I am going to put a series of short videos
through Media Encoder and compress
them using the Mobile Preset feature. To
do this drag the presets from the presets
browser in Media Encoder and drop
them underneath the videos individually
that are desired to be compressed.
In the Mobile presets, the videos will
be compressed to MPEG4 and H.264
formats with a variety of settings such as
frame size, frame rate, and target rate.
After I have compressed the videos it
will be easiest to evaluate them by taking
a screenshot of the video being watched
on a mobile device, since I am com-
pressing videos for mobile, and evaluate
the quality of the screenshots in Adobe
Photoshop.
55. Darrin Harvard - DGM 2341
H.264
It is very hard to tell from this document
because it is very slight, but the colors
are a bit lighter compared to the original.
It is more apparent when I was looking
at Photoshop.
I zoomed in to a scale of 3200% on the
bridge of the man’s nose where the color
of his flesh in the light is shown and the
color of the shadow on his nose is also
shown.
The mans flesh changes slightly from
the original in all of the different com-
pressed video screenshots. The light
portion of the skin has a very slight
lighter shade making it look a little bit
more pink/peach while the shadow is
also lighter appearing a little bit more
reddish purple.
In Photoshop I could tell at the 300%
scale that the colors were slightly off.
Another really hard detail that changed
was the lines of the wrinkles on his fore-
head. In the 720p video screenshot they
become slightly blurry or less defined.
After being compressed, all of the
compressed videos have a much lower
file size compared to the original with
a slight change in color quality but not
totally horrible. Even the quality differ-
ence of the 720p video when watching is
nearly unnoticeable.
Original_MP4 84.8MB
Scale - 300% PNG
2160p_MP4 56.7MB
Scale - 300% PNG
1080p_MP4 14.6MB
Scale - 300% PNG
720p_MP4 10.9MB
Scale - 300% PNG
Scale - 3200% PNG Scale - 3200% PNG Scale - 3200% PNG Scale - 3200% PNG
56. Darrin Harvard - DGM 2341
H.264
The results of this video’s quality after
being compressed is much easier to
notice compared to the previous video’s
results.
First it was apparent that the videos
didn’t even fit the size of the screen and
were made smaller resulting in the black
box around the actual video picture.
The next problem we see is the blob
of ink on the canvas. When the video
was compressed to 640x480, the blob is
still semi visible but it is very fuzzy or
blurry and pixelated. When looking at
the 352x288 compression, the picture is
even more fuzzy and there is no sign of
the blob it appears flat and the defined
line at the top starts to disappear. When
looking at the 176x144 compression,
the blob is totally gone and much of the
ink also disappeared a little resulting in a
totally different shape and of course the
defined line at the top is nearly all the
way gone.
The 3 videos after being compressed
have a much lower video file size but
pretty bad quality.
An interesting thing I saw was that the
640x480 compression had a smaller file
size than the 352x288 compression but
that could have been an error some-
where in the compression process.
Original_MP4 277.7MB
Scale - 50% PNG
640x480_MP4 1.23MB
Scale - 50% PNG
352x288_MP4 1.75MB
Scale - 50% PNG
176x144_MP4 992KB
Scale - 50% PNG
Scale - 100% PNG Scale - 100% PNG Scale - 100% PNG Scale - 100% PNG
57. Darrin Harvard - DGM 2341
H.265 (HEVC)
The first problem I have had while trying
to compress this video to HEVC is that
when I finished exporting from Media
Encoder, the file type changed to mp4
but while it was exporting it said AVC.
Not quite sure if that is a problem or not.
After compressing this video, the first
two things I noticed was that like before
the 640x480 video doesn’t fit on the
screen and is smaller. The second thing
I noticed is that the 8K video is much
darker than the original.
As seen in the examples, the 8K video
is indeed darker and I might say maybe
a bit more clear/defined as well. The
640x480 compression is slightly lighter
than the original video but it is still clos-
er than the 8K compression.
Another thing to notice is that even
though the 8K compression has a higher
quality while also being darker though,
the file size is 147MB while the origi-
nal was 63MB, the file size more than
doubled.
Original_MP4 63MB
Scale - 50% PNG
8K_MP4 147MB
Scale - 50% PNG
640x480_MP4 1.95MB
Scale - 50% PNG
Scale - 200% PNG Scale - 200% PNG Scale - 200% PNG
Scale - 3200% PNG Scale - 3200% PNGScale - 3200% PNG
59. Darrin Harvard - DGM 2341
Audio Formats
.pcm
Pulse-Code Modulation
There has been uncompleted work with
PCM since as early as 1853, but in 1938
Alec Reeves, who was unaware of previ-
ous work, got a French patent for it and
again in 1943 in the United States.
PCM is an uncompressed audio format
and is commonly used in CDs, DVDs,
and Blue Ray Discs. LPCM (Linear
pulse-code modulation) is the most
used form of PCM almost to the point
of no usage for the original PCM. Being
uncompressed LPCM is typically larger
in file size. with high quality.
.wav
Waveform Audio File Format
WAVE known as WAV was released in
1991 developed by Microsoft and IBM.
WAV files are typically uncompressed
audio but can be used for compressed
audio as well because they are technical-
ly a container. WAV files usually contain
LPCM audio.
Although the audio is usually uncom-
pressed WAV files can easily be edited.
WAV has High Quality audio with larger
file sizes.
.aiff
Audio Interchange File Format
AIFF was released in 1988 developed by
Apple.
AIFF and WAV are very similar. AIFF is
a container that contains LPCM audio.
AIFF is typically used for Macs, while
WAV is typically used for Windows, but
WAV can be used on Macs and AIFF can
be used on Windows.
AIFF has a compressed format named
AIFF-C or AIFC.
.mp3
MPEG-1 Audio Layer III/MPEG-2
AudioLayer III
Being an MPEG file format, the MP3
format was developed by Motion Picture
Experts Group in 1993.
MP3 is highly popular in use with music
files. MP3 even had an audio player
named after it, the MP3 players.
MP3 is a form of lossy compression for
audio. MP3 files usually have a lower file
size while trying to keep good quality.
MP3 compression tries to get rid of the
sounds that are beyond human hearing.
.aac / m4a(mp4)
Advanced Audio Coding/MPEG 4
Audio
AAC was released in 1997 by Bell Labs,
Fraunhofer Institute, Dolby Labs, Sony,
and Nokia. AAC was originally devel-
oped to be the replacement of the MP3
format. It didn’t take.
AAC uses a more advanced lossy com-
pression algorithm which usually gives it
higher quality then the MP3 format.
AAC is the default audio format for
itunes and can be used pretty much any-
where MP3 can be used.
.ogg
Has no name
OGG was officically released in 2002 by
Xiph.org Foundation.
OGG is an open source container format
typically used as with lossy compression.
OGG has a small file size while also a
lower quality. OGG is not highly used
and supported. Most people use MP3 or
AAC instead.
60. Darrin Harvard - DGM 2341
.wma
Windows Media Audio
WMA was released in 1999 by Micro-
soft.
WMA is a series of audio codecs meant
to improve MP3 and is very similar
to MP3 of course, as well as AAC and
OGG. WMA is not supported by many
devices so most people use AAC or
OGG over it.
WMA can be lossy or lossless.
.flac
Free Lossless Audio Codec
FLAC was released in 2001 by Xiph.org,
Josh Coalson, and Erik de Castro Lopo.
FLAC is great becuase of its ability to
reduce the file size by about 60% without
losing nay data. Another reason why it
is highly used is because it is an open
source format. FLAC is highly supported
among devices and with its lower file
size while remaining high in quality it is
very popular.
ALAC (.m4a)
Apple Lossless Audio Codec
ALAC was released in 2004 by Apple
and became an open source format in
2011.
ALAC and FLAC are really similar
but ALAC isn’t quite as good as FLAC.
ALAC is used on Macs as FLAC’s re-
placement.
62. Darrin Harvard - DGM 2341
Audio Compression Process
Using iTunes makes the audio compres-
sion process really simple by going to
Edit - Import Settings. In these setting
the format can be changed and then
within the format are more settings that
can be chnaged such as the sample rate,
sample size, and the channels.
Mostly what will be changed is going to
be the format and the sample rate.
After the settings have been selected and
the video is compressed the audio can
be listened to in order to test teh qaulity.
As fas as I know iTunes doesn’t allow
the user to see the sound waves so this
evaluation will be by listening only.
I am going to work with AIFF Encoder
and change the sample rate in order to
check the sound quality and to see the
difference in file size.
63. Darrin Harvard - DGM 2341
Audio Compression Evaluation
I made 8 versions of Billy Joel’s song
Big Shot all using the AIFF format but
changing the sample rate each time. I am
no expert on sound but I was able to end
up hearing a differenc once the bit rate
and sample rate got reduced to a certain
point.
As far as I could hear, the sound was
pretty much identical until the bit rate
had been reduced to 1024. This was only
a slight change though, the high pitch of
the drums/symbols weren’t as defined.
Also I don’t know if it was a user error or
if it was caused by the compression but
for the 1024 bit rate version of the song
a chunk was cut out, meaning there was
no sound from 48 seconds to 59 seconds
for a total of 11 seconds It was the only
version that had a missing chunk.
After the 1024 bit rate version the sound
quality kept slowly diminishing. By the
time I got to the 256 bit rate version the
song sounded super muffled and wasn’t
very defined or sharp. The song also got
a little quiter as well. Another thing I
noticed is that when there was a sharp
sound in the original, the 256 version
sounded rough and there was a slight
crackle sound that went in its place.
64. Darrin Harvard - DGM 2341
Other Audio Formats
I compressed the original song to the
best MP3 settings I could and the file has
a size between the lowest two quali-
ties of the AIFF versions being 9.6MB.
Although the file size is so low and the
bit rate follows the same path, the quality
sounded nearly identical to the original.
The lowest settings I could select for
MP3 compression resulted in a file size
of 758KB and a bit rate as low as 16kbps.
The lowest MP3 file sounded similar to
the lowest AIFF file and maybe slightly
worst.
The best WAV file I could create had a
file size of about the same size as the first
AIFF file I created and had great quality.
The worst WAV file I could create had a
file size of 7.5MB and it sounded terrible
and muffled as well.
The Apple Lossless Encoder only had an
automatic setting and resulted in high
quality with a file size of 92.8MB the
closest to the original.
I compressed this audio file with the
lowest compression settings for AAC
and the file size resulted as 2.3MB
and has great quality but maybe
slightly less and is a bit quietr than
the original.
66. Darrin Harvard - DGM 2341
I used a program called 4K Video
Downloader in order to grab videos
from Youtube and downloaded them.
When downloading the video it gives the
user a couple options of what quality to
download the video in. For this projects
sake, I downloaded everything in ‘Nor-
mal Quality’ in the MP4 format.
After I downloaded the original video I
used Adobe Media Encoder to convert
the video to other qualities. Since I am
developing this short book for an iPad I
decided to use the mobile MP4 settings
to compress the original videos. I looked
at some other MP4 format settings but
the file sizes were much more than I was
shooting for.
After I compressed the videos I put them
into my design and the screen size the
video would be watched at and then took
a screenshot at that screen size on the
iPad. Then in order to look close at the
video quality I used Adobe Photoshop.
67. Darrin Harvard - DGM 2341
The Quiet Things Video
The first video I worked with was the
Deja Entendu Album’s The Quiet Things
That No One Ever Knows. I compressed
the original video to Mobile MP4 480p
SD Wide, 720p, and 1080p.
One variable in looking at the quality of
these videos is that I didn’t have a frame-
by-frame pause but for this project I
think this is a close enough look at the
video quality and shows enough to de-
termine what quality to use.
Overall at the 100% scale I think that
the 480p SD Wide compression doesn’t
have high enough quality to be used. The
Ambulance logo is really blurry. Even
the 480p SD Wide compression has close
enough color at he 3200% scale though.
Now looking at the 720p and 1080p
compressions, they both look pretty
good and the 1080p looks slightly better.
The deciding factor here though is the
file size. The 480p SD Wide compres-
sion has a file size barely larger than the
original while the 720p jumps in size a
lot and the 1080p compression is even
larger than that.
The 720p compression has the best
quality vs file size balance even though it
is much larger of a fiel size compared to
the original.
Quiet_Original_MP4 22.1MB
Scale 100% PNG
Quiet_MP4_480pWide 26.5MB
Scale 100% PNG
Quiet_MP4_720p 175MB
Scale 100% PNG
Quiet_MP4_1080p 232MB
Scale 100% PNG
Quiet_Original_
MP4
Scale 3200%
Quiet_MP4_480p-
Wide
Scale 3200%
Quiet_MP4_720p
Scale 3200%
Quiet_
MP4_1080p
Scale 3200%
68. Darrin Harvard - DGM 2341
Seventy Times Seven Video
For this particular video the original vid-
eo might be the best bet. The quality at
100% doesn’t change very much because
of the nature of this video. It is in a dark
room with some spotlights, smoke, and
never any close up shots of their faces.
So the quality of the video is going to be
somewhat fuzzy no matter what.
At the 100% scale there is almost no
differnce in quality amongst the screen-
shots I took. At the 3200% scale the 480p
SD Wide compression has slight changes
in color but hte original and the 720p
compression are nearly identical in color.
In order to get the best balance of quality
vs file size here the original video is
going to win because the quality change
in the color between the 480p SD Wide
compression and the original, of how
much of a jump it is in file size to get to
the 720p compression, and also because
of the nature of the video.
If only there was a good quality between
480p SD Wide and 720p.
Seventy_MP4_480pWide 36.1MB
Scale 100% PNG
Seventy_MP4_720p 238MB
Scale 100% PNG
Seventy_
MP4_480pWide
Scale 3200%
Seventy_
MP4_720p
Scale 3200%
Seventy__Original_MP4 25.6MB
Scale 100% PNG
Seventy_MP4_
Original
Scale 3200%
69. Darrin Harvard - DGM 2341
Jesus Christ Video
This music video is another special case
because the video is a video of an old
school tv screen playing a video. So the
video screen size is smaller than the oth-
er videos and because they were going
for an old school feel to the music video
the quality is also a bit fuzzy and lower.
Even at the 100% scale the video quality
has changed quite a bit. The original vid-
eo colors are a bit lighter than the other
2 compressed videos. At the 3200% scale
this is shown a little clearer because al-
though the colors are similar the original
is a bit lighter.
Another clear change in quality at the
100% scale is the color blurr next to the
window sill. It appears that in the 480p
SD Wide and the 720p compressions,
there is a weird off-color blurr.
The odd thing about this video as well
is that when the original video is com-
pressed to the 480p SD Wide settings the
file size, unlike the other videos, jumps
in size a lot.
So like the Seventy Times Seven video
the orignal video will work just fine
for this project. The reason though is
because the original video dosen’t have
any quality oddities and the file size
difference between the 480p SD Wide
compression and the original.
JC_MP4_480pWide 156MB
Scale 100% PNG
JC_MP4_720p 222MB
Scale 100% PNG
JC_MP4_480p-
Wide
Scale 3200%
JC_MP4_720p
Scale 3200%
JC__Original_MP4 13.4MB
Scale 100% PNG
JC_MP4_Original
Scale 3200%
70. Darrin Harvard - DGM 2341
At The Bottom Video
The At The Bottom video is going to be
the most important to get at good qual-
ity because of how close up the camera
gets of the band members faces.
At the 100% scale the original video is
slightly fuzzy and the features of Jesse
Lacey’s hair aren’t as defined. The 480p
SD Wide compression has slightly im-
proved in quality but is still slightly fuzzy
and less defined. The 720p compression
makes a big difference and the hair be-
comes less fuzzy and is more defined.
At the 3200% scale I zoomed in on his
hair that gets seperated and at the orig-
inal quality that feature isn’t even there.
In the 480p SD Wide compression the
seperation of the hair starts to become
visible. At the 720p compression the hair
is really defined and the seperation is
totally visible.
Like the Jesus Christ video, the file
size of the 480p SD Wide compression
increases a lot as well. Now if the user
wanted to go even beyond 720p to 1080p
the features of Jesse’s hair might become
even more defined but again the file size
becomes an issue.
The best balance of quality vs file size
for this video is going to be the 720p
compression.
Bottom_MP4_480pWide 125MB
Scale 100% PNG
Bottom_MP4_720p 178MB
Scale 100% PNG
Bottom_
MP4_480pWide
Scale 3200%
Bottom_
MP4_720p
Scale 3200%
Bottom__Original_MP4 15.2MB
Scale 100% PNG
Bottom_MP4_
Original
Scale 3200%
71. Darrin Harvard - DGM 2341
Can’t Get It Out Video
This video is by far the most unique in
my opinion. Even though it is imilar to
the Seventy Times Seven video because
there is a lot of smoke with a little bit of
spotlight, the colors make it very unique.
This video gave me some problems on
whether to use the original or to use the
720p compression because I am not an
expert on color.
By looking at jsut the 100% scale, the
original video seems much lighter than
the others. The main problem with
the 480p SD Wide compresion is that
it doesn’t handle the guy in the back-
ground through the smoke very well and
the picture is slightly fuzzy. The big jump
in file size between the original and the
480p SD Wide compression happens in
this video as well.
In my opinion, even though the 720p
video is a little bit darker, I don’t think
it is that much of a difference. When
someone watches this video in the short
book on their iPad not many would be
able to tell the difference and since there
are not any close up shots of the band,
I don’t think the slight quality ifference
matters too much. Either the original or
the 720p would work.
The best balance between quality vs
file size would be the original though
because of its lower file size.
Can’t_MP4_480pWide 112MB
Scale 100% PNG
Can’t_MP4_720p 160MB
Scale 100% PNG
Can’t_MP4_480p-
Wide
Scale 3200%
Can’t_MP4_720p
Scale 3200%
Can’t__Original_MP4 12.5MB
Scale 100% PNG
Can’t_MP4_Orig-
inal
Scale 3200%
72. Darrin Harvard - DGM 2341
Compressing Videos to Higher Quality
So I ran into a problem during the
creation of the MIB file for this project.
After exporting my verticals, as Mag+
calls them, the designer can then put the
vertical together in the Mag+ production
tool and review them and then eventual-
ly create the MIB file. Whenever I tried
to review my verticals, after exporting
them, I had an error pop up. I say after
exporting them because using Mag+
there is a fast review which can be done
before the exporting of the vertical. The
fast review works while the exporting
review and creation of the MIB doesn’t
work.
After running some tests I found out
that after downloading a video and
converting the video to a higher quality,
using Adobe Media Encoder at least,
Mag+ doesn’t like it.
I downloaded higher quality videos
where I could and compressed them to a
lower quality and they worked just fine.
So for some reason when converting
videos to a higher quality, Mag+ will not
allow it probably because of whatever
automatic compression that they put
the verticals through when creating the
MIB file or in general just the fact that
trying to make the quality better causes
problems
From the 5 videos I had originally I was
able to download a higher quality video
of 3 of them.
At The Bottom - 480p
Can’t Get It Out - 720p
Although I was able to get the 2 higher
quality videos, the file sizes are 51.5MB
(Can’t Get It Out) and 20.2MB (At
The Bottom), which are lower than the
videos I had converted from the lower
quality original videos. The original
videos after being converted to Mobile
720p and 480p SD Wide had a file size
of 160MB (Can’t Get It Out) and 125MB
(At The Bottom). That is quite a big
difference.
After doing some more testing, I found
out that the original higher quality vid-
eos I downloaded have such a difference
in file size because the video wasn’t in
the same format with the same settings.
The original high quality videos are
probably using Youtube MP4 settings
while the 720p videos I was using were
Mobile 720p videos. I converted the
higher quality videos to the mobile 720p
and 480p SD Wide and they have the
same file size as the other mobile videos
I was using.
73. Darrin Harvard - DGM 2341
Conclusion
I learned a lot from doing this project
while looking at the quality and file size
of the different videos and running into
the problems I did. Hopefully I have
helped anyone else that has read this
document and prevented them from
running into the problems I did.
While looking at how exporting affected
the videos I used in this project, most of
the videos didn’t change in file size at all
except for 1 video. The Can’t Get It Out
video dropped in file size from 51.5MB
to 24.3MB and thats without very much
change at all in the quality of the video.
The video actually looks better than the
lower quality video I converted to 720p
and has a way smaller file size.
When working with videos, when the
video’s file size gets to big Mag+ com-
presses the video to be smaller but while
working with images, it was the oppo-
site. The images file size increased a lot
after being exported.
The file size of my MIB file after being
exported was 114MB.
Can’t_MP4_720p 160MB
Scale 100% PNG
Original_HQ After Export 24.3MB
Scale 100% PNG
