How to Insert an Image in HTML?
We can use different fonts and lists in an HTML document. Similarly, we can add graphics to make the document look more attractive. Web browsers support a number of graphic formats. Some of the most widely used formats are:
- Graphics Interchange Format(GIF): GIF is the best format displaying images designed with a graphics program. This format uses a maximum of 256 colors and a combination of these to create more colors.
- Joint Photographic Expert Group(JPEG): JPEG is the best format for photographs as it contains 1 million colors.
- Portable Network Graphics(PNG): The format is best for images with transparency or the low color count.
Use of <img>Tag
The <img> tag specifies an image to be displayed in an HTML document. It is an element as it does not have an OFF tag.
The image tag has the following attributes in the table:
| Attribute | Description | Values | Example |
| src | Specifies the URL image | URL | <img src=”pic1.jpg”> |
| alt | Specifies the alternative text for an image. This is displayed when the graphics feature is turned off in the browser or while The image is being downloaded. In some browsers, the ALT text is displayed as a tooltip for the image. | text | <img src=”pic1.jpg” alt=”Image not available> |
| height | Specifies the height of an image | value in pixels | <img src=”pic1.jpg” height=”100″> |
| width | Specifies the width of an image | Value in pixels | <img src=”pic1.jpg” width=”90″> |
The following HTML code will help you understand the <img>tag better. The resulting web page is shown in the output.
Method 1: Inserting an image with CSS
HTML
<!DOCTYPE html><html> <style> image{border:4px solid orange; width: 120px;height: 100px;} h1{text-transform:uppercase} </style><head> <title> HTML frame scrolling Attribute </title></head><body> <h1>INSERTING IMAGE</h1> <img src="5.png" alt="image is not available"></body></html> |
Output:
Method 2: Inserting Image without the CSS
HTML
<!DOCTYPE html><html><head> <title> HTML frame scrolling Attribute </title></head><body> <h1>INSERTING IMAGE</h1> <img src="5.png" alt="image is not available" width="120px" height="100px"></body></html> |
Output:
Supported browsers are:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...