Previous

HTML: Images

In HTML, images are inserted using the <img> element. Here's a breakdown of the theory and an example of how to use images in HTML:

  1. Image Source (src): The src attribute specifies the URL of the image file.
  2. Alternative Text (alt): The alt attribute provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes (e.g., screen readers).
  3. Width and Height: You can set the width and height of the image using the width and height attributes, respectively. It's generally recommended to specify these attributes to avoid page layout shifting as images load.
  4. Responsive Images: For responsive design, use CSS or HTML attributes like srcset and sizes to provide different image sources based on device size or screen resolution.
<!DOCTYPE html>
<html>
<head>
   <title>HTML Image Example</title>
</head>
<body>
   <!-- Basic Image -->
   <img src="example.jpg" alt="Example Image">
   <!-- Image with Width and Height Attributes -->
   <img src="example2.jpg" alt="Another Example" width="200" height="150">
   <!-- Responsive Image with srcset and sizes Attributes -->
   <img srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1024w"
        sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1000px"
        src="small.jpg" alt="Responsive Image">
   <!-- Image as a Link -->
   <a href="https://www.example.com">
       <img src="example3.jpg" alt="Linked Image">
   </a>
</body>
</html>

In this example:

  • The first <img> tag inserts a basic image with the source file example.jpg and alternative text "Example Image."
  • The second <img> tag specifies an image with a specific width and height.
  • The third <img> tag demonstrates a responsive image with different sources (srcset) for different device widths and screen resolutions, along with the sizes attribute for specifying image sizes based on the viewport width.
  • The fourth <a> tag wraps an <img> tag, creating an image link that directs users to https://www.example.com when clicked.

You can replace the image URLs (src attribute values) in the example with the actual URLs of your image files.

Previous