Download File Sizes & Types

FILE SIZES & TYPES
For the Web
Size Matters
The larger the file size, the better the quality, but the harder to
upload and download. Designers are always mindful of size
and try to balance size against quality.
Considerations for File Sizes






Web pages must download quickly or people will leave
your site.
Therefore, web graphics must download quickly
(graphics are big files requiring strategy to make small).
People will wait longer to download PowerPoints, Word
docs, and .pdf’s than they will for a web page to load,
but they won’t wait forever. . . . .
Email accounts have limitations about the size of
attachments.
Mobile devices (phones, notebooks) have limited hard
drive space.
Dropbox is the best way to deliver files too big for email
(but even Dropbox has limitations and difficulties).
Units of Measure




1024 bytes = 1 Kilobyte (KB)
1024 kilobytes = 1 Megabyte (MB)
1024 megabytes = 1 Gigabyte (GB)
1024 gigabytes = 1 Terabyte (TB)
To Get An Idea (Examples)

Web Graphic
20K

Web Page (total graphics)
100K (usually should not exceed)

PPT or DOC with Images
2000K (approx. 2 MB)

Flyer in Illustrator with Photos
20,000K (approx. 20 MB)

Giant Photoshop Authoring File
2000 MB (2 GB)

Hard Drive Space
GB’s and TB’s
_____________________________________________
Note: These are just averages to show relative size—actual files can vary greatly.
The Web Page Trade-off


The more graphics, the
more impact, but also
the more download
time.
You can limit the
number of graphics to
keep file sizes smaller.
What Impacts Size?
1)
2)
3)
4)
Number of colors in the file
The dimensions of the graphics
How many pixels are in the graphic
The file format selected
1. NUMBER OF COLORS
impacts size of a file
JPGs on “High”
Full color
37 Kilobytes
Black and White
27 Kilobytes
.gifs
32 colors
9 Kilobytes
16 colors
5 Kilobytes
2. DIMENSIONS OF GRAPHICS
impact size of a file
Resize Images Exactly
BEFORE You Insert Them On the Web




Too often, people insert a large image,
and THEN resize it smaller, but the file
still contains the data of the large
image, so it’s unnecessarily large.
See how to resize images and save
graphics for the web in this PowerPoint.
Photoshop: Image > Image Size
Illustrator: Click the “Artboard” tool;
then, click and drag a corner of the
artboard to resize.
3. NUMBER OF PIXELS
impacts size of a file
Pixels (also called “dots”)


Pixels are the
tiny squares
that compose
an electronic
image.
An image with
pixels is called
a “bitmap”
image or
“raster” image.
Pixels Per Inch (ppi) or
Dots Per Inch (dpi)



The more pixels per inch
used in an image, the
better the quality AND
the larger the file.
The fewer pixels per
inch, the lower the
quality AND the smaller
the file.
An image that does not
have enough pixels
(because it’s blown up
too large, e.g.)
“pixellates,” meaning we
can see the pixels.
Standards






72 dpi standard for web
85-150 dpi low quality print
200 dpi starting point for decent print
300 dpi very strong
Many scanners go up to 2,000 dpi
(creates enormous files that can be enlarged)
Start a print project at 200 or 300 dpi—then,
create a version at 72 dpi for Web and
electronic use.
Optimization
Original TIF 300dpi
200MB – original file
To “optimize” a file means to make it the best it can be in
terms of file size and quality (considering that balance).
To do this, you manipulate the dimensions, pixels, and file
formats appropriately (as we will see).
JPG High 72 dpi
30K for web
NOTE: Saving the Authoring File
Always remember to save layers intact
in your original authoring programs.
(You can’t unflatten after you’ve closed).
Starting a New File




Always start a Photoshop image
at the highest dimensions and
largest number of pixels per inch
you will ever need (e.g., 200 dpi
for print).
You can always create a copy at
lower dpi or dimensions, which
takes away quality.
But you can’t add quality back in
after it’s taken away.
Even if you increase the pixels per
inch later, the image won’t get
better because the image has
already been degraded.
.PSD (File > New)
Print: 200 ppi/dpi CMYK | Web: 72 ppi/dpi RGB
To Change Pixels or Dimensions: Image > Image Size
.AI (File > New)
Print: CMYK | Web: RGB
To Change .AI Dimensions:
Use Artboar Tool or File > Document Setup > Edit Artboards (change dimensions)
FILE FORMATS
Impact size of a file
Authoring Files


.psd files are authoring files are usually big (they
have layers, high dpi, etc.), which is fine because it’s
usually not necessary to transport them electonically
(just keep then on your hard drive).
.ai files are usually fairly small because they don’t
contain pixels (unless you have imported pixelbased files), but these are usually not transported
electronically, either (just keep them on your hard
drive).
Common File Formats Used


.jpg and .gif are small, low-quality (“optimized”)
file formats for the web and should not be used for
professional print jobs.
.tif is a big, high-quality file format used for print
and should never be used on the web or in
documents to be viewed on screen (because it’s too
big).
HOW TO CHOOSE FORMATS
Consider the type of graphic
Consider the purpose of the graphic
For Web, PPT, Word docs, and .pdf’s for electronic viewing.

JPEG
GIF
Go to File > Save for Web, and select .jpg or .gif
WHEN GOOD GRAPHICS
WHEN GOOD GRAPHICS GET SAVED BADLY . . .
Dithering



In a dithered image, colors that
are not available in the palette
are approximated by a
diffusion of colored pixels from
within the available palette.
In other words, your software
attempts to compensate and fill
in the gaps when there’s too
much compression or limited
color scheme.
Sometimes, this looks really
bad.
Original
dithered .jpg
Dithering happens when:
- a .jpg is saved at a poor quality (too much compression)
- you save a .jpg as a .jpg (recompress it) instead of starting with .psd.
- a photo saved as a .gif with few colors (dots appear).
Dithering is different from pixellation.
Dithering occurs when photos are not optimized properly.
Pixellation happens when photos are blown up too large
and there are not enough pixels per inch.
dithered gif 8 colors
dithered gif 4 colors
How
should this
have been saved:
jpg or gif?
How was it saved
instead?
Size Issues: What file format should this be?
FILE FORMATS
Extension
Format
Used for
`Loss
`# Colors
.jpg
Joint
Photographic
Experts Group
Continuous
tone (e.g.,
photos) Web
Lossy
Thousands
.gif
Graphic
Interchange
Format
(Compuserve)
Solid colors
(e.g., cartoons)
Web
.png
Portable
Network
Graphics
format
Web
(continuous
tone or solid
colors)
Lossless
.tif
Tagged Image
File Format
Print Only
Lossless
Loss
less
Transparency?
NO
256 +
transpa
rency
Thousa
nds
Thousands
Yes, GIF-8
(jaggies)
Yes (no
jaggieds)
but big file
Yes
What is a .png?


A .png does everything a .jpg OR .gif can do PLUS
it creates beautiful transparency (which we’ll see in
a second).
The drawback is that .png tends to be a somewhat
larger size than .gif or .jpg, so we don’t use it often,
but the one thing it does better than any other file
format is “transparency.”
TRANSPARENCY
Transparency


In Photoshop,
transparency is
denoted with a
checkerboard.
The background
layer is turned off.
Transparency with odd shapes


Transparency around a graphic allows it to be
placed on any color page.
This logo is surrounded by
white, which is fine for a
white page, but not a blue
page. . . . It needs
transparency.
How to Save a .png with Transparency:

Open your file in Photoshop and turn off the background layer.

You will see a checkerboard in the transparent areas.
Save a .png with transparency:

Go to File > Save for Web and select .png 24. Check “transparency.”
.gif: “The dreaded white jaggies”
White jaggies are undetectable on white background, but that defeats the purpose of
transparency for use with any colored background. Solution: Use a 24-bit png
Avoid Confusion:


Transparency is often used in Photoshop compositions of
all sorts, but you don’t have to use a .png unless you
can SEE the checkerboard showing in your composition
and the file is intended for web or e-viewing.
If you DO NOT SEE a checkerboard in your
composition, it means you already have a background
color or image you are using in the file. When you
insert the graphic into a document or web page, the
background of that page will not show through.
Quiz Yourself:
How would you save this?




Photo of your sister on the web
Black and White logo on the web
without transparency
Black and white logo with transparency
Image for National Geographic
QUESTIONS?
To walk through saving graphic files
see this PowerPoint called
“How to Save and use Graphic Files”