file sizes & types optimization. the larger the file size, the better the quality, but the...
TRANSCRIPT
![Page 1: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/1.jpg)
FILE SIZES & TYPES
OPTIMIZATION
![Page 2: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/2.jpg)
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
![Page 3: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/3.jpg)
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).
![Page 4: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/4.jpg)
Units of Measure
1024 bytes = 1 Kilobyte (KB) 1024 kilobytes = 1 Megabyte (MB) 1024 megabytes = 1 Gigabyte (GB) 1024 gigabytes = 1 Terabyte (TB)
![Page 5: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/5.jpg)
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.
![Page 6: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/6.jpg)
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
![Page 7: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/7.jpg)
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?
![Page 8: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/8.jpg)
1. NUMBER OF GRAPHICSimpacts size of a file
![Page 9: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/9.jpg)
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.
![Page 10: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/10.jpg)
2. DIMENSIONS OF GRAPHICS
impact size of a file
![Page 11: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/11.jpg)
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).
![Page 12: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/12.jpg)
3. NUMBER OF PIXELS
impacts size of a file
![Page 13: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/13.jpg)
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.
![Page 14: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/14.jpg)
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.
![Page 15: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/15.jpg)
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.
![Page 16: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/16.jpg)
Always remember to save layers intactin your original authoring programs.(You can’t unflatten after you’ve closed).
NOTE: Saving the Authoring File
![Page 17: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/17.jpg)
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.
![Page 18: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/18.jpg)
.PSD (File > New)Print: 200 ppi/dpi CMYK | Web: 72 ppi/dpi RGB
![Page 19: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/19.jpg)
To Change Pixels or Dimensions: Image > Image Size
![Page 20: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/20.jpg)
To Change Color Modes: Image > Mode > RGB
![Page 21: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/21.jpg)
.AI (File > New)Print: CMYK | Web: RGB
![Page 22: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/22.jpg)
To Change .AI Dimensions: Use Artboar Tool or File > Document Setup > Edit Artboards (change dimensions)
![Page 23: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/23.jpg)
To Change .AI Color Modes: File > Document Color Mode
![Page 24: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/24.jpg)
FILE FORMATS
Impact size of a file
![Page 25: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/25.jpg)
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).
![Page 26: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/26.jpg)
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).
![Page 27: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/27.jpg)
Consider the type of graphicConsider the purpose of the graphic
HOW TO CHOOSE FORMATS
![Page 28: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/28.jpg)
For Web, PPT, Word docs, and .pdf’s for electronic viewing.
JPEG GIF
![Page 29: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/29.jpg)
Go to File > Save for Web, and select .jpg or .gif
![Page 30: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/30.jpg)
WHEN GOOD GRAPHICSWHEN GOOD GRAPHICS GET SAVED BADLY . . .
![Page 31: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/31.jpg)
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.
![Page 32: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/32.jpg)
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.
![Page 33: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/33.jpg)
How should thishave been saved:jpg or gif? How was it saved instead?
![Page 34: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/34.jpg)
Size Issues: What file format should this be?
![Page 35: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/35.jpg)
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
![Page 36: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/36.jpg)
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.”
![Page 37: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/37.jpg)
TRANSPARENCY
![Page 38: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/38.jpg)
Transparency
In Photoshop, transparency is denoted with a checkerboard.
The background layer is turned off.
![Page 39: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/39.jpg)
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.
![Page 40: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/40.jpg)
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.
![Page 41: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/41.jpg)
Save a .png with transparency: Go to File > Save for Web and select .png 24. Check
“transparency.”
![Page 42: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/42.jpg)
.gif: “The dreaded white jaggies”
![Page 43: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/43.jpg)
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
![Page 44: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/44.jpg)
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.
![Page 45: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/45.jpg)
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
![Page 46: FILE SIZES & TYPES OPTIMIZATION. The larger the file size, the better the quality, but the harder to upload and download. Designers are always mindful](https://reader035.vdocuments.net/reader035/viewer/2022062721/56649f1c5503460f94c3304f/html5/thumbnails/46.jpg)
QUESTIONS?