HTML Images

How do you insert an image in HTML?

You can insert an image in HTML using the <img> tag. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.

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

What is the purpose of the alt attribute in the <img> tag?

The alt attribute provides alternative text for an image in case it cannot be displayed. It is essential for accessibility, as it allows screen readers to describe the image to visually impaired users.

<img src="logo.png" alt="Company Logo">

How can you specify the width and height of an image in HTML?

You can specify the width and height of an image using the width and height attributes in the <img> tag. These values can be set in pixels or as a percentage of the containing element.

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

What are the benefits of using the srcset attribute?

The srcset attribute allows you to specify multiple image sources for different display resolutions and screen sizes. This helps improve the performance and responsiveness of images on various devices by serving appropriately sized images.

<img src="small.jpg" alt="Example Image" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w" 
     sizes="(max-width: 600px) 600px, 1200px">

How do you create a responsive image in HTML?

You can create a responsive image by setting the CSS property max-width to 100% and the height to auto. This ensures the image scales with the size of its container while maintaining its aspect ratio.

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

What is the difference between <img> and <picture> elements?

The <img> element is used to display a single image, while the <picture> element allows for more complex image source selection. The <picture> element can contain multiple <source> elements, each with its own media query, enabling the browser to choose the most appropriate image based on the screen size and resolution.

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  <img src="image-default.jpg" alt="Example Image">
</picture>

How do you link an image to another page in HTML?

You can link an image to another page by wrapping the <img> tag inside an <a> (anchor) tag. The href attribute of the anchor tag specifies the target URL.

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

What are the common image formats supported in HTML?

Common image formats supported in HTML include:

• JPEG: Best for photographs and images with gradients.
• PNG: Supports transparency and is ideal for images with text or sharp edges.
• GIF: Supports animations and is suitable for simple graphics.
• SVG: Scalable Vector Graphics, ideal for logos and icons as they maintain quality at any size.
• WebP: A modern format that provides high quality with smaller file sizes, supported by most modern browsers.

How can you optimize images for web use?

You can optimize images for web use by:

• Using appropriate file formats (e.g., WebP for graphics).
• Compressing images to reduce file size without losing quality.
• Using responsive images with srcset to serve different sizes for different devices.
• Implementing lazy loading to defer loading images that are not immediately visible in the viewport.