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.

Extension Full Form Type Use
jpg Joint Photographic Expert Group Raster banner, background, product images without transparency
png Portable Network Graphics Raster pictures with transparency
gif Graphic Interchange format Raster animated picture with motions
svg scalar vector graphics Vector logos, icons, animations.
webp Web Picture Raster jpg and png replacement with 25-34% compression

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

Tech Altum

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

Image Attributes

AttributeUse
srcsource or path of image
altalternate text for image ( compulsory )
srcsethigh resolution image for high pixel density devices
titleshow tooltip on mouse over
widthcontrol width of an image
heightcontrol height of an image
loading="lazy" images below viewport will load but with low priority.
(supported in Chrome 76+, Edge , Opera and Firefox )

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="">
  

src attribute is compulsory.


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

srcset attribute

<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?

alt attribute

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

alt attribute is compulsory, but value of alt can be blank.


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">
  

Always maintain aspect-ratio of image while using width and height attributes.