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: 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.
Attribute Description Values Example src Specifies the URL image URL <img src=”pic1.jpg”> alt 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″>
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.
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
Method 2: Inserting Image without the CSS
Supported browsers are:
- Google Chrome
- Internet Explorer
Attention reader! All those who say programming isn’t for kids, just haven’t met the right mentors yet. Join the Demo Class for First Step to Coding Course, specifically designed for students of class 8 to 12.
The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.