HTML Image Attributes

In this section of our HTML tutorial, we will delve into the various attributes associated with the <img> element. Images are a vital part of web content, and understanding how to use attributes like src, alt, width, and height is essential for effective image integration in web development. We’ll also discuss the importance of image responsiveness.

Introduction to Image Attributes

The <img> element allows us to insert images into HTML documents. To make the most of images in web development, you need to consider several attributes:

  • src: Specifies the image file’s source location.
  • alt: Provides alternative text for the image, useful for accessibility and SEO.
  • width: Sets the width of the image in pixels.
  • height: Sets the height of the image in pixels.

Basic Syntax

Here’s the basic syntax for using image attributes with the <img> element:

Understanding Image Attributes

src Attribute

The src attribute defines the source location of the image file. It can be a relative or absolute URL.

alt Attribute

The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded or for accessibility reasons.

width and height Attributes

The width and height attributes set the dimensions of the image in pixels. It’s essential to maintain the image’s aspect ratio when adjusting these attributes to avoid distortion.

Code Examples

Here are examples of using image attributes (src, alt, width, and height) with the <img> element in HTML:

Basic Image with Alt Text:

Image with Custom Dimensions:

Image Responsiveness

When working with images, it’s important to consider responsiveness. Responsive images adapt to different screen sizes and devices, providing the best viewing experience. To make images responsive, you can use CSS or HTML techniques like the max-width property. Here’s an example:

This CSS style ensures that the image scales proportionally to the width of its container, making it suitable for various screen sizes.


Let’s apply what we’ve learned with some exercises:

Exercise 1: Create an image element that displays a logo image for your imaginary e-commerce website. Make sure to set the src attribute to the image file’s URL, provide a relevant alt text, and adjust the width and height attributes to fit your webpage layout.

Exercise 2: Imagine you’re creating a travel blog. Insert an image of a beautiful destination with a description in the alt attribute. Set the width and height attributes to create a visually appealing layout.

Exercise 3: Design a personal portfolio webpage. Add an image of yourself with a suitable alt text, ensuring that the image dimensions fit the design of your webpage.


Understanding and effectively using image attributes in web development is essential for creating visually engaging and accessible web content. The src attribute defines the image’s source, the alt attribute provides alternative text for better accessibility and SEO, while the width and height attributes allow you to control the image’s dimensions. Additionally, making images responsive ensures that your web content adapts to different screen sizes, enhancing the user experience on various devices. Proper use of these attributes and responsiveness techniques ensures that images are displayed as intended and contribute to a positive user experience on your website.