Adding Graphics to a Web Site

Chapter seven of Creating Web Sites: The Missing Manual deals with adding graphic images to one's web site. Images enhance the text on one's web site but there is the need to know which types of files work best for which types of images and the need to how best to position them in a web site.

To get an image to appear in a web site:

1. The image file must be in a separate file from the web site but it needs to be placed into the same folder as the web page.
2. An image tag needs to be placed within the HTML file corresponds to. Image tags denote which image one would like to appear. Since pictures are inline elements they go within other block elements like paragraphs. The image tag signals a browser to search for the file (gif, jpg), retrieves it and inserts it into the web page where it is situated. When an image file is too large it may take more time to appear compared to the text within a page.

Image tags require two properties:

1. The source property which indicates where the image file is located.
2. The alt property which shows a small portion of alternate text when an image cannot be displayed.

There are a number of reasons why graphics may not show on web site:

1. A web browser does not support the type of images requested
2. The user has turned off pictures to save time
3. The browser cannot locate the image
4. A viewing impaired person is utilizing a screen-reading program
5. A search engine examines the web page to decide the content of the image in order to index it within its search catalog.

The last two reasons are the most important to consider when creating the text within the alt attribute.

Some browsers have also used the alternate text to create a pop-up message when a surfer moves the mouse over a picture. The creation of this type of pop-up is controversial since this is not how alternate text was meant to be used. The best way to create a pop-up with text is to use the property designed to create one; the title attribute.

There are two meanings when discussing size and images:

1. The dimensions picture as it is viewed in a browser. The picture dimensions are meaningful in terms of how much space a picture takes up on the screen. Pictures are measured in pixels (dots).
2. The size of the file in bytes. The files size is significant in that it impacts the length of time it takes to send an image over the Internet to the browser.

One can change resize a picture using the image tag to define the height and width attributes. This is not recommend however, since the picture results could end up being poor. (Expanding images could result in a jagged appearance and creating a smaller images could result in a blurry picture.)

Some seasoned web designers use the utilize the add height and width properties for the same dimensions as the picture being used for two reasons:

1. So that the browser determine how big a picture is and begin laying out the page. If the image height and width dimensions are not included the browser will not know the picture size until it is fully loaded resulting the need to rearrange the page layout. This is bothersome to a user who has begun reading the web page.
2. The height and width attributes determine the size of the picture box when the picture cannot be downloaded. When these properties are not used the picture box is minimized and is just large enough to display the error icon and alternative text. This is very likely to negatively effect the alignment of the web page.

A great many HTML editors are designed to add the height and width attributes when an image is added.

There are three file formats that can be displayed by a web browser:

1. GIF ("jif") which used with graphics that contain few colors like logos or clip art. GIF should never be used for photographs.
2. JPEG ("jay-peg")which is used for photographs that will not be effected by quality loss. This is because the JPEG format reduces or compresses the file size of the image so that it can be downloaded faster. JPEGs should not be used with pictures that contain text or line art.
3. PNG ("ping") which can be used for all types of images although they cannot be viewed in older browsers because they do not support this type of format. PNG images do not compress as well as JPEGs.

These images are bitmap or raster types of graphics based on a grid of dots. Vector images or mathematically created shapes are not supported in Web pages.

Raster graphics tend to be larger files and for this reason compression becomes an issue (so that the amount of disk space is reduced). There are two kinds of compression used in Web graphics:

1. Lossy compresses images more efficiently however there is a loss in the quality of the image
2. Lossless does not compress as much however the image quality is preserved.

Bitmaps or images files ending in .bmp should never be used because browser are cannot read them properly resulting in confusion. These image files are also extremely large due to the fact that they cannot be compressed.

Image files require compression because otherwise it takes more time for images to send across the Internet. This extra time can be exasperating to a web surfer.

Although JPEG images are the best for compression there are problems associated with them known as compression artifacts. Commonly noted compression artifacts include: blocky regions, halos around edges and blurriness.

Choosing the Correct Image Format

JPEG best for large extremely detailed pictures that need to be parred down in size.

GIF is best when one needs to compress pictures with text and shapes where you do not want to blur the edges. This type of image file cannot be too large since they do not compress as well as JPEGs.

PNG is best for supporting full color images with sharp edges. This type of file does not lose detail because it utilizes lossless compression. There are two problems associated with PNG 1)Not all graphics programs support PNG files resulting in larger images and 2)older browsers do not support these files.

GIF images should be used for pictures that contain transparent areas. PNG images also support transparency however this feature may not work in all browsers.

Putting Pictures on Colored Backgrounds

All image files are stored as rectangles. Problems occur when using pictures of other shapes like a circle because the background is a white rectangle. If the background you are using is white on your Web page the image will blend into the background. When another background color is used the image will look odd - there will be a white box surrounding the image. The best way to deal with this situation is to change the color of the image box to that of the background color on the web page utilizing a graphics program. The only drawback to this is that if one changes their background color the graphic background color will need to be changed as well.

Images and Styles

The best manner to position images is by utilizing style sheets.

Inline Images in Text

Normally when image tags are used the image is inserted to the right of text. The bottom edge of the image lines up with the surrounding text. The vertical alignment property can be used to alter this so that the image situated where one would like (top, middle, bottom of the text). This will work with small images however it does not work with large images. The text does not wrap around the picture; a single line of text appears beside the picture.

Borders

Just as text can be placed inside borders so can images. To create an external style sheet for a border surrounding images a style needs to be given a class name (ie. GrooveBorder). This needs to be done in order to apply the class attribute to a specific picture as opposed to every picture on one's Web page or site.

How to Wrap Text Around an Image

The easiest manner to arrange pictures is utilizing inline images which separate pictures and text in the Web page. Division tags are used to separate images from the text such as paragraph tags, line break tags and horizontal rules. This will separate text from the image.

In order to wrap text to the side of a picture and create a floating image a CSS property called float is used. The value used with the float property is either right or left some the the image appears to the left or right of the image. The image used has a class name so that wrapped text is only applied to the specific image one would like. Usually margins settings are adjusted when the float attribute is used. This gives some room between the image and the text.

Wrapping text can be difficult because it is dependent upon the width of the user's browser window. One way of dealing with this is to utilize tables. Another way of dealing with this issue is to manually stop the wrapping at the point one would like to using the clear property in a line break tag. The break tag will start a new paragraph after the floating picture this way.

When using CSS HTML tags are treated as containers so when a floating image is created the image really goes to the left or right side of the containing component. Style rules can additionally be used in order to create a padded not box to for a different visual effect.

Adding a caption to a picture is another option that gives a nice effect. The caption can be above or below an image. It is rather simple to add a caption to an inline image. All that is needed to insert a line of text right above or below a picture with a line break for separation. It becomes more difficult when adding a caption to a floating image. The image and caption need to float in the same way. One would use the FloatLeft or FloatRight style and use it with the desired tag. Then one would wrap the image tag and the text into a span tag. Next, the whole span tag needs to float and this is accomplished using the FloatLeft or FloatRight style rule.

Span is used inside other block elements such as paragraphs whereas the division element is used outside block elements.

Background Images

Background images can be used with CSS so that the image is behind the content of the page. This type of image is tiled which means that a small image is copied over and over throughout the window of the page. To create this effect one would use an image style property which would be go into the body tag (this way it would be applied to the entire page). Then the image file name is provided in the fomr of a url('filename').

When Creating a Tiled Background Keep in Mind:

• JPEG images are best to use since they display the most colors.
• The background should be lighter in color so that the text can be read on the page.
• The background color should match the image, this way the text will be visible even if the image cannot be downloaded.
• Small tiles should be used to keep down the time needed for users to see the page.
• When using tile images with asymmetrical patterns be sure that the edges line up or there will be lines around the tiles.

There are a number of sites to find background images including:

www.grsites.com/textures

http://www.backgroundcity.com/

http://www.backgroundarchive.com/

A background watermark can be used instead of a tile. The watermark is an image that is placed in a specific place on a web page. The best background watermarks are light in color and inconspicuous fading into the background. To add a watermark one would follow the same steps used to create a background property. Then some more style properties need to be added to create the effect. The repeat background property needs to be added to keep the image from tiling. The background-position property needs to be added so that the picture is aligned to either side or the center. Scrolling can be be changed to a fixed property to give the effect of a fixed image.

Techniques with Graphics

Buttons and logos are often created in drawing programs like Illustrator so that a web designer has more creative control of text. The following are the steps to designing text:

1. Start an image editor or drawing program.
2. Add a background color that correlates with the Web page.
3. Select a font to type over the background color.
4. Reduce the image size as small as possible without cutting off text.
5. Save the picture as a GIF file (the best file type for text unless the image has over 256 colors-when a PNG is used).

Backgrounds on Other Elements

A division tag is used when one would like to apply something to the background but not the entire page such as border.

Graphical Bullets in a List

Custom graphics can be created for a bulleted list. This is achieved by using the list-style property to define the bullet image. When the style rule is created and inserted into the style sheet, the rule is applied to the bulleted list.

Finding Free Art

One way to search for graphics on the web is use the special Google tool to search for the type of graphics needed: http://images.google.com/. This is not always the best way since many images are copyrighted.

There are many sources on the web for free graphics such as:

1. StockXCHNG where free stock photography can be found. http://sxc.hu/
2. Some other options can be found at: http://masternewmedia.org/news/2005/04/01/where_to_find_great_free.htm

Finding Clip Art

Clip art consists of animated graphics such as symbols. Some good sources of clip art include:

• www.grsites.com/webgraphics
• http://www.clipartconnection.com/
• http://www.myfreeclipart.com/
• Someone who owns the program Microsoft Office could also download clip art from the Office Online site. The graphics will have to be opened in a graphics program and saved as a supported Web image. http://office.microsoft.com/clipart