1. <img> tag

The <img> element represents the image and its fallback content, which is added using the alt attribute. Since the <img> element is a lowercase element, it is recommended that you place it inside a block element, for example, <p> or <div>.

Image url

The image address can be specified in full (absolute URL), for example:
url (http://anysite.ru/images/anyphoto.png)

Or through the relative path from the document or the root directory of the site:
url (../ images / anyphoto.png) - relative path from the document,
url (/images/anyphoto.png) - relative path from the root directory.

This is interpreted as follows:
../ - means to go up one level, to the root directory,
images / - go to the folder with images,
anyphoto.png - points to an image file.

image size

Without specifying image sizes, the image is displayed on the page in real size. You can edit the image dimensions using the width and height attributes. If only one of the attributes is specified, the second will be calculated automatically to preserve the proportions of the picture.

Image file formats

 JPEG format (Joint Photographic Experts Group). JPEG images are ideal for photographs; they can contain millions of different colors. Compresses images better than GIFs, but text and large areas with solid color may stain.

GIF format (Graphics Interchange Format). Ideal for compressing images in which there are areas with solid color, such as logos. GIF files allow you to set one of the colors transparent, so that the background of the web page can appear through part of the image. GIFs can also include simple animations. GIF images contain only 256 shades, which is why the images look blotchy and unrealistic in color, like posters.

PNG format (Portable Network Graphics). Includes the best features of GIF and JPEG formats. It contains 256 colors and makes it possible to make one of the colors transparent, while compressing images to a smaller size than a GIF file.

APNG format (Animated Portable Network Graphics). PNG based image format. Allows you to store animations, and also supports transparency.

SVG format (Scalable Vector Graphics). An SVG drawing consists of a set of geometric shapes described in XML format: line, ellipse, polygon, etc. Both static and animated graphics are supported. The set of functions includes various transformations, alpha masks, filter effects, the ability to use templates. SVG images can be resized without loss of quality.

BMP format (Bitmap Picture). It is an uncompressed (original) raster image, the template of which is a rectangular grid of pixels. A bitmap file consists of a header, a palette, and graphic data. The header stores information about the graphic image and file (pixel depth, height, width and number of colors). The palette is specified only in those Bitmap files that contain palette images (8 or less bits) and consist of no more than 256 elements. The graphic data represents the picture itself. The color depth in this format can be 1, 2, 4, 8, 16, 24, 32, 48 bits per pixel.

ICO format (Windows icon). The format for storing file icons in Microsoft Windows. Also, the Windows icon is used as an icon on sites on the Internet. It is a picture of this format that is displayed next to the site address or a bookmark in the browser. One ICO file contains one or more icons, the size and color of each of which is set separately. The size of the icon can be any, but the most common square icons with sides of 16, 32 and 48 pixels.

2. <map> tag

The <map> tag is used to represent a graphic image in the form of a map with active areas. Active areas are determined by changing the appearance of the mouse cursor on hover. By clicking on active areas, the user can navigate to related documents.

3. <area> tag

The <area> tag describes only one active area in a client-side image map. The item does not have an end tag. If one active area overlaps another, then the first link from the list of areas will be implemented.