Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Image Optimization
Optimizing for the Web:
Process by which file format, storage size and color are chosen to maximize quality yet still enable to download quickly on the web; Reduce size until image quality degrades:

1. In Photoshop: Crop the image - only include most important info.
2. Resize to 800w max, 600h max, 72 dpi.
3. Jump to Image Ready (Click button on bottom of PS toolbox).
4. Make sure Original/Optimized is selected from Image Info pop-up (bottom left corner). Choose Size/Download Time to see download times.
5. Click 2-Up tab to see original and optimized simultaneously (or 4-Up for more views).
6. Open Optimize palette: Window > Optimize.


To Save a JPEG File:

1. Select options FORMAT: JPEG in Optimized Palette:

• JPEG
• Maximum, High, Low, Medium Quality (or move quality slider til happy).
• Check Progressive box to show overview and sharpen up on web page.
• Increase Blur to lessen JPEG artifacts if necessary (don't over-blur).
• Matte: JPEG doesn't support it; set to Bkgd color to simulate transparency.
• Check Optimized box to produce smallest file (old browsers won't be able to read it though!)

2. File > Save Optimized; name it (all lowercase); It will give you the .jpg extension by default.


To Save a GIF File:

1. Select options for GIF:

• GIF
• Palette: try different ones see definitions below.

Type of Palettes:

System (Mac OS or Windows) - Use if it will only be viewed on that platform.
Web - Use for web viewing (216 common colors on Web browsers); Shifts image colors to closest in web palette; least colors, smallest file, not best image quality.
Custom - Create your own palette using the color picker.
Perceptual - Generates a color table based on colors in the image, with attention to how humans actually perceive color; Perserves overall color integrity.
Selective - Generates a color table based on colors in the image, preserves flat colors and Web-safe colors.
Adaptive - Generates a color table based on the part of spectrum most used in the image (larger file).

• Dither: Dither=simulates for 8-bit monitor; larger size; Diffusion=subtle & small.
• Dither %: high=better but bigger.
• Max # Colors: Web defaults.
• Transparency= preserves transparency.
      To make an image have transparency you must have parts of the image transparent already.
• Matte: controls partially transparent pixels:

Set to bkgd color of page -or- None = jagged edge. Either will eliminate HALO effects.
Soft edge effects = Matte color. EX: the Matte = color of a Drop Shadow.

• Check Interlaced Box = shows overview and sharpens up images - adds to file size.
• Web Snap%: range of colors that snap to Web-safe equivalent (High=small, dither)
• Adjust Lossy value: reduces size, but will lose some info.

2. File > Save Optimized; name it (all lowercase); It will give you the .gif extension by default.
3. Optional To Save the Settings you've created: Save Settings > name.irs (save to Z: in Optimize folder)/

[BACK to RESOURCES]