class 02 – review web graphic formats, image compression in Photoshop, Dreamweaver introduction, Quiz 1
Web Graphic Formats
Okay, now let’s talk about how to prepare images for the web. But before we get started below is some information about downloading files from this site. You will need to download a zip file to complete the exercise at the end of the class notes so please be sure you know how to download a file from this site.
Downloading files
The following is an explanation of how to download files from this site. The download files will typically be in a format called ZIP. The ZIP format allows multiple files to be grouped together into one file for a simpler downloading process. In addition, the ZIP format compresses the size of the files so the download takes less time. This means that you will download one compressed file with a “.zip” file extension. You then decompress the files and put them on your personal disk.
You can decompress these files on Macintosh computers with the Stuffit Expander program. If you have a PC or Macintosh at home or work, you can get the following utilities for working with ZIP files: StuffitExpander for the Mac or PC, or WinZip for the PC.
Downloading files
- On the web page, click on the file to be downloaded.
- On most Macintosh systems, the file will be downloaded to the desktop. It may be decompressed automatically, or you may have to double click on it to decompress it, or you may have to open Stuffit Expander to decompress it.
- On the PC:
- When the dialog box comes up, click OK to “Save this file to disk”
- Then BROWSE your way to a directory on your Zip disk to SAVE the file
- Start WinZip and use FILE>OPEN (or the OPEN icon) and browse to the drive where you saved the file from the web browser.
- With the zip file opened in WinZip, select ACTION>EXTRACT (or the EXTRACT icon), browse to a directory on your disk where you want the files placed, and click on the EXTRACT button. Note that you do not have to select the files to be extracted.
- This will uncompress, separate all the files, and place them on your disk.
For practice, download and extract the compression_test.zip file here.
Okay, now before we get started let’s first talk a little about web-safe colors versus non web-safe colors.
Web-safe colors
Are they necessary? There is a standard set of 216 colors that are known as the “web safe” colors. Long ago, web designers used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. (i.e. a few of the 216 colors are mixed to create a substitute for the actual color.)
But these days, less than 1% of web users use computers that only display 256 colors–either because they have very old computers that “compresses” the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.
Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web-safe colors anymore. You are free to use of the millions of colors available to you. (But this is my opinion, and others disagree).
To see a chart of all the web safe colors, see this page on the WebMonkey site
For more information about the percentage of users viewing the with with 256 colors, see Browser News
Basic image types
RGB images
RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.
RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).
Bit depth = The number of different colors available for each pixel
- 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
- 24bit = 16,777,216 colors
- 16bit = 65,536 colors
Indexed images
Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.
Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).
Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.
Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.
- 8bit = 256 colors
- 6bit = 64 colors
- 4bit = 16 colors
- 2bit = 4 colors
- 1bit = 2 colors
Dithering
Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.
 |
 |
| Non-dithered image (2382 bytes) | Dithered image (3598 bytes) |
These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.
Web image types
GIF format
A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.
- Best for - Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
- Transparency – Defines one color to be transparent
- Animations – Format supports multi-frame animations
- Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.
JPEG format
A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.
- Best for – Photographic images, complex images, images with soft edges
- No transparency or animation
- Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.
PNG format
A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.
About the 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 you are distributing the image to a wide audience.
The PNG‑8 format uses more advanced compression schemes than GIF does, and 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.
As with the GIF format, you can choose the number of colors in an image and control how colors dither in a browser. The PNG‑8 format supports background transparency and background matting, by which you blend the edges of the image with a web page background color.
The PNG‑24 format uses the same lossless compression method as the PNG‑8 format. For that reason, PNG‑24 files are usually larger than JPEG files of the same image. You may want to avoid PNG‑24 format when you are distributing your image to a wide audience.
In addition to supporting background transparency and background matting, the PNG‑24 format supports multilevel transparency. You can have up to 256 degrees of transparency from opaque to completely transparent, so you can blend the edges of an image smoothly with any background color. However, not all browsers support multilevel transparency.
More information about the PNG format can be found here.
Making images
Download and extract compression_test_accd.zip.
The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.
GIFs
To make a GIF, do the following to an RGB image in Photoshop:
Show and hide any layers to get the image you need- Determine the color of the web page background that the image will be displayed against
- Select FILE>SAVE FOR WEB…
- Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
- Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
- Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
- Perceptual – Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
- Selective – Creates 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 option.
- Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
- Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
- Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
- Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
- If you want the image to display while downloading,select the INTERLACED checkbox.
Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.
- Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
- If you have created a mask for transparency, and want the background of the web page to show through the mask area, checkthe TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
- Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.
JPEGs
To make a JPEG, do the following to an RGB image in Photoshop:
Show and hide any layers to get the image you need- Select FILE>SAVE FOR WEB…
- Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
- Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
- Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
- Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
- If you want the image to display while downloading, select the PROGRESSIVE checkbox.
Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.
Please read the information below before completing the class exercise.
Required Reading:
Photoshop CS/ImageReady CS for the Web Hands-On Training: Optimization
Additional Resources (suggested):
iTunes: Lynda.com video- Photoshop CS3 Web Essentials
This is a good resource to walk through the beginning steps of saving an image with a transparent background using a matte color.
Exercise:
Working with the fern, graphic text, and temple images in the download, use Photoshop to convert them to web format with FILE>SAVE FOR WEB.
Do the following for each image:
- Decide on the best format to use for this image: JPEG or GIF
- Decide on the smallest file size possible without compromising image quality
- Document the settings you use for your final versions of each image (e.g. number of colors in a GIF, compression setting for JPEG).
- Note the size of each file you create.
Please be sure you understand how to optimize images for the web and let me know if you have any questions.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dreamweaver introduction
Dreamweaver is an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application (e.g. GoLive or FrontPage).
Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.
Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop or other applications to create images, sounds, etc.
Creating a new web page in Dreamweaver
- Select FILE>NEW
- Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
- Give the file a name. This name should be all lower case, and have no spaces between words.
- SAVE the file
- There are two windows to use when creating web pages:
- Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
- Code Inspector. This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).
Previewing in the browser
Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox). Alternatively, you can simply press the shift + F12 function key.
Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.
Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.
Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.
Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.
Page properties
Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:
- Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
- Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
- Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
- Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).
The document toolbar
The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.
Of particular note are the three buttons on the left. They allow you to quickly change the window view:
- Design View – where you see how the page will appear in a browser
- Code and Design View – a split page view where you see the code at the top, and the design at the bottom
- Code View – where you see only the code that describes the page
Required Reading:
1) Please read pages 29-47 in our texbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques
2) Dreamweaver CS3 Hands-On Training by Garrick Chow: Exploring the Interface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Web page weight
Recommended page weight: total size (html/images/flash) for a web page should be around 60-100K although we often visit web site like Amazon and Ebay where page size is often much larger.
Some typical download times under ideal conditions, which rarely happen:
| Size of File | 56Kbps Modem | 256Kbps DSL | 1500 Kbps Cable |
| 20Kbyte | 3.2 secs | 0.6 secs | < 1 sec |
| 50Kbyte | 8.0 secs | 1.6 secs | < 1 sec |
| 100Kbyte | 16.0 secs | 3.1 secs | 1 sec |
| 1meg | 160.0 secs | 31.3 secs | 6 sec |
Note: s Nielsen/ NetRatings reported (Feb. 2006) that 32% of US home users have dial-up connections, and 68% have broadband.
Checking page weight
You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.
Screen size design
Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!
The situation is more complicated than simply screen resolution:
- Explorer and Safari have different amounts of space available for pages
- Macs and PCs have different amounts of space available for pages
- The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
- If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)
Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:
- In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
- In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can designto 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide
The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.
- Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
- Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
- Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)
Previewing page sizes in Dreamweaver
You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.
If the dimensions you want to view aren’t available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size.
Non web-safe colors
The colors in the Dreamweaver color palette are all web safe colors. But you can get to other color palettes by clicking on the side arrow.
To use non web-safe colors, you can use the eye-dropper to select any color from anywhere on the screen. And you can select the color selector (the color wheel located to the left of the side arrow) and choose one of the millions and millions of non web-safe colors.
Text formatting
Text formatting in Dreamweaver is similar to the formatting available in a word processor. You select the text you wish to modify, and then apply a style to it. For example, to make a word bold, select the word, then click on the “B” button in the Property Inspector. Alternatively, you can select the text, and use the Text pull-down menu (e.g. Text>Style>Bold).
Text characteristics can be set by Dreamweaver, including bold, italic, color, size, font, and justification. In addition, Dreamweaver has a utility to check the spelling of the selected text or the entire document (TEXT>CHECK
SPELLING).
The text inspector behaves much like the toolbars in a word processor. Note that you can do the following:
- Creating a heading with the Format pull-down
- Set the font face
- Set the font size
- Set the font color
- Make some text bold and italic
- Change the justification to left, center, and right
- Make a link to another web page
- Create a list
- Indent some text
That said, we will NOT style our text in this class using the text inspector but rather we will use Cascading Style Sheets (CSS). We will discuss the advantages of using CSS later in the semester.
Line Breaks: Note that when entering text, if you hit ENTER on the keyboard, a blank line will be inserted between paragraphs. This happens because Dreamweaver inserts a <p> tag at the beginning of the previous paragraph, and a </p> at the end. If you don’t want a blank line between paragraphs, the hold the SHIFT KEY down while you hit ENTER. This will insert a <br> at the end of the paragraph.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Working with images
Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.
A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.
To steal an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.
 flower.jpg |
 flower.gif |
Image: FreeDigitalPhotos.net
Once you have an image to work with, these are the steps for putting an image in a web page.
- Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon
in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector. - Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
- Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
- Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
- Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.
Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the
lower right hand corner of the palette. Experiment with the following:
- Change the height and width of the image
- Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
- Change the alignment so text wraps around the image
- Set the alt attribute of an image
- Make the image a link
- Change the VSpace and Hspace to change the margin around an image when text if flowing around it
Required Reading:
1) Dreamweaver CS3 Hands-On Training by Garrick Chow: Learning the Basics
Assignment: answer the question in the attached Quiz 1 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, March 3. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.
copyright © 2006-2009, jamie cavanaugh
