HTML Images
What is HTML Images ?
HTML Images are defined within tag. Image tag is an unpaired element. src and alt attributes are compulsory to add path of image and alternative text.
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.
Example
<img src=" " alt=" ">
How to insert image in a webpages
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.
Example
<img src="logo.png" alt="alternate text of image" >
Hyperlink Attributes
Image Attributes |
|
|---|---|
| Attribute | Use |
| src | source or path of image |
| height | control height of an image |
| title | show tooltip on mouse over |
| width | control width of an image |
| alt | alternate text for image ( compulsory ) |
| loading="lazy" | images below viewport will load but with low priority. |
src
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.
Example
<img src="img/icon.jpg" alt="">
height
height attributes are used to set preferred size, i.eheight of image. By default, an image will open with its actual size. We can also reduce or increase the size of actual image.
Example
<img src="img/icon.jpg" height="200">
Title
Title Atributes ate use to give title for a image. It is use for seo for google.
Example
<img src="img/icon.jpg" title=" about the image">
width
width attributes are used to set preferred size, i.eheight of image. By default, an image will open with its actual size. We can also reduce or increase the size of actual image.
Example
<img src="img/logo.jpg" width="200">
Alt
Alt is use for giving an alternative of a image if it not showen i websites.
Example
<img src="img/logo.jpg" alt="logo.jpg">
loading
images below viewport will load but with low priority.
Example
<img src="img/logo.jpg" loading="lazy">