RWD Images

Responsive Web Design - Images

Making images responsive is a cornerstone of Responsive Web Design (RWD). This ensures images adapt to different screen sizes and devices, improving user experience and performance.

Fluid Images: max-width: 100%

The most common and effective way to make images responsive is to use the max-width property.

If max-width is set to 100%, the image will scale down if its container is narrower than the image’s original width, but it will never scale up to be larger than its original size. This prevents pixelation for upscaled images.

img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Optional: removes extra space below image if it's an inline element */
}

Why height: auto;? When you scale the width, setting height: auto; ensures the browser calculates the height proportionally, maintaining the image’s aspect ratio.

Using width: 100% vs. max-width: 100%

If you use width: 100%;, the image will always try to fill 100% of its container’s width. This means it can scale up beyond its original size (potentially causing blurriness) or scale down.

img.full-width {
  width: 100%;
  height: auto;
}

Generally, max-width: 100%; is preferred for preserving image quality.

Responsive Background Images

Background images can also be made responsive using the background-size property.

1. background-size: contain;

The image will scale to fit within the content area while maintaining its aspect ratio. The entire image will be visible, but there might be empty space if the aspect ratios don’t match.

.bg-contain {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: 1px solid red;
}

2. background-size: cover;

The image will scale to cover the entire content area, also maintaining its aspect ratio. Some parts of the image may be clipped if the aspect ratios don’t match.

.bg-cover {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid red;
}

3. background-size: 100% 100%;

The image will stretch or shrink to fill the content area exactly, potentially distorting its aspect ratio.

.bg-stretch {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%; /* First value for width, second for height */
  border: 1px solid red;
}

Art Direction and Resolution Switching with <picture> and srcset

Sometimes, simply scaling an image isn’t enough. You might want to show a differently cropped image (art direction) or serve different resolution images based on screen density or size.

Using Media Queries for Background Images

You can use CSS media queries to serve different background images based on viewport characteristics.

/* Default background image (e.g., for smaller screens) */
body {
  background-image: url('img_smallflower.jpg');
}

/* For screens 600px and wider */
@media only screen and (min-width: 600px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

/* For high-resolution (Retina) displays */
@media only screen and (min-resolution: 192dpi),
       only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    /* Use a higher resolution background image if available */
    background-image: url('img_flowers_high_res.jpg');
  }
}

The HTML5 <picture> Element

The <picture> element provides a more robust solution for responsive images directly in HTML. It allows you to declare multiple sources for an image, and the browser will choose the most appropriate one.

Browser support for the <picture> element is widespread across modern browsers.

Element	Current Support	Chrome	Firefox	Edge (was IE)	Safari	Opera
	Widespread	38.0+	38.0+	Widespread (Edge)	9.1+	25.0+

Example of <picture>:

<picture>
  <!-- Show small_image.jpg on screens narrower than 600px -->
  <source media="(max-width: 599px)" srcset="small_image.jpg">
  <!-- Show medium_image.jpg on screens 600px to 999px wide -->
  <source media="(min-width: 600px) and (max-width: 999px)" srcset="medium_image.jpg">
  <!-- Show large_image.jpg on screens 1000px or wider -->
  <source media="(min-width: 1000px)" srcset="large_image.jpg">
  <!-- Fallback for browsers that don't support <picture> or if no source matches -->
  <img src="default_image.jpg" alt="Descriptive alt text">
</picture>

Key attributes:

• <source>: Specifies different image sources.
• media: A media query that determines when a particular source should be considered.
• srcset: Specifies the URL of the image to use. Can also be used for resolution switching (e.g., srcset="image.jpg 1x, image-2x.jpg 2x").
• <img>: This is a required fallback for browsers that don’t support <picture> and also provides the alt text.

Using srcset and sizes on <img> for Resolution Switching

For resolution switching or serving different sized images based on viewport width without full art direction, you can use the srcset and sizes attributes directly on an <img> tag.

<img srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     src="fallback-image.jpg"
     alt="A responsive image example">

srcset provides a list of image URLs and their intrinsic widths (e.g., 480w).

sizes tells the browser how wide the image will be displayed at different viewport widths. This helps the browser pick the most appropriate image from srcset.