Managing images in HTML

December 2016

How do you display images on a web page?

Having a few images on a website can make it more attractive and user-friendly. However, it is important not to go overboard, since images can take a long time to load, and in some cases can make a document harder to read.

The IMG tag is used for inserting images in HTML pages. The image may be located on the same server as the page which it is inserted into, but it may also be one located on a different server, if the full URL is specified.

Only the following image formats have been accepted into W3C standards:

  • JPEG images (.JPG): Images with a large number of colors, which have been heavily compressed so as to be smaller in size, thus requiring less time to download.
  • PNG images: With a smaller file size when the image has a few solid colors. This format also allows for interlaced images (which are displayed piece by piece) with 24-bit colors and images for which one of the colors has been set as being transparent.
  • GIF image: They have most of the same advantages as PNG images, although the GIF format is limited to 256 colors and the format is not completely open.

How do you display images on a web page?

The main attributes of the IMG tag are:

  • SRC: Shows the path where the image is located (mandatory)
  • ALIGN: Specifies how the image is aligned in relation to the adjacent text. The possible values are TOP, MIDDLE, and BOTTOM.
  • ALT: Displays an alternate text if the image isn't displayed.
  • TITLE: Displays information when the cursor rolls over the image.
  • WIDTH: Specifies the width of the image.
  • HEIGHT: Specifies the height of the image.

So to insert an image, this is the sort of tag that should be used:

<IMG SRC="url_of_image"
ALT="Text replacing the image"
TITLE="Text to display">

Attribute Value Result Visual Effect
ALIGN bottom
center
left
middle
top
right
Image alignment.  
ALT   Alternate text shown if the image isn't displayed.  
BORDER Whole number (integer) Number of pixels in the image border. The color of the border may be defined by the LINK or TEXT attribute of the <BODY> tag. By default, the BORDER attribute is set to 1, which creates a small frame around the image. If you don't want that, you can set the value to 0.
HEIGHT Whole number (integer) Image height (in pixels or in %). When this attribute specifies a size different from the original height of the graphic, the browser automatically resizes it, which may reduce the displayed image's quality.
HSPACE Whole number (integer) Number of pixels to leave between the image and the adjacent text (horizontally). Text
LONGDESC   URL of the image's description.  
LOWSRC URL An alternate image (typically smaller) displayed while the real image is being loaded by the browser.
NAME   Sets the image's name. This attribute is mainly used for dealing with images in JavaScript.  
SRC URL The image's URL.  
TITLE   Alternate text shown if the image isn't displayed.  
USEMAP   URL or name of the anchor which defines the mapped image.  
VSPACE   Number of pixels to leave between the image and the adjacent text (vertically). Test text
WIDTH Whole number (integer) Image width (in pixels or in %). When this attribute specifies a size different from the original width of the graphic, the browser automatically resizes it, which may reduce the displayed image's quality.

Wrapping text around an image

Images are inserted in text the same way characters are, so it would seem impossible to make text wrap around an image.

However, there are actually several ways to do this. Let's look at two of them:

  • The first involves creating a table with one row and two columns, in which the image and text are placed.
  • The second (which is less precise) involves left-aligning or right-aligning the image with the ALIGN attribute, then typing the text. If you want to avoid having the text wrap around, use the CLEAR attribute.

Image maps

You can create different clickable areas within an image using the USEMAP attribute in conjunction with the MAP tag.
The USEMAP attribute of the <IMG> tag points to a <MAP> tag containing a description of the clickable areas that the map is divided into.

The <MAP> tag has a NAME attribute to define its name, and also declares which areas are clickable by using the AREA tags.

Tag Attribute Value Visual Effect
MAP NAME    
AREA SHAPE RECT

 

CIRCLE

 

POLY

Rectangle (its coordinates are:
"x-axis start point, y-axis start point,
x-axis start point, y-axis start point")

Circle (its coordinates are:
"x-axis of center, y-axis of center, radius")

Polygon (its coordinates are:
"list of its coordinates, separated by commas
")

HREF URL Link to URL
COORDS "XX,XX,XX,XX" Contains the coordinates of the clickable area, separated by commas.

Below is an example of an image map:

<IMG SRC="images/image.gif"
	WIDTH=150
	HEIGHT=70
	USEMAP="#Map">
<MAP NAME="Map">
	<AREA SHAPE="rect"
		   HREF="start.html"
		   COORDS="0,0,48,28">

	<AREA SHAPE="circle"
		   HREF="previous.html"
		   COORDS="50,30,10">

	<AREA SHAPE="poly"
		   HREF="next.html"
		   COORDS="60,50,80,30,100,40,50,100">
</MAP>

Related :


Administración de imágenes en HTML
Administración de imágenes en HTML
Images en HTML
Images en HTML
Gestione delle immagini in HTML
Gestione delle immagini in HTML
Gestão das imagens em HTML
Gestão das imagens em HTML
API
API
This document entitled « Managing images in HTML » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.