HTML and Images

Images are one of the basic building blocks of a web page. The Image element <IMG> is used to insert images in an HTML file. Several attributes control the display and alignment of images.

Design Considerations

Design Principles: Images should be integrated into the overall design of the web site. Consider basic design principles when adding images to a page. Images should add to the content of a page rather than detract from it; they should add to the visual unity rather than distract.

Usability: The effective use of images requires an understanding of and proper use of web technologies. Appropriate file types, file size and download time, site organization and naming conventions are important considerations when using images.

Color: Color is one of the basic elements of design and an important aspect of web page design. It is critical to understand the basic concepts (e.g. color systems, web safe colors) and terms (e.g. RGB, hexidecimal) of color to effectively create web pages.

The IMG element

The Image element <IMG> places an external image in the document. It does not require a closing tag. These are also called inline images since are part of the flow of the page content. The SRC attribute (Source) is required; it specifies the pathname of the image file.

<IMG SRC="images/balloon.gif" >

IMG Attributes

IMG Display Atributes: control the display of the image

<IMG SRC="images/balloon.gif" width="200" height="200" alt="balloon detail" border="0">

SRC="image_url"

the name of the image file (URL including file extension)

WIDTH="pixels"

the width of the displayed image in pixels (should be same as actual image resolution)

HEIGHT="pixels"

the width of the displayed image in pixels (should be same as actual image resolution)

ALT="short description"

alternative text display (displays if image doesn't display and as tooltip)

BORDER="number"

border width in pixels (try 0 to avoid ugly border)

LOWSRC="image_url"

image that will download before image specified by SRC (should be smaller file)

IMG Alignment Atributes: control the position of the image in relation to flow of text, VSPACE and HSPACE work in conjunction with ALIGN. The ALIGN attribute also causes text to wrap around image.

<IMG SRC="images/balloon.gif" align="right" hspace="10">

ALIGN="top"

align text with top of image

ALIGN="middle"

align text with middle of image

ALIGN="bottom"

align text with bottom of image

ALIGN="left"

align image to the left of text

ALIGN="right"

align image to the right of text

HSPACE="pixels"

amount of space to the left and right of image

VSPACE="pixels"

amount of space to the top and bottom of image

To prevent text from wrapping around an aligned image use the <BR> tag with clear attribute:

<BR clear="all">

Graphic File Formats

The two most common web graphic file formats are JPEG and GIF. Working with web graphics requires a basic understanding of file formats and their properties.

• Originally developed to transmit high quality photos digitally
• Support 24 bit RGB color images (millions of colors)
• JPEG compression is lossy (information is lost with compression)
• Supports several levels of compression (greater compression = smaller file size + greater degradation in quality)
• Progressive JPEGs display in a series of passes
• In general, JPEG files should be used for photographs, continuous tone and other complex images

Optimizing JPEGs

JPEG file size tied to complexity of images

Find balance between amount of compression and image quality

Smoothing out images (reducing areas of strong contrast and detail in original image) results in smaller compressed file, for example applying Gaussian Blur can smooth out an image

GIF files: Graphics Interchange Format

• Originally developed by CompuServe
• Support 8 bit RGB color images (maximum of 256 colors)
• Interlaced GIFS display in several passes
• Support simple transparency
• Capable of animation (simple sequence of images)
• GIF compression is lossless (compressed image is identical to original)
• In general, GIF files should be used for flat color graphics and images with large areas of same color

Optimizing GIFs

GIF files compress horizontally (consistent color across row results in smaller file size) for example, vertical gradients compress better than horizontal

Antialiased text requires more colors than aliased text

Portable Network Graphics (PNG)

High quality lossless compression (usually smaller than GIF), graduated transparency, can be interlaced, any number of bits per pixel (8, 16 or 24), not fully supported by browsers

Scalable Vector Graphics (SVG)

Vector (line) format, supports animation, open-source (unlike proprietary Flash), requires plug-in