file sizes & types optimization. the larger the file size, the better the quality, but the...

FILE SIZES & TYPES

OPTIMIZATION

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.

Size Matters

Considerations

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).

PowerPoints, Word docs, and .pdf’s are typically uploaded/downloaded and viewed electronically.

People will wait a short while for a download—but usually not a long while (depending on how badly they want the file).

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 (should not exceed) PPT or DOC 2000K (2 MB) Print File 20,000K (20 MB) Big Photoshop File 200,000K (2000 MB, 2GB) Hard Drive Space GB’s and TB’s

__________________________________________Note: These are just random examples to show relative size, and I’m

rounding off.

OptimizationTo “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).

Original TIF 300dpi JPG High 72 dpi 200MB – original file 30K for web

1) Number of graphics in the file2) The dimensions of the graphics 3) How many pixels are in the graphic4) The file format selected

What Impacts Size?

1. NUMBER OF GRAPHICSimpacts size of a file

The Trade-off

The more graphics, the more impact, the bigger the size of the file.

You can limit the number of graphics to keep file sizes smaller.

2. DIMENSIONS OF GRAPHICS

impact size of a file

Resize Images Exactly BEFORE You Insert Them

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.

Use Photoshop to resize the image exactly before it’s inserted (go to Image > Image Size).

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) orDots 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.

Always remember to save layers intactin your original authoring programs.(You can’t unflatten after you’ve closed).

NOTE: Saving the Authoring File

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

To Change Color Modes: Image > Mode > RGB

.AI (File > New)Print: CMYK | Web: RGB

To Change .AI Dimensions: Use Artboar Tool or File > Document Setup > Edit Artboards (change dimensions)

To Change .AI Color Modes: File > Document Color Mode

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 pixel-based 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).

Consider the type of graphicConsider the purpose of the graphic

HOW TO CHOOSE FORMATS

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 GRAPHICSWHEN 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 dithered gif 8 colors

dithered gif 4 colorsDithering 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.

How should thishave been saved:jpg or gif? How was it saved instead?

Size Issues: What file format should this be?

Extension Format Used for `Loss `# Colors Transparency?

.jpgJointPhotographicExperts Group

Continuoustone (e.g.,photos) Web

Lossy ThousandsNO

.gifGraphicInterchangeFormat (Compuserve)

Solid colors(e.g., cartoons)

Web

Lossless

256 + transparency

Yes, GIF-8 (jaggies)

.pngPortableNetworkGraphicsformat

Web(continuoustone or solidcolors)

LosslessThousands

Yes (no jaggieds)but big file

.tifTagged ImageFile Format

Print Only Lossless Thousands Yes

FILE FORMATS

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?