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).  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 (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 Graphic20K  Web Page (total graphics) 100K (should not exceed)  PPT or DOC2000K (2 MB)  Print File20,000K (20 MB)  Big Photoshop File200,000K (2000 MB, 2GB)  Hard Drive SpaceGB’s and TB’s __________________________________________ Note: These are just random examples to show relative size, and I’m rounding off.

Optimization 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). Original TIF 300dpi JPG High 72 dpi 200MB – original file 30K for web

1) Number of graphics in the file 2) The dimensions of the graphics 3) How many pixels are in the graphic 4) The file format selected What Impacts Size?

1. NUMBER OF GRAPHICS impacts 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) 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  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 intact in 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 graphic Consider 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 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 dithered gif 8 colors dithered gif 4 colors 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.

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

Size Issues: What file format should this be?

Extension FormatUsed for`Loss`# ColorsTransparency?.jpg Joint Photographic Experts Group Continuous tone (e.g., photos) Web LossyThousands NO.gif Graphic Interchange Format (Compuserve) Solid colors (e.g., cartoons) Web Loss less transpa rency Yes, GIF-8 (jaggies).png Portable Network Graphics format Web (continuous tone or solid colors) Lossless Thousa nds Yes (no jaggieds) but big file.tif Tagged Image File Format Print Only LosslessThousandsYes 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?