Written By: Avinash Malhotra
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.
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.
|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
<img src="logo.png" alt="alternate text of image" >
|src||source or path of image|
|alt||alternate text for image ( compulsory )|
|srcset||high resolution image for high pixel density devices|
|title||show tooltip on mouse over|
|width||control width of an image|
|height||control 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 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 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.
<img src="img/logo.png" alt="" srcset="img/logo-retina 2x" width="200" height="150">
srcset with multiple values
<img src="img/logo.png" alt="" srcset="img/logo-retina 2x, img/logo-retina-lg 3x" width="200" height="150">
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">
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.