Class Notes


Images

  1. Images in HTML Pages
  2. Optimizing Images for the Web
  3. Structure of the website
  4. Image Slices
  5. Animated GIFs

Images in HTML Pages

Six factors to consider in Web Imagery:

1. Formats: GIF, JPEG, PNG (always 72 dpi).
2. Color: 8-bit monitor = 256 colors minus 40 system colors = 216 Browser-safe Web Palette.

• If image has too many colors for the monitor, the browser will dither images, which looks dotty.

3. Transparency: GIF / PNG support transparency; JPEG does not.

• Needed for non-rectangular images or images you want to see through parts of them.

4. Speed = Download time.

A) Use SMALL images -or-
B) Compress images:

• GIF - lossless - colors stored in a lookup table
(good with large areas of same color) - only 256 colors.
• JPEG - lossy, use for photographic, continuous tone

Lossy = A compression that reduces file size by actually removing data from the image.
Lossless = A compression method that retains all image detail.

• PNG - better compression than GIF, less lossy than JPEG.

GIF may be faster even if the file size is bigger because it does not have to be decompressed in the system.

C) Website images need to be optimized based on audience. Many users may be using monitor resolutions: 1024 x 768 and 800x600 with Modem connections.

5. Animation: Use GIF or SWF for animation.

6. Interlacing (Progressive): Use GIF or JPG for progressive refinement of image (no need to use on small images).

Some other issues:

Gradients in large areas - Can cause a slow loading site.

Bit depth for images then tells us how many colors are used in those images.

256=8bit or 28, 128=7bit or 27, 64=6bit or 26, 32=5bit or 25,
16=4bit or 24, 8=3bit or 23, 4=2bit or 22, 2=1bit or 21.

The following is a list of Bit Depth and their corresponding number of colors:

• 1 bit: 2 colors (black and white).
• 4 bit: 16 colors.
• 8 bit: 256 colors.
• 16 bits: 65,536 colors.
• 24 bits: 16 million colors. (3 color channels (R,G, & B) * 8 bit per channel)

Dithering is the intermixing of two colors to create the impression of a 3rd color.

Anti-aliasing blends the edges of an object with the background; (turning it off will give a jagged, sharp edge).


Optimizing Images for the Web

The file format, file size, color and compression 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. File menu - Save for Web & Devices
4. In top right corner select file type (GIF, JPEG or PNG)
5. Click 2-Up tab to see original and optimized simultaneously (or 4-Up for more views).
6. Select a window and change settings to see which one is best (looks good and is smallest file size)
7. When finished selecting settings, click SAVE.

To Save a JPEG File:

1. Select JPEG as the file type:

• Maximum, High, Low, Medium Quality (or move quality slider).
• Check Progressive box to load up as a low res and increase the resolution over time.
• 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. SAVE - It will give you the .jpg extension by default. ALWAYS save both a copy of the PSD file and your optimized one. Save the optimized one to the images folder.

To Save a GIF File:

1. Select options for GIF:

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

Type of Palettes:

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). Custom - Create your own palette using the color picker.
Restrictive - 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. System
(Mac OS or Windows) - Use if it will only be viewed on that platform.

Colors - select how many possible colors in the image (go with the smallest number possible and this will save lots of download time)

• 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:

• 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. Save ; name it (all lowercase); It will give you the .gif extension by default.

To Save a PNG File:

The difference between 8 bit and 24 bit PNG: 24 can handle millions of colors and transparency and 8 bit is 256 colors maximum.

1. Select options for PNG: (24-bit will only offer transparency)

• PNG
• Palette • Dither: Dither=simulates for 8-bit monitor; larger size; Diffusion=subtle & small.
• Dither %: high=better but bigger.
• Max # Colors: Web defaults.
• Transparency= preserves transparency.
• Matte: controls partially transparent pixels:

2. Save ; name it (all lowercase); It will give you the .gif extension by default.

 

Examples

Photographic Image GIF
Photographic Image JPG
Simple Graphic GIF
Simple Graphic JPG

Dithering
Transparency and Matte

Importing Images Into HTML documents

Images should be in an images folder (relative to HTML files) prior to inserting them into the HTML doc.

In Dreamweaver, select Insert menu - IMAGE and find the image. Enter its ALT text information.

EX: <img src="../images/dir.jpg" width="35" height="34" border="2" alt="The 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.


File Structure

Your file structure MUST be set up like this:

file structure


Image Slices

• Slicing divides an image into distinct ZONES.
• Divides up a large image to enable it to download faster (group of small slices downloads faster than a single large image) because you can optimize each slice individually.

1. Always use Photoshop Guides to mark where you will make your slices (hit R to turn on the rulers and pull a guide line from the Ruler)
2. Under the Crop Tool in the Tool Palette, select the slice tool.
3. Drag to select a slice of your image (make sure View - Snap is ON)
4. Slice up the parts of the image you need to be separate.
5. Go backto the slice tool and select Slice Select Tool.
6. Double click the slice and name the image. Make sure you name it an easy to remember name (Row1Col2.jpg, etc.) No need to fill in the rest, we will do that in Dreamweaver.
7.Under the View Menu you can Clear the Slices or Lock the Slices

Deleting Slices:

1. Slice Select Tool (K)
2. Shift select; hit Backspace/Delete
Resizing Slices: drag slice border handles when slice is selected.

To Save the Sliced Images:

1. File menu - Save for Web & Devices
2. Select all the options to optimize the image
3. Find and Click the image folder (do not go inside it) then SAVE
4. Format: Images Only
5. Settings: Default Settings
6. Slices: All Slices or just the selected ones


Animated GIFs

Animated GIFs are sequences of images displayed over time.

Animated GIF

Creating and Editing:

To create a hand drawn animation using Photoshop Frame Animation

In Photoshop, open a new file - 72 pixels per inch - do not make it big
Then select Window menu - Animation

Make sure it is in Frame Animation mode - Animation (Frames)
If it is not, Animation Palette Menu (on the right side of the Animation box on the bottom of the page) - Convert to Frame Animation

You need to have your Layer palette open and work with both the Animation palette and layer palette

Different ways to animate using the layers:

Turn layers on or off for each frame
Move the layers - drag it around with the pointer tool

Steps to making an animation
Make new layer
draw on the layer
duplicate the layer and move the object or erase and redraw the object in new spot
you can also make a new layer
repeat the previous step till you have a nice stack of layers

go to the Animation (Frames) palette and select the first frame
turn on or off the layers you want to be visible in this frame
Duplicate the frame by clicking the icon in the bottom of the palette
Turn off and on layers for each frame duplicated

When you click the duplicate icon on the bottom it will duplicate the single frame or the series of frames you select

If you select more than 1 frame, it will put them after the last frame you selected

To insert new frames in the middle (Tweening)
Select the frame that you want the frames to go before
click the Tweens Animation Frames icon in the Animation palette
Select Previous frames, type number of frames, and only select the parameter that you want to change

If you select:
a single frame it asks if you want to put the additional frames
two contiguous frames, it puts the new frames in the middle
more than 3 or more frames, it replaces the middle frames with the new interpolated frames using
the outer frames as the ones to determine the tweening

The tween options:
Layers:
all layers will make inbetweens for all layers in the frame
selected layers makes inbetweens for only the selected layers in the layer palette

Parameters:
Select from position, opacity, or effects or a combination of the all

To set the delay select one or more frames
(you can select noncontiguous frames by using the Command click on Mac or Ctl click on PC)
Pull down on the delay number to select a new time delay

To set the loop
Pull down on the menu with Once in it to select Once, Forever or Other...

Changing the order of the frames

Drag the frame to a new spot in the row of frames

Reversing the frames
Select frames (can select frames that are not contiguous)
Animation palette menu - Reverse frames

To delete frames
Drag the drag to the trash or
select the frame and click the trash or
Animation palette menu - Delete Frame

Cut, Copy, Paste Frames

Select one or more frames
Animation palette menu - Copy Frame
Select the frame to indicate where you want to paste it
Animation palette menu - Paste Frame
Tell it where to paste it, Replace Frames, Paste over, Paste before, Paste after

Adding a new layer each time you make a frame:
Each time you want to add a new frame it is helpful to have a new layer if you are drawing frame by frame animation
Under the animation palette menu - select:
Create new layer for each new frame

You can also turn on or off
New layers visible in all frames
all newly created frames will appear in all frames

Increase size of frame view
Animation palette menu - Panel Options

Saving your animated GIF
Go to the File - Save for Web & Devices Select GIF and change the settings to optimize the file size SAVE