HTML ImagesThere are three types of HTML image tags:
- <img /> - Defines an image
- <map> - Defines an image-map
- <area /> - Defines a clickable area inside an image-map
In this tutorial we are going to focused on images.
Anatomy of the image element
An image tag has four elements:
- The element name is img
- The src attribute defines the “source” of that image: the location at which the browser can find the image file. Example, desena.jpg.
- The alt attribute is an important attribute, which provides an alternative text version of the image that most people see on the screen. The alt attribute making images useful to all people even for the blinds who use screen readers to read website pages.
- The width and height attribute let the browser know the dimensions at which the image should be display in the browser.
Remember that the <img> tag is an empty element. In other words, it has no separate closing tag – the final forward slash tells the browser that everything it needs in order to display that element content is contained within the “attributes”.
The image formats
The image formats that are most commonly used on the web are: GIF, JPG and PNG.
- JPG images are great for photographic images
- GIF images on the other hand, are great for illustration and logos
- PNG images are tranparent