HTML Images

Image Tag

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

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 includes image tag since 4th version (HTML4) ie since 1997. Images not only enhance the look and feel of a website, they add information in the form of pictures. We can uses 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

Image is inserted in html using <img> tag. Img is an non-pair element. src and alt attributes are compulsory in an img tag. width and height are optional in img. By increasing width or height, image size increase with same aspect-ratio. Aspect Ratio is ratio of width Vs height. For an image of size 400*300, 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 ) comes with Retina Display. They have a resolution of 2560 * 1600 (QHD) but the viewport size is 1440 * 900 because the Device Pixel ratio or pixel density is 2. So technically we should use a double size image for these devices. The solution is 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">

Alt Attribute

alt attribute is the compulsory attribute for image tag. It helps google and other search engines to search images in search results. If in any case image fail to upload, alt text hold the space and tell user about image.

What happen if src is invalid in image?

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

Width and height Attributes

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

width and height also hold space of image when html text is loading from server and parsing. This works as a placeholder before image is loaded.

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

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