Images

Let us look at how to add images onto our HTML file.

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.

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

Attributes

src (Source)

Specify the path to the image file. Can be a relative URL on your server (internal) or absolute URL on another server (external).

Example:

<!-- Relative URL -->
<img
  src="/src/content/docs/html/assets/happy_smiling_cat.jpg"
  alt="Smiling cat "
/>

<!-- Absolute URL -->
<img
  src="https://images.unsplash.com/photo-1511044568932-338cba0ad803?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Unsplash URL"
/>

Relative URLs will get rendered like this:

Absolute URLs will get rendered like this:

alt (Alternative Text)

Provides a text description of the image. Used by screen readers for accessibility also it gets displayed if the image fails to load for some reason.

<img
  src="/src/content/docs/html/assets/happy_smiling_cat.jpg"
  alt="Smiling cat "
/>

width and height

We can specify the dimensions of the image in pixels as values of width and height attribute. Dimensions predefined will help the browser allocate space for the image before it loads, reducing layout shifts.

<img
  src="/src/content/docs/html/assets/happy_smiling_cat.jpg"
  alt="Smiling cat "
  width="230"
  height="300"
/>

Since the original image is bigger than the specified dimensions, the image will be resized to fit the specified dimensions.

title

Just like the title attribute on the link element, title provides additional information about the image on hover.

<img
  src="/src/content/docs/html/assets/happy_smiling_cat.jpg"
  alt="Smiling cat "
  width="230"
  height="300"
  title="Just bottomed a can of tuna!"
/>

loading

This attribute helps images to be loaded in way that helps with loading time of the page.

a. lazy

The image is deferred and only loaded when it’s about to scroll into the viewport. Use this on images further down a long page, not visible to the user upon the page load.

b. eager (default behavior for most browsers)

The image is loaded immediately as the browser finds comes across them in HTML while rendering. Critical images that need to be visible right away (e.g., a hero banner or logo).

c. auto

Lets the browser decide whether to load the image eagerly or lazily based on browsers in built algorithms and rules.

Example usage with loading set to lazy as attribute value.

<img
  src="/src/content/docs/html/assets/happy_smiling_cat.jpg"
  alt="Smiling cat "
  width="230"
  height="300"
  title="Just bottomed a can of tuna!"
/>

Responsive Images

Since we have limited control over how a website is consumed by the end users, it is important we consider different mediums and their screen resolutions and sizes, which are used to consume the content.

One of the elements that break the responsiveness of the site is images that are not fine-tuned for different resolutions and screen sizes.

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 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"
/>

Let us look at 3 attributes, namely src, srcset, sizes. The src is the “default” or fallback image, used if the browser doesn’t support srcset or if no specific conditions are met.

srcset lists image files with their intrinsic widths. The browser will automatically choose the image based on the user’s screen resolution and available display space.

srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"

This tells the browser: small.jpg is 300w (300 pixels wide intrinsically). medium.jpg is 600w (600 pixels wide). large.jpg is 1200w (1200 pixels wide).

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>

Use the <picture> element and different image sources for different contexts (e.g., different images for landscape and portrait orientations).

<picture>
  <source srcset="image-landscape.jpg" media="(orientation: landscape)" />
  <source srcset="image-portrait.jpg" media="(orientation: portrait)" />
  <img src="image.jpg" alt="Responsive Image" />
</picture>

<picture> the element is a container element that allows you to define multiple <source> elements, each specifying a different image or media query condition inside media. This gives you fine-grained control over which image the browser should load based on specific screen attributes like width, resolution.

The browser reads the element from top to bottom, browser evaluates the media queries in the <source> tags to determine which condition applies to the current screen/window size. The first <source> tag with a media condition that evaluates to true is selected, and its srcset image is used. If no <source> condition applies, or if the picture element itself is not supported, the browser defaults to the tag’s src attribute.

The following are a few things to note during the development phase,try and optimize images for web use (compress and resize), remember as the file size grows time load time for the website also grows. Use appropriate file formats (JPEG for photographs, PNG for graphics with transparency, WebP for better compression) along with descriptive filenames for images. Implement lazy loading for images not immediately visible, for faster load times.

As for better accessibility always provide detailed alt text for informative images. If the image has text overlays, make sure it has sufficient color contrast on images.