IMAGES


Introduction

A great Web site isn’t just about correct mark-up. Site organization, navigation, interactivity, content, delivery, and a multitude of other issues affect a user’s perception of a site. However, images probably are the most obvious part of a great Web site. Carefully used imagery can add to both the appeal and usability of a Web site. Creation of Web-ready images certainly is beyond the scope of this book, but HTML authors should at minimum be aware of the basics of Web image formats such as GIF and JPEG and know when they are being used appropriately. Although the basic HTML/XHTML syntax of adding images to a page using the img element is relatively straightforward, creation of an aesthetically pleasing page is truly more art than it is science.

Image Preliminaries

Before discussing image use in HTML, it is important to discuss what image formats are supported on the Web today. In general, Web-based images come in two basic flavors: GIF (Graphics Interchange Format), as designated by the .gif extension, and JPEG (Joint Photographic Experts Group), as indicated by the .jpg or .jpeg file extension. A third format, PNG (Portable Network Graphics), as indicated by the .png file extension, is slowly gaining ground as a Web format and is supported fairly well in modern browsers. Table 5-1 details thesupportedimagetypesfoundinmostbrowsers.Whilebrowsersmaysupportotherimage types, page authors should use only GIF or JPEG images to ensure that all users can see them.

NOTE OTE Internet Explorer and many other Windows browsers support the bitmap (BMP) file type popular with Windows users. This format has not been widely adopted on the Web.

Choosing the correct image for the job is an important part of Web design. In general, GIF images tend to be good for illustrations such as logos or cartoons whereas JPEG images usually are the choice for complex imagery such as photographs. The main concerns for site designers when considering an image format are the size of the file itself and the quality of the reproduction. Table provides a concise summary of the qualities of each format.

 

Subsequent sections will explain each of these basic features of the two main image formats in slightly more detail.

GIF Images

GIF is the most widely supported image format on the Web. Originally introduced by CompuServe (and occasionally described as CompuServe GIFs), there are actually two types of GIF: GIF 87 and GIF 89a. Both forms of GIF support 8-bit color (256 colors), use the LZW (Lempel-Ziv-Welch) lossless compression scheme, and generally have the .gif file extension. GIF 89a also supports transparency and animation, both of which will be discussed later in this section. Today, when speaking of GIF images, we always assume the GIF89a format is in use and make no distinction between the formats, regardless of whether or not animation or transparency is actually used in the image. GIF images use a basic form of compression called run-length encoding. This lossless compression works well with large areas of continuous color. Figure shows the GIF compression scheme in practice. Notice how the test images with large horizontal continuous areas of color compress a great deal, while those with variation do not. As shown in the demo, simply taking a box filled with lines and rotating it 90 degrees shows how dramatic the compression effect can be. Given GIF’s difficulty dealing with variability in images, it is obvious why the format is good for illustrations and other images that contain large amounts of continuous color. As mentioned earlier, GIF images only support 8-bit color for a maximum of 256 colors within the image. Consequently, some degree of loss is inevitable when representing true- color images, such as photographs. Typically, when an image is remapped from a large number of colors to a smaller color palette, dithering occurs. The process of dithering attempts to create the desired color that is outside of the palette, by taking two or more colors from the palette and placing them in some sort of checkered or speckled pattern in an attempt to visually create the illusion of the original color. GIF compression scheme comparison

Interlacing

GIF images also support a feature called interlacing. Interlacing allows an image to load in a venetian-blind fashion rather than from top to bottom a line at a time. The interlacing effect allows a user to get an idea of what an image looks like before the entire image has downloaded, thus avoiding user frustration as images download. See Figure for an example of interlacing. The previsualization benefit of interlacing is very useful on the Web, where download speed is often an issue. While interlacing a GIF image is generally a good idea, occasionally it comes with a downside; interlaced images may be larger than non-interlaced images. It is a bad idea to use interlacing for images that have text on them because it’s impossible for the text to be read easily until the download is complete.

Animation

Finally, the GIF format also supports animation. This works by stacking GIF after GIF to create the animation, in a manner similar to a flipbook. The animation extension also allows timing and looping information to be added to the image. Most popular graphics programs, such as Fireworks, support animated GIFs. An example of the interface to control GIF animation in Fireworks is shown in Figure 5-4. Animated GIFs provide one of the most popular ways to add simple animation to a Web page because nearly every browser supports them. Browsers that do not support the animated GIF format generally display the first frame of the animation in its place. Even though plug-ins or other browser facilities are not required, authors should not rush out to use animation on their pages. Excessive animation can be distracting for the user, and is often inefficient to download.

 

 

 

 

JPEG

The other common Web image format is JPEG, which is indicated by a filename ending with .jpg or .jpeg. JPEG, which stands for the Joint Photographic Experts Group—the name of the committee that wrote the standard—is a lossy image format designed for compressing photographic images that may contain thousands, or even millions, of colors or shades of gray. Because JPEG is a lossy image format, there is some trade-off between image quality and file size. However, the JPEG format stores high-quality 24-bit color images in a significantly smaller amount of space than GIF, thus saving precious disk space or download time on the Web. See Figure for an example of the quality versus file size trade off with JPEGs. Notice the significant file size savings obtained by sacrificing a little quality. The trick with JPEG’s lossy compression is that it focuses on slight smudging in areas of heavy detail that a viewer is unlikely to notice. However, in a situation where continuous color or text is used, JPEG’s compression scheme may quickly become evident, as the art if acts introduced into the image will appear heavy in the flat color and text regions. It is possible to avoid this issue by selectively compressing portions of the image using an image manipulation program such as Fireworks or Photoshop.

 

 

 

PNG

The Portable Network Graphics (PNG) format is an emerging format that has all of the features of GIF in addition to several other features. The compression algorithm for PNG is not proprietary compared to GIFs, which use LZW (owned by Unisys). Some designers have worried about the potential problems stemming from Unisys patent claims on LZW compression, but so far this has been a nonissue. PNG’s compression algorithm is also slightly better than GIF’s, as shown in Figure, but this alone is probably not much of a reason to give up GIF images given the browser compatibility problems that still plague the PNG format. PNG also supports slightly improved interlacing. PNG images break the 8-bit color barrier normally found in GIF images, but with the degree of compression available in PNGs today it would not make sense to favour PNG files over JPEGs, as shown here.

HTML Image Basics

To insert an image into a Web page, use an <img> tag and set its src attribute equal to the URL of the image. The form of the URL can be either an absolute URL or a relative URL. Most likely, the image element will use a relative URL to an image found locally. To insert a GIF image called logo.gif residing in the same directory as the current document, use

<img src=”logo.gif”>

Same as if you want  to add .jpg image in your web page , use

<img src=”logo.jpg”>

How To Add Images To Your Web Pages?

Lets take a good example

 

Source:

<html>

 

<head>

 

<title>My page title</title>

 

</head>

 

<body>

 

 

 

<img height=”125″ width=”125″ alt=”Flower” src=”flower.jpg” />

 

 

 

</body>

 

</html>

 

In browser:

 

In case, your picture extension is different from image, then image will not display.

For example:

<img height=”125″ width=”125″ alt=”Flower” src=”flower.png” />

 

Flower image is saved with .jpg but you are using .png

 

<img> tag with various attributes as follows:

1 ALIGN

Take values TOP or MIDDLE or BOTTOM, defining whether the top or middle or bottom of the graphic should be aligned with the baseline for the text line in which the IMG element appears.

 

2 BORDER

It specifies the size of the border (in pixels) around the image.

An image has no border by default.

3 HEIGHT and WIDTH

It specifies the height and width of the image  either in pixels or in percentage.

4 SRC (Source)

The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the <A> tag. SRC is mandatory.

 

5 ALT (Alternate text)

Optional alternative text as an alternative to the graphics for display in text-only environments. The alt text can contain entities e.g. for accented characters or special symbols, but it can’t contain markup.

6 ISMAP

An image map is a graphical map by which users can navigate transparently from one information resource to another. The ISMAP attribute identifies an image as an image map. The IMG element can then be used as part of the label for a hypertext link (see the anchor element). When the user clicks on the image the location clicked is sent to the server designated by the hypertext link.

For example:

<A HREF=”http://abc/bin/imagemap/sample”>

<IMG SRC=”sample.gif” ISMAP></A>

 

7 vspace

Sets the amount of white space (in pixels) to be inserted at the top and bottom margins of the image.

<img src=”img/picture.png” vspace=”10″ />

8  hspace

Sets the amount of white space (in pixels) to be inserted at the left and right margins of the image.

<img src=”img/picture.png” hspace=”20″ />

9  name

This attribute assigns a name to the element, that can be used to refer to it in scripts or style sheets.

<img name=”photo1″ src=”img/photo1.png” alt=”Mary and me” />

 

Supported image formats

The HTML standard doesn’t give a list of image format that must be supported, so each user agent supports a different set of formats. Gecko supports:

  • JPEG
  • GIF, including animated GIFs
  • PNG
  • APNG
  • SVG
  • BMP
  • BMP ICO
  • PNG ICO

 

 

 

Use of ALIGN TAG

You can align images according to the text around it, using the following alignments:

Attribute VALUE DESCRIPTION
Align Left  image in the left margin and wraps the text that follows the image.
Right image in the right margin and wraps the text that precedes the image.
Top top of the image with the surrounding text.
Texttop top of the image with the top of the tallest text in the line.
middle middle of the image with the surrounding text.
absmiddle image with the middle of the current line.
baseline image with the baseline of the current line.
Center center of the image with the surrounding text.
bottom bottom of the image with the surrounding text.
absbottom bottom of the image with the surrounding text.

 

 

Example:

 

<html>

 

<head>

 

<title>My page title</title>

 

</head>

 

<body>

<center>

 

<p>

<img height=”200″ width=”200″ alt=”Flower” src=”flower.jpg” align=”center” />

Aligns to the center

<br>

 

The flower of life symbol represents important meaning to many throughout history. The symbol can be found in manuscripts, temples and art throughout cultures around the world.

</p>

<hr>

<p>

<img height=”200″ width=”200″ alt=”Flower” src=”flower.jpg” align=”top” />

Aligns to the top

<br>

 

 

The flower of life symbol represents important meaning to many throughout history. The symbol can be found in manuscripts, temples and art throughout cultures around the world.

</p>

<hr>

<p>

<img height=”200″ width=”200″ alt=”Flower” src=”flower.jpg” align=”left” />

Aligns to the left

<br>

 

The flower of life symbol represents important meaning to many throughout history. The symbol can be found in manuscripts, temples and art throughout cultures around the world.

</p>

<hr>

 

<center>

 

</body>

 

</html>

 

 

In browser

 

 

USE OF BORDER TAG

ATTRIBUTE VALUE(in pixels) DESCRIPTION
Border 1 or 2 or else Show the border

 

 

Source code:

<html>

 

<head>

 

<title>border example</title>

 

</head>

 

<body>

<center>

<img src=”images.jpg” alt=”Example” border=”1″ height=”125″ width=”125″>

<hr>

<img src=”images.jpg” alt=”Example” border=”2″ height=”125″ width=”125″>

<hr>

<img src=”images.jpg” alt=”Example” border=”3″ height=”125″ width=”125″>

<hr>

<img src=”images.jpg” alt=”Example” border=”4″ height=”125″ width=”125″>

<hr>

 

</center>

</body>

 

</html>

 

In browser: