Skip to main content

Introduction to Responsive Web Design - Media Images

Responsive Web Design - Images​

Images are an important part of any website, but they can also pose a challenge for creating a responsive design that looks good on all devices.

Here are some tips for creating responsive images:

Use the max-width Property​

Use the max-width property to ensure that images scale down proportionally as the screen size decreases. This will prevent images from becoming too large for smaller screens and ensures that the image maintains its aspect ratio.

As an example:

img {
     max-width: 100%;
     height: auto;
}

Use Different Image Sizes​

Provide multiple versions of the same image at different sizes and resolutions to ensure that the image looks good on all devices. This can be done using the srcset attribute and the sizes attribute.

As an example:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw">

In this example:

  • We provide three versions of the same image: small.jpg, medium.jpg, and large.jpg.
  • The srcset attribute tells the browser which version of the image to use based on the device's screen size and resolution.
  • The sizes attribute tells the browser how much screen width each image should take up.

Use Lazy Loading​

Use lazy loading to delay the loading of images until they are needed. This can improve page load times and reduce the amount of data that needs to be downloaded.

As an example:

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy">

In this example:

  • We use a placeholder image as the src attribute and provide the actual image URL in the data-src attribute.
  • The loading attribute tells the browser to lazily load the image when it comes into view.

Using The width Property​

The width property is an important CSS property for creating responsive images. It can be used to specify the width of an image and control how it scales as the screen size changes.

Here are some tips for using the width property with images:

Use Percentages​

Use percentages to set the width of an image relative to its container. This ensures that the image scales proportionally as the container size changes.

As an example:

img {
     width: 100%;
     height: auto;
}

In this example:

  • We set the width property to 100% to ensure that the image takes up the full width of its container.
  • We also set the height property to auto to ensure that the image maintains its aspect ratio.

Use max-width​

Use the max-width property to ensure that images do not become too large for smaller screens. This property sets the maximum width of an image, allowing it to scale down proportionally as the screen size decreases.

As an example:

img {
     max-width: 100%;
     height: auto;
}

In this example:

  • We set the max-width property to 100% to ensure that the image scales down proportionally as the screen size decreases.
  • We also set the height property to auto to ensure that the image maintains its aspect ratio.

Use Different Sizes​

Provide multiple versions of the same image at different sizes and resolutions to ensure that the image looks good on all devices. This can be done using the srcset attribute and the sizes attribute, as discussed in the previous answer.

As an example:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw">


In this example:

  • We provide three versions of the same image: small.jpg, medium.jpg, and large.jpg.
  • The srcset attribute tells the browser which version of the image to use based on the device's screen size and resolution.
  • The sizes attribute tells the browser how much screen width each image should take up.

Different Images for Different Devices​

To provide the best user experience, it is often necessary to use different images for different devices. This is because images that look good on desktop may not look good on mobile, and vice versa.

Here are some techniques for serving different images to different devices:

Use Media Queries​

You can use media queries to target different screen sizes and resolutions and serve different images based on those conditions. For example, you can serve a smaller image to mobile devices with smaller screens and a larger image to desktop devices with larger screens.

As an example:

@media (max-width: 600px) {
     .hero-image {
          background-image: url("small.jpg");
     }
}

@media (min-width: 601px) {
     .hero-image {
          background-image: url("large.jpg");
     }
}

In this example:

  • We use media queries to serve a different background image to devices with a screen width of less than or greater than 600 pixels.

Use JavaScript​

You can also use JavaScript to detect the user's device and serve a different image accordingly. This technique is more complex than using media queries but allows for more fine-grained control over the image selection process.

As an example:

var device = (navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i) ? true : false);

if (device === true) {
  document.getElementById('my-image').src = 'mobile.jpg';
} else {
  document.getElementById('my-image').src = 'desktop.jpg';
}

In this example:

  • We use JavaScript to detect whether the user is using a mobile device and serve a different image accordingly.

The HTML <picture> Element​

The HTML <picture> element is a powerful tool for serving different images to different devices based on their screen size and resolution. It allows you to provide multiple image sources and let the browser choose the most appropriate one based on the device's characteristics.

As an example:

<picture>
  <source media="(min-width: 768px)" srcset="large-image.jpg">
  <source media="(min-width: 320px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="My Image">
</picture>

In this example:

  • We provide three versions of the same image: small-image.jpg, medium-image.jpg, and large-image.jpg.
  • The <source> elements specify the image sources and their associated media queries, while the <img> element provides a fallback for browsers that do not support the <picture> element.
improve performance

The <picture> element can improve the performance of your website by serving smaller images to smaller devices and larger images to larger devices.