Images
 

Images

An HTML document can include images or graphics, not only as background of the document (with the attribute bg image in the tag <body>) or in parts of it, if not inside the body of the document.

Image types

Nowadays there are many types of images in the internet, basically there are two types used: JPEG and GIF.

1. JPEG

Images in the JPEG format (Joint Photographers Experts Group) with the extension .jpg are images in real colour (colours RGB of 24 bits) compressed by means of a mathematic algorithm. It is used when the image has a large number of colours (mainly photographs), to spare the quality of the image and its colours in its size to be fixed. They can be compressed to diminish its size considering that the the compression reduces the quality.

Advantages:
  • Supports millions of colours with a relatively small size.
  • Extensively support of all browsers an platforms
Disadvantages:
  • Doesn't support transparencies
This format is recommended for photographs with many colours and details.

2. GIF

With GIF format (Graphics Interchange Format), the images only are shown in 256 colours (8 bits), which doesn't allow to show images with highly tinged colours. They are highly approved for their small size. One of the 256 colours can be chosen to make it transparent, the browser won't show this colour in the document, having it in his background.
The GIF format allows to create animations through sequential photograms.

Advantages:
  • Enlarges the compatibility in the browsers
  • The transperency can be very useful, if knowing how to use it
  • The compression creates very small sized images
Disadvantages:
  • Limit of only 256 colours (shadings and photographs can't be shown well)
GIF is indicaded to use for non-photographic images such as: logotypes, plain colour images, drawings, etc.



Pieces of advide when inserting images

  • To insert an image that shall be shown on full screen, we have to consider its mesures so it won't be bigger than the screen of the computer. Like this we would have to move the screen to see the entire image (scroll).
    If you want to be able to print the image, its considered to link the image with higher definition (larger size) in another place from were it's possible to download it.
  • If you want a quick web page that doesn't need much time to open, it is important that the images in it aren't too large because it would augment the loading time. (Jakob Nielsen's Website)


     

To learn more about images, click on interactive images and animated GIF's.