How to insert photos or drawings in a web page.
The graphic formats
Photos and drawings can be saved in many formats
. The most common are:
- JPG (.JPG or .JPEG extension)
- JPEG is the most used for photographic images.
JPEG can use up to 16.7 million colors.
It is a "lossy compression" format:
this means that JPEG reduces both file size and picture quality.
- GIF (.GIF extension)
- GIF is a "lossless compressed" image format that can use 256 colors.
GIF files have a compact size and good quality.
This format is used for images that have
small size and few colors, as icons, banners, logos.
- PNG (.PNG extension)
- PNG is a general purpose "compressed" and "lossless" format (as GIF) that can
use 16.7 million color (as JPEG).
It can be used as well for photo, icons and logos.
- BMP (.BMP extension)
- BMP ("bitmap") files can render an image with 2, 16, 256, 65536, or 16.7 million
The bitmap format is not compressed: it doesn't reduce the image quality, but makes the
file size larger.
Next page :
The image tag
To display a drawing or a photo, use the image tag
. This tag states at least:
- the file path (the address of the folder where is the image) and the
name of the image:
- the short description of the image (usually one word or two).
It looks, for example, this way:
<IMG SRC="images/balloons.jpg" ALT="Coloured balloons">
Resize the image
You can resize
the image, specifying another width
If you specify a different width and height at the same time, verify that their proportion
is the same;
otherwise, the image will twist
<IMG SRC="images/balloons.jpg" WIDTH="100" ALT="Four balloons">
<IMG SRC="images/balloons.jpg" HEIGHT="50" ALT="Four little balloons">
<IMG SRC="images/balloons.jpg" WIDTH="150" HEIGHT="50" ALT="Oops!">
how to use links