HTML notes: Image Optimization
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
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:

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)/

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!

director logo

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.