Insert pictures with HTML - how it works

How to insert images with HTML - the basics

With the day can insert pictures.
The image source is given within the tag: inserts the file "testbild.webp" from the subfolder "pictures" on the website.
External sources via URL are also possible: integrates the CHIP logo from our servers.

Numerous attributes can be added within the img tag:

Use "width" and "height" to determine the size of the image on the website: The image is displayed square with a side length of 100 pixels.
With "alt" you define an alternative text that is displayed if the respective image cannot be loaded. You should always set this attribute when inserting images with HTML.
The "border" attribute specifies the thickness of the frame in pixels. A picture with has a frame that is relatively thick with five pixels.
Use "align" to align the graphic. Values for this attribute are "bottom", "top", "middle", "left", "right" and "center".
With "hspace" and "vspace" you can (horizontally and vertically) set a distance to the image.

There are various image formats that you can include in the HTML code.

JPG: JPG format images are most commonly used for web pages. This format represents 16.7 million colors. In addition, a JPG can be compressed very well. The image file can therefore be made very small, which enables a fast loading time.
PNG: The PNG format can also display 16.7 million colors and can be compressed. The advantage over the JPG format is that the compression is possible without losses.
Areas defined in PNG format can also be displayed transparently. However, very old browsers have problems displaying transparencies.
GIF: If you want to insert moving pictures with HTML, the GIF format is suitable. Only 256 colors are shown in this format and compression takes place automatically without any setting options.
The GIF format is most suitable for small, animated graphics or logos. To ensure that logos fit harmoniously into a page, transparencies can be used in GIF format like a PNG.