Working with Images in HTML

Images are an important part of web pages. They can make your content more attractive and provide valuable information to users.

Adding Images

To add an image in HTML, you use the <img> tag. This tag is self-closing and requires the src attribute to specify the image source, and the alt attribute to provide alternative text for screen readers.

<img src="path/to/image.jpg" alt="Description of image">
    

Image Attributes

The <img> tag has several attributes:

• src - Specifies the path to the image.
• alt - Provides alternative text for the image.
• width - Sets the width of the image.
• height - Sets the height of the image.

Example:

<img src="image.jpg" alt="My Image" width="300" height="200">
    

Image Formats

Common image formats supported in HTML include:

• JPEG (.jpg) - Good for photographs.
• PNG (.png) - Good for graphics with transparent backgrounds.
• GIF (.gif) - Good for simple animations and graphics.
• SVG (.svg) - Scalable vector graphics, excellent for logos and icons.

Responsive Images

To create responsive images that adapt to different screen sizes, use CSS. The following code sets the image to scale with its container:

<img src="image.jpg" alt="My Image" style="max-width: 100%; height: auto;">
    

Using Images as Links

You can also make images clickable by wrapping them in an anchor (<a>) tag:

<a href="https://example.com">
    <img src="image.jpg" alt="My Image">
</a>
    

Working with Images in HTML

Images are an essential part of web design. They can enhance the visual appeal of a website and provide useful information to users.

HTML Image Element

The <img> tag is used to embed images in HTML documents. The src attribute specifies the path to the image you want to display.

<img src="path/to/image.jpg" alt="Description of image">
    

Attributes of the Image Element

• src - The URL or path of the image file.
• alt - Alternative text for the image, displayed if the image cannot be loaded. This is important for accessibility.
• width - Specifies the width of the image in pixels or percentage.
• height - Specifies the height of the image in pixels or percentage.

Example of an Image Tag

<img src="logo.png" alt="Website Logo" width="200" height="100">
    

Image Formats

HTML supports various image formats:

• JPEG - Commonly used for photographs. Supports millions of colors.
• PNG - Supports transparency and is best for images with text or sharp edges.
• GIF - Supports animations but has a limited color palette (256 colors).
• SVG - Scalable vector graphics; ideal for logos and icons that need to be resized without loss of quality.

Responsive Images

To make images responsive and scale with the screen size, you can set the width to 100% and height to auto:

<img src="path/to/image.jpg" alt="Description of image" style="width: 100%; height: auto;">
    

Using Images as Links

Images can also be linked to other pages or websites by wrapping the <img> tag within an <a> tag:

<a href="https://www.example.com">
    <img src="logo.png" alt="Website Logo">
</a>
    

Image Accessibility

Using the alt attribute is crucial for accessibility. It provides a text alternative for screen readers and users who cannot view the images.