Written By: Avinash Malhotra
Updated on 27-May-2023
← HTML Hyperlinks HTML Iframe→HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑Average rating: 5.0, based on88 reviews HomeFrontendHtml Html Images ImageExtensionsInsert Image Attributessrc attributesrcset Alt AttributeWidth and HeightImage TagImagine 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 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 CodeHtml 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 GroupRaster 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 webpageImage is inserted in html using 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.
Image Attributes AttributeUse srcsource or path of imagealtalternate text for image ( compulsory )srcsethigh resolution image for high pixel density devicestitleshow tooltip on mouse overwidthcontrol width of an imageheightcontrol height of an imageloading="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.
src attribute is compulsory.
srcsetsrcset 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 with multiple valuesAlt Attributealt 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 is compulsory, but value of alt can be blank.
Width and height Attributeswidth 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.
Always maintain aspect-ratio of image while using width and height attributes.
← HTML Hyperlinks HTML Iframe→