HTML Images

Most webpages now a days contain images in one form or another. 

Images in HTML can enhance the design and appearance of a web page.

How to Add

The HTML <img> tag is utilized to link an image into a web page.

Images are not physically inserted into a web page; rather, they are linked to web pages. 

The <img> tag is a self-closing tag, which contains only attributes and there is no closing tag.

The <img> tag requires two attributes:

• src: Specifies the path to the image
• alt: Specifies alternative text for the image

The HTML code to link an image to a web page via an <img> tag is:

<img src="url" alt="Alternate Text"> 

The src Attribute

The src attribute is required and specifies the path (URL) to the image.

It can be an absolute URL or a relative path. If the image could not be loaded due to any reason, visitors will see a broken link icon. In this case, the broken link icon and the alternative text are displayed.

The alt Attribute

The alt attribute is required and provides alternative text for an image. This text is displayed if the image cannot be viewed due to any reason, such as a missing file, wrong link, or if the user is using a screen reader.

The value of the alt attribute should describe the content or purpose of the image.

So, the required complete code to embed an image will be:

<img src="image.png" alt="An Image"> 

Image Size - Width and Height

The style attribute can be used to define the width and height of an image in pixels or in percentage.

<img src="image.png" alt="An Image" style="width:480;height:270px;"> 

Alternatively, you can specify the width and height of an image using the width and height attributes.

<img src="image.png" alt="An Image" width="355" height="200"> 

In case of style attribute you need to define the size with px or % text, while the width and height attributes specify the dimensions of an image in pixels without px text.

It is highly recommended to specify width and height of an image for performance optimization and SEO.

Which Attribute to Use??

The width, height, and style attributes are all valid in HTML.

But, it is recommended to use the style attribute to avoid conflict between the CSS and width, height attributes.

Absolute vs Relative URLs

If your images are stored on the same server and are accessible from the same domain as the webpage, it is recommended to use relative URLs, for example:

<img src="/images/image.png" alt="Internal Image"> 

To link to an image on another server, you need to use an absolute (full) URL in the src attribute.

<img src="https://www.webmastermaze.com/images/image.png" alt="WebmasterMaze"> 

Animated Images

You can use animated images in HTML. An animated image has a gif extension:

<img src="animated.gif" alt="Animated Image"> 

Image Floating

You can use the CSS float property to position an image to the left or Right of the text.

<img src="image.png" alt="Left floating image" style="float:left;">

<img src="image.png" alt="Right floating image" style="float:right;">

Common Image Formats

The most common image file types used in webpages are:

• APNG - Animated Portable Network Graphics (.apng)
• GIF - Graphics Interchange Format (.gif)
• HEIC - High Efficiency Image File Format (.heif, .heifs.heic, .heics.avci, .avcs.HIF)
• ICO - Microsoft Icon (.ico)
• JPEG - Joint Photographic Expert Group image (.jpg, .jpeg, .jfif, .pjpeg, .pjp)
• PNG - Portable Network Graphics (.png)
• SVG - Scalable Vector Graphics (.svg)

Please check below options for the links to our previous or next tutorial.