Can we put GIFs in HTML

Now it's getting even more colorful - images in HTML
























This chapter starts again a bit dry with the various web-compatible graphic formats. But don't worry, it's not that complicated, and it is also very useful to know which format is particularly suitable for which purposes, so that your own homepage is particularly beautiful and does not require long loading times.

Topics in this chapter:

  1. Graphic formats
  2. How does the picture get on the page?
  3. Image tag parameters
  4. Use of images
    1. Pictures in general
    2. Images as dividing lines
    3. "inline pictures"
    4. Background images
  5. And where do I get pictures from?
  6. Questions and tasks

1. Graphic formats

There are three graphic formats used on the web: GIF, JPEG, and PNG, although the latter has not yet become widely accepted. GIF and JPEG are the most common formats, and both have strengths and weaknesses.

The GIF format

GIF stands for Graphics Interchange Format and was specially developed by Compuserve for the Internet. GIF offers the following advantages:

  • The compression is lossless, i.e. the quality does not deteriorate through the compression
  • You can define a color as transparent, creating a transparent background that will make the image look good on different window backgrounds. For example, a picture with a gray background might not look nice in a window with a white background.
  • GIFs can be animated
A major disadvantage of the GIF format is the fact that a maximum of 256 colors can be saved per image, which makes it not so suitable for high-resolution graphics such as photos or background images.
But GIFs can be used for buttons, dividers, bullets and the like.

The JPEG format

JPEG or JPG stands for Joint Photographic Experts Group, which developed this format. The disadvantage of this format is that the quality of the graphic deteriorates the more it is compressed, but up to 16.7 million colors can be saved.
The JPEG format works well for scanned photos and similar images that look better with more than 256 colors.

The PNG format

PNG stands for Portable Network Graphics. It is the latest web-compatible graphic format and combines the advantages of GIF and JPEG: It offers lossless compression of 16.7 million colors, offers transparent background colors like GIF, and additional information such as copyright information can be saved with the image.

Programs for converting graphics

Appropriate software is required to convert from one graphic format to another. Microsoft Paint (installed as standard with Windows) knows the formats BMP, GIF and JPEG, to convert the file simply needs to be saved in the desired format.
Other programs do the conversion better, and for a few you should find links to download here:



So now we already know more about which image formats are suitable for what. All that remains to be clarified is how the image (in a format appropriate for it) is put on the page and where images can be used at all.

2. How does the picture get on the page?

All images on an HTML page (except for the background image) are inserted with the same tag, the image tag, whereby the image file has its full name, i.e. with the ending ".gif", ".jpeg" / ". Jpg" or " .png "must be specified.
If the image is in the same folder as the HTML document in which it is to appear, then it is sufficient to insert the name of the image file as shown above. This will be the case with most private homepages, because the amount of data there usually remains manageable and there is no need to create a more complex directory structure.
If the image and the HTML document are in different folders, a link must be made to the image (see also the corresponding section in the References chapter). For this it is necessary to be clear how the different folders are related to each other and to write down the structure e.g. in a directory tree.

In the following statement means:
File folder = Folder in which the HTML file that should contain the image is located
Image folder = Folder in which the picture is located

Example:

1) The image folder is subordinate to the file folder:
Example: In the file "index.html" (this is how the start page is usually called), which is located in the "Homepage folder" (= file folder), the picture "ich.jpg" from the folder "Pictures" (= picture folder ) can be inserted. In the directory tree we can see that the folder "Pictures" corresponds to the "Homepage folder" subordinate is. In order to link to the image, we have to go down one level, the corresponding image tag would be:
. If the picture were several folders under the folder with the file, they would all have to be named in their order, e.g. "Directory1 / Directory2 / Pictures / picture file.gif".

2) The picture folder is not subordinate to the file folder: The picture "ich.jpg" from the folder "Pictures" (= picture folder) should now be inserted into the file "ich.html" in the folder "About me" (= file folder). From the directory tree we can see that the two folders on the same level because both are in the "Homepage folder" folder. In order to link to the picture, we have to go one level up (to the "Homepage folder") and from there to the picture folder ("Pictures"). In this case, the image tag would be:
, where "../" means "one folder up" and, if necessary, several times in a row is possible.

3) The picture is somewhere on the internet:
It is also possible to link to images from other websites, to borrow the images, so to speak. To do this, however, you need to know the exact location where the image will be saved, and you should ask permission from the owner of the site beforehand.
The image tag for an image from this course, e.g. for the image based on the RGB principle at the beginning of the "Colors" chapter, is then:
, so the exact internet address must be given.



3. Image tag parameters

Further information can be made in the image tag, e.g. definition of the width and height of the image, the distance between the image and the text, etc. These are inserted behind and should now be briefly introduced and explained.

  • : A short text is inserted here which is displayed if the mouse remains on the picture for a longer period of time or if the picture is not loaded or cannot be loaded, e.g. because the user cannot or does not want to see any pictures (text-based browser) or (pictures can be switched off in favor of faster loading times) or if the image is not available for some inexplicable reason.
    The alternative text is particularly important if the image is a link, because people with text-based browsers in particular would otherwise have no chance of recognizing what is behind the link.
  • and are used to determine the height ("height") and width ("width") of the image. Since the proportions of the image are retained by the browser, an indication is sufficient here (either height or width).
    As is already known from the dividing line, the height and width can either be specified in absolute terms in pixels (e.g., or in percent of the browser window (e.g..
  • causes the left-justified / right-justified / centered alignment of the image in the browser window (standard is left-justified).
  • : This attribute gives the picture a frame x pixel wide (black in Internet Explorer).
    The frame around an image that represents a link can be removed with.
  • ("horizontal space") defines the distance (in pixels) that an image should have above and below the text.
  • ("vertical space") defines the distance (in pixels) that an image should have to the right and left of the text.



4. Use of Images

There are several ways to use images in HTML documents. Some of the most common applications are presented here, others such as "Pictures as references" or "Pictures as bullets" will be discussed in the corresponding chapters (references and lists).
The possible uses that are of interest to us at this point in the course are as follows:

  1. Pictures in general
  2. Images as dividing lines
  3. Images as "inline pictures"
  4. Background images

A. Pictures in general

Unless otherwise specified, images are displayed on the left edge of the browser window. The text is initially to the right of it and, if necessary, is continued under the image; the distances between text and image can be set with and.
If you do not want any text to appear next to the image, the image tag must be within a paragraph:

"Blind tables" (tables without a frame) are an elegant means that offers more options for arranging text and images. For more information, see the Tables chapter.

B. Images as dividing lines

A common use of images is as a dividing line instead of a horizontal line (


). As for all other images, the image tag is used for this, in which the name of the file containing the line image is inserted. A paragraph tag is written before and after the dividing line so that there is a free line before and after the dividing line. So the overall code is (with "linie.gif" as the desired image file):

It will look like that:

Without paragraph tags, the following happens:
The picture is built in in the middle of the text, you get a so-called inline picture.

C. Inline pictures

Small pictures can be inserted in the middle of the text, they are then called "inline pictures". The image tag is simply written into the current text.
An example:

becomes: Count these stars and you can win !!!

D. Background images

Background images are very popular for embellishing HTML pages. A small image is sufficient for the entire area because the browser "tiles" the entire background with it, i.e. it reproduces the image and puts it next to one another in all directions until the entire background is covered.
Background images are not programmed with the image tag, but with an attribute in the body tag:

In the case of dark background images and correspondingly light text, you should always define a similar color as the background color if the image - for whatever reason - is not loaded. By default, the background color is white or gray, and light text on a light background reads very poorly.
In addition, flashy background images should be avoided, as they will keep the reader of the page away from the essentials (unless the background image is the essential ..)



5. And where do I get pictures from?

You can get pictures in different ways: you have a scanner yourself and can scan it or your best friend or the nice neighbor etc. has a scanner. Or you paint them yourself, which is not entirely satisfactory with paint or the like.
For all those who do not have a scanner and cannot or do not want to create computer graphics or who simply want to put a few nice icons and buttons on the homepage, there is also the option of downloading images and image archives with web-compatible images from the Internet, e.g. the following Addresses:
University of North Carolina at Greensboro
Realm Graphics
Other addresses can be found with the help of search engines.

We have also put together a small collection of images and backgrounds: Images (download), ZIP file, approx. 130 KB



Questions and tasks

  1. Which web-compatible graphic formats do you know? Which one would you use for scanned photos, which one for buttons?
  2. What is the parameter in the image tag for?
  3. How does a document get a background image?
  4. Design a small homepage with information about you (hobbies, favorite poems, etc.) and design it with pictures (see the previous section for pictures to download).

A few final words ...

Even if a page with lots of beautiful, colorful pictures may look great, you should make sure that it is not too large overall - ideally, the size should not exceed 30 K, in a pinch (but only then) it can also be 50 K (including all pictures, of course). After all, not everyone sits on the fiber optic network of universities, where the transmission rates are sometimes 10 times what you can achieve at home with a fast modem.
You don't have to do without images, however, and there are definitely ways to reduce the loading time, e.g. by reusing images on different pages (they remain in the working memory and therefore only have to be loaded once) or by making slight cuts in the Quality of the pictures (a resolution of 72 dpi is sufficient for photos so that the picture is still clearly recognizable).

So, we already know a lot of HTML for our first own homepage, but there are still some things to learn: On the one hand, a little more order on the page might be nice (how this can be done is in the Lists chapter), and In addition, the important topic of references is still missing, because after all we cannot withhold our great collection of links from visitors to our site, can we?