HTML Images

The <img> tag is used to insert an image into an HTML document. The browser loads the image file using the <img> tag by making a request to the server where the image is hosted using the URL specified in the src attribute. If the server returns a successful response, the browser will load the image file specified in the src attribute, and then renders the image on the web page.

If the server returns an error, or if the URL is invalid, the browser will not be able to display the image and will instead display the alternative text specified in the alt attribute (if present).

The browser determines the size of the image based on the actual dimensions of the image file and the width and height attributes specified in the <img> tag (if present). If the width and height attributes are not specified, the browser will use the actual dimensions of the image file.

The <img> tag is supported by all modern web browsers, so images can be displayed consistently across different browsers.

Image tag attributes

The <img> tag has the following attributes:

  • src (Required): Specifies the URL of the image to be displayed.
  • alt (Required): Specifies an alternate text for the image, in case the image is not available or cannot be displayed for some reason.
  • height (Optional): Specifies the height of the image in pixels.
  • width (Optional): Specifies the width of the image in pixels.
  • title (Optional): Specifies extra information about the image, which will be displayed as a tooltip when the mouse is hovering over the image.

Here is an example of an <img> tag with all of the above attributes:

<img src="image.jpg" alt="A beautiful landscape" height="300" width="400" title="A photo of a mountain range">

Here is another example, where the alt attribute is used to provide a description of the image:

<img src="logo.png" alt="Company logo" height="50" width="100">

Note: The height and width attributes are optional, but it is generally a good idea to include them for performance reasons. Specifying the size of the image in advance allows the browser to allocate the necessary space for the image and avoid reflowing the page layout once the image has finished loading.

How to insert an image from another folder or another website?

To insert an image from another folder or another website in an HTML document, you can simply specify the full URL of the image in the src attribute of the <img> tag.

For example, if you want to include an image from another folder called "images" on your own website, you can use the following <img> tag:

<img src="/images/image.jpg" alt="My image">

If you want to include an image from another website, you can use the full URL of the image:

<img src="https://www.example.com/images/image.jpg" alt="Image from another website">

Note that when you include an image from another website, you are using that website's bandwidth to display the image on your own page.

This is generally considered good practice as long as you are not using too much bandwidth and not overwhelming the server of the other website. However, you should always be mindful of copyright issues and obtain permission before using someone else's images on your own website.

How to use animated Images in html?

To use animated images in HTML, you can use the <img> tag as usual, but with a file format that supports animation, such as GIF.

Here is an example:

<img src="animated.gif" alt="An animated image">

You can also use the <video> tag to include animated images in your HTML document. The <video> tag supports a wide range of file formats, including GIF, and allows you to control the playback of the animation using attributes such as loop, autoplay, and controls.

Here is an example of using the <video> tag to include an animated GIF:

<video src="animated.gif" loop autoplay></video>

This will create an animation that loops indefinitely and starts playing automatically when the page is loaded.

How to use image as a link in HTML?

To use an image as a link in HTML, you can use the <a> (anchor) tag and nest an <img> tag inside it.

Here is an example using an image as a link to another webpage:

<a href="http://www.example.com">
  <img src="image.jpg" alt="Link to example website">
</a>

This will create an image that, when clicked, takes the user to the specified URL.

You can also use the <a> tag to create a link to another location within the same webpage, or to a specific element on another webpage.

For example:

<a href="#section1">
  <img src="image.jpg" alt="Link to section 1">
</a>

<a href="http://www.example.com#section2">
  <img src="image.jpg" alt="Link to section 2 on example website">
</a>

In the first example, clicking the image will take the user to an element with an id attribute of "section1" on the same webpage.

In the second example, clicking the image will take the user to an element with an id attribute of "section2" on the website "www.example.com".

Note: To create an anchor point within a webpage, you can use the id attribute on any HTML element.

For example:

<h2 id="section1">Section 1</h2>

You can then create a link to this anchor point using the href attribute of the <a> tag, as shown in the above examples.

Other HTML Image related Tags

There are several HTML tags that can be used to display images on a webpage. Each of these tags has its own specific use cases and attributes, and you can use them in combination to create more complex and interactive image-based content on your webpage.

<picture>

This tag allows you to specify multiple sources for an image, and the browser will choose the most suitable one based on the device and screen size. This can be useful for optimizing the performance of your webpage on different devices.

For example:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="A description of the image">
</picture>

<svg>

This tag allows you to include Scalable Vector Graphics (SVG) images on your webpage. SVG images are vector graphics, which means that they can be scaled to any size without losing quality.

For example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<canvas>

This tag allows you to draw graphics using JavaScript. It creates a blank canvas on which you can draw shapes, lines, and other graphics.

For example:

<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

<map> and <area>

These tags allow you to create image maps, which are images with multiple clickable areas.

<img src="image-map.jpg" usemap="#map1">

<map name="map1">
  <area shape="rect" coords="0,0,82,126" alt="Area 1" href="area1.html">
  <area shape="circle" coords="124,58,8" alt="Area 3" href="area3.html">
</map>

The <map> tag defines the image map, and the <area> tag defines the individual clickable areas.

HTML Basics