Insert images with HTML - here's how

You can insert an image with HTML in just a few steps using the img tag. You can use attributes to customize how the image appears on the website.

How to Insert Images Using HTML – The Basics

With the tag you can insert images using HTML code.

The image source is specified within the tag: inserts the file “testbild.jpg” from the subfolder “bilder” on the website.
External sources via URL are also possible: embeds, for example, the CHIP logo from our servers.

Numerous attributes can be added within the img tag:

width=”X”: This is the width of the image in pixels. This is important so that your browser provides a placeholder while the image has not yet loaded.
height=”Y”: Use this attribute to specify the height of the image. This also allows the browser to use a placeholder if the image has not yet been transferred.
hspace=”X”: Specifies the horizontal distance to the left and right of the image from other page elements.
vspace=”Y”: Specifies the vertical distance at the top and bottom of the image in pixels.
border=”Z”: This adds a border around the image. The higher the number of pixels you specify, the thicker the border will be.
alt=”EXPLANATION OF THE IMAGE”: The alternative text is displayed if the respective image cannot be loaded. But the alternative text is also important for visually impaired people, as well as for the search engines, which also index the text.
title=”TOOLTIP FOR MOUSE TOUCH”: This sets the text that should appear when the user hovers over the image.
align=”TOP/BOTTOM/RIGHT/MIDDLE/CENTER/LEFT”: You can use this command to easily align the image. The attributes “bottom”, “top”, “right”, “middle”, “center” and “left” are allowed.

An example of HTML code is: CHIP-Logo

This will integrate the CHIP logo from our website.
It is displayed with a height of 100 pixels and a width of 200 pixels.
If it cannot be loaded, “CHIP logo” is displayed as blank text.
The image is surrounded by a two pixel wide frame.
It is aligned to the right and has a distance of 50 pixels from other page elements.

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

JPG: The most common images used for pages on the Internet are in JPG format. This format can display 16.7 million colors. JPGs can also be compressed very easily. This means you can make the image file very small, which allows for a quick 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 compression is possible without any loss.
In addition, defined areas in the PNG format can be displayed transparently. However, very old browsers have problems displaying transparencies.
GIF: If you want to insert moving images using HTML, the GIF format is suitable. This format only displays 256 colors and compression occurs automatically without any setting options.
The GIF format is best suited for small, animated graphics or logos. To ensure that logos fit harmoniously into a page, transparencies can be used in the GIF format, just like with a PNG.
Another advantage of a GIF is that it builds up gradually. This means that the loading time doesn't seem so long to the viewer. The image is blurry at first, but is already recognizable.