Skip to content
preservelog

Links Images Media— Images

  • Adding Images (<img>)
  • Basic syntax and attributes
  • Image Attributes (src, alt, width, height)
  • Adding source, alternative text, and dimensions
  • Responsive Images
  • Techniques for making images responsive Certainly! Let’s dive into a detailed explanation of images in HTML, covering the <img> element, its attributes, and responsive image techniques.
  1. Adding Images (<img>)

The <img> element is used to embed images in an HTML document. It’s a self-closing tag, meaning it doesn’t need a separate closing tag.

Basic syntax:

<img src="image.jpg" alt="Description of the image" />
  1. Image Attributes

a. src (Source):

  • Specifies the path to the image file.
  • Can be a relative or absolute URL.

Example:

<img src="images/cat.jpg" />
<!-- Relative URL -->
<img src="https://example.com/images/dog.jpg" />
<!-- Absolute URL -->

b. alt (Alternative Text):

  • Provides a text description of the image.
  • Used by screen readers for accessibility.
  • Displayed if the image fails to load.

Example:

<img src="sunset.jpg" alt="Beautiful sunset over the ocean" />

c. width and height:

  • Specify the dimensions of the image in pixels.
  • Help the browser allocate space for the image before it loads, reducing layout shifts.

Example:

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

d. Additional useful attributes:

  • title: Provides additional information (shows as a tooltip on hover).
  • loading: Can be set to “lazy” for lazy loading of images.

Example:

<img
  src="info.jpg"
  alt="Information graphic"
  title="Click for more details"
  loading="lazy"
/>
  1. Responsive Images

Responsive images adapt to different screen sizes and resolutions. Here are some techniques:

a. Using CSS: You can make images responsive using CSS:

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

This ensures the image never exceeds its container’s width and maintains its aspect ratio.

b. Using the srcset attribute: Allows you to specify multiple image sources for different screen resolutions.

<img
  src="small.jpg"
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
  sizes="(max-width: 600px) 300px,
            (max-width: 1200px) 600px,
            1200px"
  alt="Responsive image"
/>
  • srcset lists image files with their intrinsic widths.
  • sizes tells the browser what size the image will be displayed at different viewport widths.

c. Using the <picture> element: Allows you to specify different images for different screen sizes or device types.

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Responsive image" />
</picture>

This loads different images based on the media queries, with a fallback for browsers that don’t support <picture>.

Best practices for images:

  1. Always use the alt attribute for accessibility and SEO.
  2. Optimize images for web use (compress and resize).
  3. Use appropriate file formats (JPEG for photographs, PNG for graphics with transparency, WebP for better compression).
  4. Implement lazy loading for images not immediately visible.
  5. Consider using CSS sprites for small, frequently used images.
  6. Use descriptive filenames for images.

Accessibility considerations:

  • Provide detailed alt text for informative images.
  • Use empty alt="" for decorative images.
  • Ensure sufficient color contrast for text overlaid on images.

By mastering these image techniques, you can create visually appealing, performant, and accessible web pages that look great on all devices.