Qarpeo LogoInstitute

<img>

The <img> element embeds images using src for the source, alt for alternative text, and width/height for sizing.

<img> Tag

The <img> element is used to insert images into an HTML document.

Syntax

index.html
<img src="URL" alt="Description" width="width" height="height">

Key Attributes

  • src: Specifies the image source URL (required).
  • alt: Provides alternative text for accessibility (recommended).

Common Image Formats

  • JPEG: Ideal for high-quality images with lossy compression.
  • PNG: Supports lossless compression and transparency.
  • GIF: Suitable for simple animations and small images.
  • SVG: Scalable vector format without quality loss.
  • WebP: Efficient for high-quality images with better compression.
  • AVIF: Advanced format offering excellent compression and image quality.

Use of Meaningful alt Text

The alt attribute provides descriptive text for images, enhancing accessibility. This helps users who rely on screen readers understand image content.

Example

Social media
index.html
<img src="img.jpg" alt="Social media" />

Image as a Link

To make an image clickable, wrap it inside an <a> tag:

Social media
index.html
<a href="https://institute.qarpeo.com" target="_blank">  
  <img src="img.jpeg" alt="Social media" />  
</a>

Conclusion

The <img> tag is a powerful tool for displaying images in HTML documents. By using the src and alt attributes, it provides both the image source and alternative text for improved accessibility.

Images

HTML images, added using the (<img>) tag, enhance content and engagement. Key attributes include (src) for the source, (alt) for accessibility, and (width/height) for sizing.

<picture>

The <picture> element provides responsive images by defining multiple sources with media queries, optimizing display for various devices and resolutions.