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:
• 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:
• Palette: try different ones see definitions below.
Type of Palettes:
• Dither: Dither=simulates for 8-bit monitor; larger size; Diffusion=subtle & small.
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 %: 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)/
Importing Images Into HTML documents
Images should be in a folder (relative to HTML files) prior to inserting them into the HTML doc.
In BBEdit, click the IMAGE button on the HTML tools palette (can open this in the Windows - Palette menu): entering SRC and ALT at the bare minimum.
BBEdit will generate an IMG tag. This tag does NOT have a closing tag!
EX: <img src="../images/dir.jpg" width="35" height="34" border="2" alt="director logo">
SIZE attributes: (WIDTH, HEIGHT) - will distort image if you don't change width/height proportionately.
ALT attribute is Alternate Text that shows up on rollovers AND gives text description for non-graphic browsers.
BORDER attribute puts an outline around the image.