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) The only way to get a feel for units of measure (of any kind) is to see examples (which are on the next slide), but here are the units of measure. 1024 bytes = 1 Kilobyte (KB) 1024 kilobytes = 1 Megabyte (MB) 1024 megabytes = 1 Gigabyte (GB) 1024 gigabytes = 1 Terabyte (TB) UNITS OF MEASURE

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. Web files must be small to download quickly (an average web graphic file might be 20K) The total size of all graphics on a web page usually should not exceed 100K. PPT, DOC, and PDF files to be emailed or uploaded need to be fairly small as well, though people do expect to wait a for them to download . A reasonable size is about 2,000 K (2 MB) Print files can get quite large—it’s not uncommon to have one that’s 20,000 K (20 MB) Photoshop authoring files can get huge, depending on a lot of factors, but sometimes you can have a file that’s as big as 200,000 K = 2,000 MB = 2 GB. Hard drive space is measured in GB’s and TB’s.

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? Number of colors in the file The dimensions of the graphics How many pixels are in the graphic (“resolution”) 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 Here we see an image with a lot of gradients, so we would save it as a .jpg. Notice that the image in full color is substantially larger in kilobytes than the same image in black and white.

.gifs 32 colors 9 Kilobytes 16 colors 5 Kilobytes Here we see an image with solid colors, so we would save it as a .gif and select the number of colors we want the gif to use. The color version on the top requires 32 colors to capture and is 9 kilobytes. The image on the bottom only needs 16 colors and is therefore much smaller.

2. DIMENSIONS OF GRAPHICS The larger the dimensions of a graphic, the larger the file size will be. 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. Therefore, we must resize images exactly before we insert them on the Web.

3. Number of PIXELS (“resolution” 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. On the web, we only need 72 pixels per inch, because a typical computer screen can only read that many. Lower pixels per inch will cause “pixellation,” and any more than that will cause excessive download times. Low quality print is 85-150 dpi (most newspapers and magazines fall in this range). 200 dpi is good quality print, and 300 dpi is very strong.

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). Optimization Original TIF 300dpi JPG High 72 dpi 200MB – original file 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 Photoshop 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 Here is how to set pixels per inch in Photoshop. - When you create a new Photoshop document (File > New), a window pops up that asks you to input information. - Set your dimensions. - Set your resolution (72 for web; 200 or 300 for print) and make sure the setting is on Pixels/Inch (not inches or other). - Then, set the Color Mode (RGB for web; CMYK for print).

To Change Pixels or Dimensions: Image > Image Size In Photoshop, go to Image > Image Size. At the bottom, make sure the boxes are checked for scale, constrain, and resample. Change the resolution from 200 ppi to 72 ppi for web and other electronic purposes. If you need to change the dimensions of the image, go to the top of the box and input width or height (the other will change to proportion).

.AI (File > New) Print: CMYK | Web: RGB Adobe Illustrator is a vector program used for illustration, but files are also often saved for Web (in pixels) from the original Illustrator file. - When you create a new Illustrator document (File > New), a window pops up that asks you to input information. - Input the dimensions. - Set the Color Mode (RGB for web; CMYK for print—though some artists prefer to start in RGB because colors are more vibrant for creating illustrations). Note: Illustrator is not a pixel-based program, so you will not set a dpi/ppi, but you can set “raster effects” (which most artists keep on high all the time, because they will adjust for web).

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

4. FILE FORMATS Impact size of a file

Authoring Files .psd files are authoring files are usually big (they have layers, high dpi, etc.). .ai files are usually fairly small because vector files are small (unless you have imported raster files).

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

Web Graphics JPEG GIF .jpg is used for photographic images and other continuous tone images (e.g., gradient). The file format supports thousands of colors, so that’s the upside. The downside is a .jpg makes the file small by “compression” (lowering the overall image quality). So, there’s a slight blur on them. You can decide how much quality you want and balance that out with the file size. .gif is used for cartoony images with a limited number of solid colors. There is no compression and the images are very crisp. The file format only supports a maximum of 256 colors (plus transparency), and you select how many colors it should use (the fewer the colors, the smaller the file). A .gif makes the file small by limiting the number of colors used. Creating images in these file formats for the web is called “optimizing” (making them an ideal size and quality for the web).

Go to File > Save for Web, and select .jpg or .gif In Illustrator or Photoshop, go to File > Save for Web, and select .jpg or .gif.

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 This photo was saved as a .gif rather than .jpg, with not enough colors.

Dithering This cartoon was saved as a .jpg instead of .gif (see the blur?)

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). - (See the notes on the next slide for a fourth way dithering happens.) 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.

Another way dithering happens: How should this have been saved: jpg or gif? How was it saved instead? Dithering also happens when an image with large areas of solid colors is saved as a .jpg

What file format should this be and why?

File Formats .jpg .gif .png .tif Continuous tone (e.g., photos) Web Extension Format Used for `Loss `# Colors Transparency? .jpg Joint Photographic Experts Group Continuous tone (e.g., photos) Web Lossy Thousands NO .gif Graphic Interchange Format (Compuserve) Solid colors (e.g., cartoons) Web Lossless 256 + transparency Yes, GIF-8 (jaggies) .png Portable Network Graphics format Web (continuous tone or solid colors) Yes (no jaggieds) but big file .tif Tagged Image File Format Print Only Yes Summary of Main File Formats: Jpg, gif, and png are appropriate file for images on the Web, if the images are optimized at 72 dpi. If they are not optimized, they will be larger than necessary and cause slower download times. Both the nature of these file formats and the dpi make them low quality and therefore not appropriate for print. On the other hand, .tif is used for print and is not appropriate for the Web (it’s way too large). l JPEG (.jpg) Joint Photographic Experts Group Named after the group who created it, the jpeg is a file format useful for photographs and other continuous tone imagery (e.g., photographs). A jpeg can represent thousands of colors, so they can pick up the highlights in a person’s hair or the uneven tones of skin, etc. Unfortunately, jpegs are compressed files, meaning they are lossy (data has been reduced) in order to create small file sizes for the web. They are not appropriate for print unless they are saved on “Maximum” at higher dpi, and they will always be lower quality than a TIF. l GIF (.gif) Graphic Interchange Format Created by Compuserve, a .gif is a file format used for very different kinds of images than jpegs are suited for. A GIF is only capable of 256 colors, so it is used for images with areas of solid colors, such as cartoons. There are three big upsides to a gif: 1) it is lossless, meaning it’s not compressed, so those solid colors usually look crisp, 2) file sizes can be very small if you opt to use a small number of colors—for example, a black and white image can be less than a kilobyte, 3) the GIF can have transparent background or exactly match the color of a web page background. Note that even though a gif is lossless, it is still being optimized at 72 dpi and is therefore not print quality. Animated gifs are made with a succession of gif files that are swapped out in swift succession by a JavaScript and therefore appear to be moving. l PNG (.png) Portable Network Graphics Format The Ping is an interesting file format. Like a jpeg, it supports thousands of colors. However, like a GIF, it supports transparency. Even better than a GIF, it can eliminate the little white jaggy edges around graphics with transparencies. The downside is that pngs are a little bigger in size than jpegs and gifs. Print Formats l TIF (.tif) Tagged Image File Format The .tif file format is appropriate for print at 150 dpi or higher (200 dpi for minimal decent resolution). It is a large lossless file. TIF files are generally way too large for the Web.

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.” The PNG file format was created as a non-patented file format because GIF and JPG were patented, and word was the owners were going to start charging for their use. So, a bunch of computer dudes got together (and they were, indeed, all guys) to create a file format that would do everything .gif and .jpg can do—only better, and they gave it away, thereby undermining any future profit potential on the gif and jpg. Yay! The only drawback is that .png tends to be a little larger size than .gif or .jpg, so we don’t use it often, but the one thing it is wonderful for is “transparency.”

If you look at this image, you will see many instances of transparency If you look at this image, you will see many instances of transparency. For example, the menu bar is black, but the opacity has been lowered so that the web page background shows through. The logo in the upper left corner has transparency all around it instead of a bounding box, so that the web page background shows all around it. 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” The .gif file format supports transparency as well, but it also creates the “dreaded white jaggies” around the graphic.

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”