1 / 46

FILE SIZES & TYPES

FILE SIZES & TYPES. OPTIMIZATION. 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.

shubha
Download Presentation

FILE SIZES & TYPES

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FILE SIZES & TYPES OPTIMIZATION

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

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

  4. Units of Measure • 1024 bytes = 1 Kilobyte (KB) • 1024 kilobytes = 1 Megabyte (MB) • 1024 megabytes = 1 Gigabyte (GB) • 1024 gigabytes = 1 Terabyte (TB)

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

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

  7. What Impacts Size? Number of graphics in the file The dimensions of the graphics How many pixels are in the graphic The file format selected

  8. 1. Number of GRAPHICS impacts size of a file

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

  10. 2. DIMENSIONS OF GRAPHICS impact size of a file

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

  12. 3. Number of PIXELS impacts size of a file

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

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

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

  16. NOTE: Saving the Authoring File Always remember to save layers intact in your original authoring programs. (You can’t unflatten after you’ve closed).

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

  18. .PSD (File > New)Print: 200 ppi/dpi CMYK | Web: 72 ppi/dpi RGB

  19. To Change Pixels or Dimensions: Image > Image Size

  20. To Change Color Modes: Image > Mode > RGB

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

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

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

  24. FILE FORMATS Impact size of a file

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

  26. 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. • .tifis 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).

  27. HOW TO CHOOSE FORMATS Consider the type of graphic Consider the purpose of the graphic

  28. For Web, PPT, Word docs, and .pdf’s for electronic viewing. • JPEG GIF

  29. Go to File > Save for Web, and select .jpg or .gif

  30. WHEN GOOD GRAPHICS WHEN GOOD GRAPHICS GET SAVED BADLY . . .

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

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

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

  34. Size Issues: What file format should this be?

  35. File Formats

  36. 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.”

  37. TRANSPARENCY

  38. Transparency • In Photoshop, transparency is denoted with a checkerboard. • The background layer is turned off.

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

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

  41. Save a .png with transparency: • Go to File > Save for Web and select .png 24. Check “transparency.”

  42. .gif: “The dreaded white jaggies”

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

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

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

  46. QUESTIONS?

More Related