Imagery for the Web

Today we will work on a number of tasks including saving images for the web.

Open up and save on your computer one of the two camel shots I took recently at the Budapest zoo.Both shots have a smaller file size as I cropped somewhat and saved as a JPEG file.

Camel one large
Camel two large

1. Saving images for the web: Your first assignment is too play with the photo to make it useable on a website. We need to keep this file small enough without losing detail and color.
Go over these notes.. I want you to try and see what happens when you save as 72 vs 96 ppi: when you save as a jpeg vs gif; when you cut down the number of colors; when you view the same photo under windows vs mac machine and what to do with a transparency.

In the end we need a file no bigger than 40k and as big as possible. Save your effort and then we will compare the classes efforts.

2.Transparency: Open photoshop- create a file about 4 inches by 4 inches. Create a oval or circle and fill with yellow. Then use save for web.. what happens if you save as gif vs jpeg. Will the background stay transparent or turn white? How will that effect if you want to put a logo on a web page?

3. Rolloevers:

Creating a rollover image A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image. Use the following images to create a rollover: Dowload both roll1 and roll2: roll1 and roll2

4. Navigation Bar:
Create two pages.. put something on each so you can identify each. Choose one, and then create the following button by opening: insert > intereactive images > navigation bar > then use the up and down ( roll over images you used before) and a link to the second page to get it active. Actually these "buttons" are no more than the rollover you created above but with a link.
You can be very creative with this "buttons": think back to your fruit page. However they may be problematic for older browsers.. so you should include a simple set of linked text on the bottom of the page in case the buttons don't work!

If you have time fool around with layers

Put down some text and down overlay a layer image....

BIG TEXT BIG TEXT BIG TEXT

Using the Save For Web dialog box
You use the Save For Web dialog box to choose Web file formats, select compression and color options, and preview your optimized image. In addition, you can preserve background transparency or set background matting, and change the image size.
To display the Save For Web dialog box:Choose File > Save for Web, or click the Save for Web button in the shortcuts bar.


You use a dual-image window to see both your original and optimized images in the Save For Web dialog box. This view lets you compare the two images and determine which optimization settings work best. If some areas of an image aren't visible, you can use the hand tool to bring those areas into view. You can also use the zoom tool to magnify or reduce the view.
To navigate in a view:
1. Select the hand tool in the Save For Web dialog box, or hold down the spacebar.
2. Drag in the view area to pan over the image.
To zoom in or zoom out:Do one of the following:
* Select the zoom tool in the Save For Web dialog box, and click in a view to zoom in.
* Hold down Alt (Windows) and click in a view to zoom out.
* Choose a magnification level from the Zoom pop-up menu, or enter a value in the Zoom text box, and then press Tab on your keyboard.

Save for Web dialog box A. Toolbox B. Color Picker C. Optimization settings D. Animation options E. Zoom level menu F. Original imageG. Optimized image H Browser Preview menu

Underneath your image in the Save For Web dialog box, the annotation area provides valuable optimization information. The annotation for the original image shows the file name and file size. The annotation for the optimized image shows the current optimization settings, the size of the optimized file, and the estimated download time based upon the selected internet access speed.
To view your image's estimated download time:
1. Click the triangle located to the right of the optimized image to view the Preview pop-up menu.
2. Choose an Internet access speed, including modem, ISDN, cable, or DSL internet access.
When you change the internet access speed, the estimated download time in the annotation area is updated. If the download time seems too long, try different optimization settings or change the image size in the Save for Web dialog box.

Previewing variations in color display
When optimizing an image for the Web, consider how the image will appear on different monitors. In general, an image appears darker on Windows system than on Mac OS computers You can simulate cross-platform display differences in the Save For Web dialog box.
To preview variations in color display:
1. Click the triangle to the right of the optimized image to view the Preview pop-up menu.
2. Choose a display option:
* Uncompensated Color (the default option) to view the image with no color adjustment.
* Standard Windows Color to view the image with color adjusted to simulate a standard Windows monitor.
* Standard Macintosh Color to view the image with color adjusted to simulate a standard Macintosh monitor.
* Document Color Profile to view the image with its color profile if one exists for it

Choosing a file format for the Web
The file format you choose for a Web image is determined by the color, tonal, and graphic characteristics of the original image. In general, continuous-tone images, such as photographs, should be compressed as JPEG files.

Illustrations with large areas of solid colors and crisp details, such as type, should be compressed as GIF or PNG-8 files. In addition, to animate an image, you must save it as a GIF file.

PNG-24 file format is suitable for continuous-tone images. However, PNG-24 files are often much larger than JPEG files of the same image. PNG-24 format is recommended only when you are working with a continuous-tone image that includes multilevel transparency. Unlike the PNG-24 format, the JPEG format doesn't support transparency.


A photograph suitable for compression as a JPEG or PNG-24 image, and artwork suitable for compression as a GIF or PNG-8 image
Choose a format that contains sufficient bit depth to display the colors in the image.
PNG-8 and GIF files support 8-bit color, so they can display up to 256 colors.
JPEG and PNG-24 files support 24-bit color, so they can display up to 16 million colors.
Depending on the format, you can specify image quality, background transparency or matting, color display, and how browsers display the image while it downloads.
The appearance of an image on the Web also depends on the colors displayed by the computer platform, operating system, monitor, and browser. Preview images in different browsers on different platforms to see how they will appear on the Web.

Setting optimization options for JPEG format
JPEG is the standard format for compressing continuous-tone images such as photographs.

Optimization options for JPEG format A. Optimization format B. Compression Quality pop-up menu C. Compression Quality slider

To optimize an image in JPEG format:
1. Choose JPEG for the optimization format.
2. To create an enhanced JPEG with a slightly smaller file size, select Optimized. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.
3. Do one of the following to specify the compression level:
* Choose an option from the Quality pop-up menu.
* Drag the Quality pop-up slider. (See Using pop-up sliders.)
* Enter a value between 0 and 100 in the Quality text box.
The higher the Quality setting, the more detail is preserved in the optimized image. However, a high Quality setting results in a larger file size than a low Quality setting. View the optimized image at several quality settings to determine the best balance of quality and file size.
4. Select Progressive to create an image that displays progressively in a Web browser. Progressive images display first at a low resolution, and then at progressively higher resolutions as the image downloads. If you chose Optimized to create a smaller file, the Progressive option won't be available.
Note: Progressive JPEGs are not supported by some browsers.
5. To preserve the ICC profile of the original image with the optimized file, select ICC Profile.
ICC profiles are used by some browsers for color correction. The ICC profile of the image depends on your current color setting. (See About color management.)
6. If the original image contains transparency, select a Matte color that matches the background of your Web page. Transparent areas in your original image are filled with the Matte color.
7. To save your optimized image, click OK. In the Save Optimized As dialog box, type a filename, and click Save.

Setting optimization options for GIF and PNG-8 formats
GIF is the standard format for compressing images with large areas of solid colors and crisp details like those in line art, logos, or type. Like the GIF format, PNG-8 supports transparency, and efficiently compresses areas of solid color while preserving sharp detail; however, not all Web browsers can display PNG-8 files.

Optimization options for GIF format: A. Optimization format B. Color reduction algorithm C. Dither algorithm

GIF format and PNG-8 format can use up to 256 colors to describe an image. The process of determining which colors to use is called indexing, so images in GIF and PNG-8 formats are sometimes called indexed color images. To convert an image to indexed color, Photoshop Elements builds a color lookup table, which stores and indexes the colors in the image. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.
To optimize an image in GIF or PNG-8 format:
1. Choose GIF or PNG-8 for the optimization format.
2. Select Interlaced to create an image that displays at low-resolution in a browser while the full-resolution image is downloading. Interlacing can make downloading time seem shorter and assures viewers that downloading is in progress.
3. Choose a color reduction algorithm for generating the color lookup table:
* Perceptual to create a custom color table by giving priority to colors for which the human eye has greater sensitivity.
* Selective to create a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. (Selective is the default choice.)
* Adaptive to create a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only shades of green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
* Web to use the standard, Web-safe 216-color color table common to the 8-bit (256-color) palettes of Windows and Mac OS. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. If your image has fewer than 216 colors, unused colors are removed from the table.
* Custom to preserve the current color table as a fixed palette that does not update when you change the image.

4. To specify the maximum number of colors in the color palette, select a number from the Colors pop-up menu, enter a value in the text box, or click the arrows to change the number of colors. If the image contains fewer colors than the palette, the color table reflects the smaller number of colors that are in the image.
If you chose either Web or Custom for the color reduction algorithm, you can choose Auto in the Colors menu. Choose Auto if you want Photoshop Elements to determine the optimal number of colors in the color table based on the frequency of colors in the image.
5. Choose a dithering algorithm option from the pop-up menu. If you choose Diffusion, specify a percentage for Dither.

6. If the image contains transparency, select Transparency to preserve transparent pixels; deselect Transparency to fill fully and partially transparent pixels with the matte color. (See Making transparent and matted images.)
7. To create an animated GIF, select Animate. See Setting up animated GIFs.
8. To save your optimized image, click OK. In the Save Optimized As dialog box, type a filename, and click Save

Making transparent and matted images
Transparency makes it possible to create non rectangular images for the Web. Background transparency, supported by the GIF and PNG formats, preserves transparent pixels in the image. These pixels allow a Web page background color or background image to show through the transparent areas of your image.


Web button without transparency and with transparency

Background matting, supported by the GIF, PNG, and JPEG formats, simulates transparency by filling or blending transparent pixels with a matte color that can match the Web page background. Background matting works best if the Web page background is a solid color and if you know what that color is.
To create background transparency or background matting in the optimized image, the original image must contain transparency. You can create transparency when you create a new layer or use the eraser tools.
Preserving transparency in GIF and PNG images

GIF and PNG-8 formats support one level of transparency--pixels can be fully transparent or fully opaque, but not partially transparent. PNG-24 format, however, supports multilevel transparency, letting you preserve up to 256 levels of transparency in an image.
To preserve background transparency in a GIF or PNG image:
1. Open or create an image that contains transparency, and choose File > Save for Web.
2. In the Save For Web dialog box, select GIF, PNG-8, or PNG-24 as the optimization format.
3. Select Transparency.
4. For GIF and PNG-8 format, specify how to treat partially transparent pixels in the original image. You can blend these pixels with a matte color, or you can create hard-edged transparency.

MORE ABOUT:
About JPEG format
The JPEG format supports 24-bit color, so it preserves the broad range and subtle variations in brightness and hue found in photographs and other continuous-toned images. A progressive JPEG file displays a low-resolution version of the image in the Web browser while the full image is downloading. JPEG is supported by most browsers.
JPEG format compresses file size by selectively discarding data. Because it discards data, JPEG compression is referred to as lossy. A higher quality setting results in less data being discarded, but the JPEG compression method may still degrade sharp detail in an image, particularly in images containing type or vector art.
Note: Artifacts, such as wave-like patterns or blocky areas of banding, are created each time you save an image in JPEG format. Therefore, you should always save JPEG files from the original image, not from a previously saved JPEG.

The JPEG format does not support animation or transparency. When you save an image as a JPEG file, transparent pixels are filled with the Matte color specified in the Save For Web dialog box. To simulate the effect of background transparency, you can match the Matte color to the Web page background color. If your image contains transparency and you do not know the Web page background color, or if the background is a pattern, you

About GIF format
The GIF format uses 8-bit color and efficiently compresses solid areas of color while preserving sharp details like those in line art, logos, or type. You also use the GIF format to create an animated image and preserve transparency in an image. GIF is supported by most browsers.
The GIF format uses LZW compression, which is a lossless compression method. However, because GIF files are limited to 256 colors, optimizing an original 24-bit image as an 8-bit GIF can subtract colors from an image.

You can choose the number of colors in a GIF image and select options to control how colors dither in a browser. GIF supports background transparency or background matting, in which you blend the edges of the image with a Web page background color.

About PNG-8 format
The PNG-8 format uses 8-bit color. Like the GIF format, PNG-8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.
Because PNG-8 is not supported by all browsers, you may want to avoid this format when your image must be accessible to a wide audience. For more information on browser support for PNG, see your browser's documentation.
The PNG-8 format uses a more advanced compression schemes than GIF, so a PNG-8 file can be 10% to 30% smaller than a GIF file of the same image, depending on the image's color patterns. Although PNG-8 compression is lossless, optimizing an original 24-bit image as an 8-bit PNG file can subtract colors from the image.

3. Rolloevers:
Creating a rollover image
A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.

You cannot see the effect of a rollover image in the Dreamweaver Document window. To see the rollover effect, press F12 to preview the page in a browser, then roll the pointer over the image.

Rollover images are automatically set to respond to the onMouseOver event.
A more complex form of rollover image is a navigation bar. To create a navigation bar, use the Insert > Interactive Images > Navigation Bar command
To create a rollover:
1. In the Document window, place the insertion point where you want the rollover to appear.
2. Insert the rollover using one of these methods:
• In the Insert bar, select Common, then click the Rollover Image icon.
• In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
• Choose Insert > Interactive Images >Rollover Image.
The Insert Rollover Image dialog box appears.
3. In the Image Name text box, type a name for the rollover.
4. In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file's path in the text box.
5. In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file's path in the text box.
6. If you want the images preloaded in the browser's cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option.
7. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
8. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image.
Note: If you don't set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
9. Click OK to close the Insert Rollover Image dialog box.
10. Choose File > Preview in Browser or press F12.
11. In the browser, move the pointer over the original image.
The display should switch to the rollover image.