HTML Image Tag

HTML Images are defined within <img> tag. Image tag or <img> is a unpair element. src and alt attributes are used to add properties to image.

HTML includes image tag from its 4th version (HTML4) ie since 1997. Images enhance the look and feel of a website. We uses images as a logo, banner, icons, symbols, product etc.

How to insert image in html


    <img src="" alt="">


HTML Images Formats and Comparision

Html supports four popular images extensions, jpg, png, gif and svg.

html images, jpp vs png vs gif vs svg
Image Extensions comparison, jpg vs png vs gif vs svg

Image extensions for web

  • Joint Photographic Gallery (jpg)
  • Portable Network Graphics (png)
  • Graphics Interchange Format (gif)
  • Scalable Vector Graphics (svg)

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 ( compulsory )
altalternate text for image ( compulsory )
titleshow tooltip on mouse over
widthcontrol width of an image
heightcontrol height of an image

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.