Images in HTML

Not only texts an HTML document is made. Images are excellent resources to enhance the layout and the look of a page or to exemplify and demonstrate something (it was for the old saying “a picture is worth a thousand words”). Before we talk about how to link an image to an HTML document, we need to know a little about the types of images.

Browsers have the ability to interpret images of “bitmap” type. In this type of image, the file that stores is organized as an array (or table) of points. Each point stores a specific coding color. The more colorful is an image, the greater is its size. The formats of images displayed on the web use a compression feature, ie, a technique to reduce their size. The most common are described below:

GIF (Graphics Interchange Format) – GIF format is commonly used to represent illustrations and its compaction due to the fact of storing a maximum of 258 colors. The GIF type can use transparent background and allows you to store in the same file, a sequence of images which, when displayed by the browser, produce the animation effect (animated GIF);
JPG or JPEG (Joint Picture Experts Group) – is the most common type of image on the internet and is usually the default of saving from most digital cameras and smartphones. A JPG image is reduced in size due to not store the dots (pixels) with the same or very similar colors. The higher the rate of compacting, the worse the image quality and lower will be its size;
PNG (Portable Network Graphics) – PNG is a newer format image. It offers the best of the two previous formats: representing millions of colors, transparency, and animation. Its development was motivated due to some patented features of the GIF format. Currently, it is a free format supported by the W3C.

An important detail in the use of images in HTML documents is that they are not “embedded” with the HTML file; they are only referenced by them. Because of this, when our site is growing and increasing the number of HTML files that start using images, we must consider that the files of these images need to be available, or need to be sent together with the HTML files to the server pages. By the time the browser detects the need to display an image, it asks the server page so that it is downloaded on the user’s computer (for this reason the images must have the smallest size possible).

To link a picture in an HTML document, we use the <img> tag. This is an independent tag, ie, it does not need another tag to close it. The most important parameter of the <img> tag is the src that specifies the path (URL) of the image to be displayed. Just as the <a> tag, the <img> tag can reference a local file or a resource available on another server. We will use two examples: In the first one, a referenced image from an external web server (http://scriptcase.com.br/logo.png), while at the second one, local files are used (existing in the same directory of the HTML file that is being processed by the browser) for example, “logo.png”:

In addition to the src attribute that specifies the origin (source) of the image, some other attributes are worth mentioning. The alt attribute (alternative text) specifies a text that can be displayed if a problem prevents the presentation of the image or that can be used by readers of pages that help visually impaired people surf the Internet (this is a typical example of accessibility) . In addition, the text of the alt attribute may be displayed when you position the mouse over the image.

The image size can be resized at the time of display. This option is enabled using the width and height attributes, whose values can be absolute integer values (expressed in pixels) or percentage values (considering the original image size). Optionally, you can add a border around the image, using the border attribute, whose values are integers that specify the border width in pixels.