HTML Images

Image Tag

Imagine a website without images? For example, the World's First Website. Images not only improve the look and feel of a website, but also convey information in the form of graphics. We usually forget text but visuals are stored deeply in our brains.

HTML Images are defined within <img> tag. Image tag is an void tag. src and alt attributes are compulsory to add path of image and alternative text.

HTML has included the image tag since the 4th version (HTML4), i.e., since 1997. Images not only enhance the look and feel of a website, but also add information in the form of pictures. We can use images as a logo, banner, icons, symbols, product etc.

Image Tag Code

    <img src="" alt="">

HTML Images Formats and Comparison

Html supports many popular images extensions, i.e jpg, png, gif, svg and webp. Here is a comparison between jpg, png, gif, svg and webp.

How to insert image in a webpage

You can insert an image in HTML using the tag. src and alt attributes are compulsory in an img tag. width and height are optional in img. By increasing width or height, the image size increases while maintaining the same aspect ratio. The aspect ratio is the ratio of width to height. For an image of size 400*300, the aspect ratio is 4:3.

HTML image tag example

  
<img src="logo.png" alt="alternate text of image" >
		

Image Attributes

src attribute

src attribute is the source or path of image. We can use both relative or absolute path in images. Make sure the path is valid. For invalid path, browser console will show an error.

  <img src="img/logo.png" alt="">

    <img src="https://www.techaltum.com/img/logo.png" alt="">
  

srcset

srcset attribute in image is an optional tag recommended for high resolution and pixel density devices.

For Example, all MacBooks (2020 onwards) come with Retina Display. They have a resolution of 2560 * 1600 (QHD) but the viewport size is 1440 * 900 because the device pixel ratio (DPR) or pixel density is 2. So technically we should use a double size image for these devices. The solution is the srcset attribute.

srcset example

<img src="img/logo.png" alt="" srcset="img/logo-retina.png 2x" width="200" height="150">

srcset with multiple values

<img src="img/logo.png" alt="" srcset="img/logo-retina.png 2x, img/logo-retina-lg.png 3x" width="200" height="150">

Picture Element for Responsive Images

The <picture> element allows you to define multiple sources for an image, enabling the browser to choose the most appropriate one based on device capabilities, viewport size, or media queries. This is ideal for responsive design and serving different formats like WebP or AVIF with fallbacks.

Picture element example

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Responsive image">
</picture>

In this example, the browser will try AVIF first, then WebP, and fall back to JPG if neither is supported.

Alt Attribute

alt attribute is the compulsory attribute for image tag. It helps Google and other search engines to index images in search results. If the image fails to load, the alt text holds the space and informs the user about the image.

What happens if the src is invalid?

    <img src="img/logo" alt="Tech Altum Logo">

Width and height attributes

width and height attributes are used to set the preferred size, i.e., width and height of the image. By default, an image will display at its actual size. We can also reduce or increase the size of the actual image.

width and height also reserve space for the image while the HTML is loading and parsing. This acts as a placeholder before the image is loaded.

  <img src="img/logo.png" alt="" width="150" height="100">

    <img src="img/logo.png" alt="" width="300" height="200">
  

Loading attribute

The loading attribute was introduced in HTML5 2022. Eager is the default value. Lazy loading instructs the browser to load images below the viewport with reduced priority, thereby enhancing page performance. This is supported in Chrome 76+, Edge, Opera, and Firefox.

Loading attribute values

1. eager
2. lazy

<img src="img/logo.png" alt="tech altum logo" width="300" height="200" loading="lazy">
  

Best Practices for HTML Images

• Always use descriptive alt text for accessibility and SEO.
• Optimize images for web: compress, use appropriate formats (WebP, AVIF for modern browsers).
• Use width and height attributes to prevent layout shift.
• Implement lazy loading for images below the fold.
• Use srcset or the picture element for responsive images.
• Avoid hotlinking images from other sites.
• Consider image CDNs for faster delivery.