HTML Images – Beginner’s Guide with Examples

HTML Images – Introduction

The tag is used to embed an image in HTML document. It has two required attributes src (source) and alt (alternative).

Example 1: – Basic Image Display

Explanation:

In the below example, you can replace “blue-car.png” with your own image file path or URL. The alt attribute provides an alternate text for an image, which can be used by screen readers and search engines to describe the content of images. It’s crucial because when an image cannot be displayed or viewed due to any reason (e.g., slow internet connection, error in src attribute), it will display this description instead.

Edit example below

Output

Example 2: – Image With Width and Height

Explanation:

The width and height attributes specify the width and height of an image. The values are in pixels by default. You can also use percentages (%) to set the size relative to other elements on your webpage.

Edit example below

Output

Example 3: – Image as a Link

Explanation:

In this example, the <img> tag is wrapped inside an anchor (<a>) tag to make it a clickable link. The user will be directed to www.example.com when they click on the image.

Edit example below

Output

Example 4: – Animated GIFs

Explanation:

You can use a .gif image file to display an animation. In this example, replace “animation.gif” with the path or URL to your .gif file. The browser will display each frame in the order they are presented in the file when it loads the page.

Edit example below

Output

Example 5: – Responsive Images

Explanation:

You can use CSS to make images responsive using % width. Currently image width is 30%. Click on “Run Here” button and see effect on image. Similarly change width of image in % and see effect on it.

Edit example below

Output

Frequently Asked Questions

What does the src attribute do in an HTML image tag?

The src (source) attribute specifies the URL of the image to display in your web page. <img src=”image.jpg” alt=”Description of image” />

What is the purpose of the alt attribute?

The alt (alternative) attribute provides alternative information for an image if a user for some reason cannot view it, such as slow connection or an error in the src attribute, etc. <img src=”image.jpg” alt=”Description of image” />

How can you use CSS to control the size of images using attributes such as width and height?

The width and height attributes determine the intrinsic width and height of an image, i.e., it defines the natural dimensions of the image. But these values are often overridden by styling with CSS, so you may not set them directly. Instead, use CSS to control the size: <img src=”image.jpg” alt=”Description of image” style=”width:50%; height:auto;” />

How can images be made responsive in a web page using HTML and CSS?

You can make an image responsive by setting its max-width to 100% (this will ensure that the image does not exceed the width of its container), and height to auto (to maintain aspect ratio). Additionally, you might want to use media queries to adjust for smaller screen sizes.

How can you use JavaScript to dynamically change the source of an image?

Using the src attribute, you can get or set the value in JavaScript using either DOM methods (like document.getElementById(“imgId”).src = “newImageSource”) or jQuery (‘$(“#imgId”).attr(“src”, “newImageSource”)’). document.getElementById(“myImg”).src = “newimage.jpg”;