HTML includes images from its 4th version (HTML-4) ie since 1998. Images enhance the look and feel of a website. We uses images as a logo, banner, icons, symbols, product etc.
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. But increasing width or height, image size increase with same aspect-ratio. Aspect Ratio is ratio of with Vs height.
<img src="logo.png" alt="alternate text of image" >
How image looks on a webpage
Attributes in img tag
|src||source or path of image ( compulsory )|
|alt||alternate text for image ( compulsory )|
|title||show tooltip on mouse over|
|width||control width of an image|
|height||control height of an image|
alt attributes is compulsory in every image tag. It helps google and other search engines to search images. If in any case image fail to upload, alt text hold the space and tell user about image.