HTML Basics: How to Add an Image in HTML

Insert Images into HTML Using the IMG Tag

The <img …> tag is used to display an image on the web page. Use the following code to insert images in HTML.

<img src="URL" width="WIDTH" height="HEIGHT" alt="Image Description">

From a technical point of view, images are not inserted into a web page, but rather linked to the page. The HTML img tag creates a holding space for the referenced image.

img is an empty Inline Element aka Standalone tag, just like br. This means that it contains only attributes. A closing tag is not used in HTML.

The HTML img tag has the following attributes, to name the most important ones:

src contains the url of the image file, which can be specified with either a relative or absolute path. This attribute is required.

Note: Linking via an absolute URL is not recommended. If possible, you should host the images you want to use on your web page.

In addition, it is more efficient to use relative URLs from a maintenance point of view.
The alt attribute is an alternative description of the image that is displayed if the image is not yet loaded, cannot be loaded, or if the browser is unable to display the image (e.g., a screen reader).

The alt text should should describe the message of the image.

The img tag works fine without the alt attribute, but it is always a good idea to specify it. If no meaningful description can be given, an empty alt attribute (alt="") should be used.
The border attribute is used to specify the width of the border around the image. It defines the thickness of the border in pixels and is specified without a unit.

Note: The border attribute is no longer supported in HTML5. Use CSS instead.
width is an optional attribute used to specify the width of an image in pixels or percent
height is an optional attribute used to specify the height of an image in pixels or percent.

The values for border, width und height are specified as integer without any unit. The values represent a length in pixels

The width and height attributes for an image should always be specified. This allows the browser to reserve the required space for the image when loading the page.

If these attributes are not specified, the text jumps down to the bottom when the images are loaded. Moving the text in this way is extremely annoying for users, especially if they have already begun reading.

Advice:
Always try to insert the image with its width and height, otherwise the image may flicker when it is displayed.

Adding a Link to an Image

HTML tags can be nested. You can get a clickable image when you combine the A tag with an img tag (<img>). You only have to replace the link text with an IMG tag.

Example

General structure of an HTML tag for an image with a link.

Note: The width and height attributes are specified without unit.

<a href="link target"><img src="Image URL" width="Width in pixel" height="Height in pixel" alt="Image Message">

What are the Best Image Formats for Your HTML Page?

Images, graphics and photos are essential components of any web page. Because the loading speed of the page is very important for Search Engine Optimization, choosing the right image format and image compression is especially important. If the file size of the images is too large in terms of KB, it will have a negative impact on the loading time. A long loading time will also have a negative impact on the ranking of the web page in search engines.

As a general rule, a web page should load within 2 seconds to ensure acceptable usability. A loading time of up to 1 second is excellent. In general, the shorter the time it takes to load a page, the better the user experience.

The Best Graphic Formats for Web Pages

.gif
GIF (Graphics Interchange Format) was the most common image format for logos and simple animations. However, due to the patents held by Unisys and IBM on the LZW algorithm used in GIF files, GIF is now practically obsolete.

Although GIF doesn't face any specific patent issues (the patents that targeted GIF are no longer valid), the PNG and APNG image formats are preferred.

The GIF format has an 8-bit color depth, so it only supports a maximum of 256 colors.

.png
The PNG (Portable Network Graphics) image format has almost completely replaced the formerly frequently used GIF format. PNG has 24-bit color depth, so it supports more than 16 million colors.

PNG not only supports full transparency like GIF, but also partial transparency. GIF is not the only image format for creating animated images. The APNG (Animated Portable Network Graphics) format is a free image format for animations that has similar options for animations as GIF. APNG even has a significantly better quality of the generated image sequence.

However, better animation quality also means a larger file size. But APNG has a better compression method than GIF. APNG has up to 25% better compression than a similar GIF file. This means that the better quality of APNG can be used in almost any case.

.apng
APNG is not an official upgrade of PNG, but APNG is backward compatible with PNG. The APNG Assembler from Mozilla is a powerful alternative to GIF. The MIT and zlib licensed software can be downloaded for free from the official project page. Download from sourceforge.net: APNG Assembler

This allows you to create your own PNG animations free of charge on any platform. To create your own APNGs, you will of course need suitable images in PNG format. All major browsers such as Firefox, Google Chrome, Microsoft Edge, Safari, Opera including their mobile versions support the APNG format.

.jpg / .jpeg
JPG or more correctly JPEG (Joint Photographic Experts Group) is probably the best-known image format. Almost all common programs for image editing or image processing can open, display and convert JPG files.

The JPEG format is free of third-party rights (e.g. patent rights). The compression methods used are free to use for everyone.

Due to its wide color spectrum of up to 16 million colors, JPG is particularly suitable for photos and complex image files with different color depths. The biggest advantage of JPG is the variable compression rate. JPG files can be significantly reduced in size. However, compression is always associated with a loss of quality.

Smaller files have the advantage of using less disk space and not slowing down the loading speed of the web page.

To avoid the annoying effect of pixelation, a compromise should always be made between quality and file size.

.webp
WebP is an image format for static and animated images that was developed by Google in 2010. In contrast to the established image formats JPG and PNG, the WebP graphics format can be used to create images of smaller file size. This has a positive impact on the loading speed of the web page.

The free open source file format WebP allows both lossy and lossless compression. With WebP, images can be saved in high quality with smaller file size. However, an image in the WebP graphics format does not have in any case a smaller file size than the same image in PNG format.

Since WebP is license-free, the format has already been integrated into many applications (sometimes called as apps). Images in WebP format are displayed by each major web browser, including its mobile version. Images in WebP format can be edited with a photo editor such as PhotoShop or GIMP.