In this tutorial, you will learn HTML images or <img> Tag
In HTML to use any graphic image or photo you need to use <img> tag by giving the path of the image stored locally or server with a proper format such as JPG, PNG, SVG, etc.
- To add an image to your HTML document, you can use the <img> tag. The <img> tag requires a source for the image, which is specified using the src attribute. For example, the following code creates an image that displays the Google logo:
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo">
- You can also use images from your own website by specifying the relative file path of the image in the src attribute. For example:
<img src="images/logo.png" alt="My Website Logo">
- The alt attribute is important for accessibility, it is used by screen readers to describe the image for users who are visually impaired. Also, it is important for SEO, as it will be used when the image can’t be displayed.
You can use the width and height attributes to specify the size of the image. These values should match the actual size of the image file to avoid distortion.
<img src="images/logo.png" alt="My Website Logo" width="300" height="100">
- You can also use CSS to set the size of an image and to control the image styling and layout.
img { width: 100%; }
- The <picture> tag allows you to provide different images for different screen sizes, allowing you to optimize images for different devices. This element can have several <source> tags, each one with its media condition and the srcset attribute which lists different image options.
<picture> <source media="(min-width: 600px)" srcset="large.jpg"> <source media="(min-width: 300px)" srcset="medium.jpg"> <img src="small.jpg" alt="my image"> </picture>
Images can add visual interest and enhance the overall design of your website. With the <img> tag, you can easily add images to your HTML document and adjust the size, style, and layout using attributes and CSS. Always keep in mind that proper use of the alt attribute will help to keep your website accessible and good for SEO.