How to make images responsive

In today’s digital age, having an image responsive website has become essential to provide a seamless browsing experience for users across all devices. Image responsiveness ensures that your images adapt to the device’s screen size and resolution, maintaining their quality and proportion. This is essential for providing a positive user experience and making your website accessible to a wider audience.

A responsive website that loads quickly and displays images well can improve engagement and conversion rates. You can easily make your images responsive and optimize your website for all devices using CSS. In this guide, let us explore the best practices for making images responsive.

What is a Responsive Image?

A responsive image is an image that is optimized to adapt to different screen sizes and resolutions. When a website is accessed on different devices, the images should resize and adjust their layout to ensure that they look good and remain fully visible. This is important for providing a seamless and engaging user experience, regardless of the device used to access the website.

In real-world usage, that means that the image should have the following attributes/abilities:

• The image should be able to render crisply at different device-pixel-ratios. That means high-resolution screens display high-resolution images, but low-res screens should not have to deal with the extra pixels.
• In the case of a fluid (responsive) layout, images need to stretch or squeeze to align with its changes.
• For both the above cases, images will have to be made responsible in multiple resolutions so that they can scale accordingly.

Different browsers support diverse image formats. Newer formats like WebP may not be compatible with every browser, in which case images will have to be made available in JPEG format as well.

How to make an Image Responsive

Start with the question “how to make an image responsive in CSS?” When an image is uploaded to a website, it is endowed with default height and width. These need to be changed with CSS.

Simply assign a new value to the image’s width property. As a result, the image’s height will adjust itself in accordance. Make sure to use relative units (like a percentage) for the width property instead of absolute units like pixels.

Example:

img {
width: 800px;
}

The code above sets a fixed width of 800px. This image won’t be responsive as the unit is absolute and won’t adjust itself. However, look at the code below:

img {
width: 70%;
}

With a relative unit like 70% in place, the image will be fluid and resize itself, whatever the screen size.

Check Responsiveness

Using Media Queries

Media queries or CSS breakpoints are points defined in the code. Website content responds to these points and adjusts itself to the screen size to display the accurate layout. With CSS breakpoints in place, the website content will align itself with screen size and displays itself in a way that pleases the eye and facilitates visual consumption.

Obviously, responsive images require the use of media queries to resize themselves across to device screen size.

In the example below, the image carries a 50% width for any screen. In order to make them maximize to full size for any mobile devices, use media queries:

@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}

Source

By virtue of the media query above, any device with a screen size smaller than 480px will have the image take full-size along the screen’s width.

Images on a Fluid Layout

Creating responsive images on a fluid layout is a little more challenging. On most websites, images are the heaviest elements and need to start (and finish) loading before anything else. Therefore, browsers start out by scanning a web page’s HTML for image URLs and loading them. This happens before the browser builds the DOM, puts the layout together, or loads external CSS.

Consequently, the browser needs to know the image source even before they detect the image’s rendered size.

Keep in mind that the browser automatically knows the environments all web elements are rendering in: viewport size, users’ screen resolution, etc. This data is used to define media queries. Therefore, to adjust images to a fluid layout, devs can also define the images’ rendered size to the browsers.

Let the browser know how many pixels are required by using the sizes attribute. Use the w descriptors in srcset to communicate the number of pixels in each image source. Armed with this data, the browser can select the smallest image source that will allow the image to look presentable within its viewport.

Let’s take an example in which there are three image sizes:

• large.jpg (1024 × 768 pixels)
• medium.jpg (640 × 480 pixels)
• small.jpg (320 × 240 pixels)

These images have to be placed in a flexible grid – one that starts from a single column, but in larger viewports, transforms into three columns:

<img srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw"
src="small.jpg"

Source

The code uses srcset with w descriptors to mention image sources – which communicate the actual pixel widths of the referenced file to the browser.

In this example, only image width is defined, not height. In this particular case, images in the layout have widths established explicitly by CSS but not their heights. Most responsive images tend to be the same, so this keeps things simple.

While the w descriptor defines the number of pixels for each image source, the sizes attribute relates to the browser how many pixels it needs by defining the image’s final rendered width. It offers the browser some data about the page’s layout early on to help it pick an image source before it renders the page’s CSS code.

Understanding the max-width property

To make images responsive, it is common for developers and designers to use the max-width property. It defines the maximum width for an element; no element can be wider than its max-width value.

That means that if an image carries the max-width of 800px and is being rendered on a screen size of only 360px, the device won’t display the complete image due to lack of space.

img {
max-width: 100%;
width: 800px; // assume this is the default size
}

By defining the max-width and setting it to 100%, the 800px image will shrink to fit the space on the 360px device. Using a relative unit (as shown above) will make the image fluid on any device less than 800px.

However, if the screen size is larger than 800px, the image will not expand to fit the same. This adversely affects its responsiveness. This is where the max-width property falls short.

Want to run a quick Responsive Image Test on your Website? Run now.

Images for Non-Supporting Browsers

Let’s say a particular image’s format is incompatible with browsers. This usually pops up when older browsers have to render images in newer formats. In such cases, use the code below:

<picture>
<source type="image/svg" src="logo.svg" />
<source type="image/png" src="logo.png" />
<img src="logo.gif" alt="RadWolf, Inc." />
</picture>

Source

Note: Replace alt=”RadWolf, Inc.” with the relevant image name.

In case the browser cannot decipher the image/svg media type, it skips the first source. If it can’t work with image/png, then it ends up using the .gif file.

How to make background images responsive

Here’s how to create responsive background images with CSS:

• Use the background-size property to encompass the viewport. Give this property a cover value that will tell a browser to scale the background image’s heights and width so that they always remain equal to or greater than the height/width of the device viewport.
• Use a media query to offer scaled-down versions of the background image for mobile device screens. This is an optional step; given the widespread usage of mobile devices, it should be incorporated into the process.

Example:

<!doctype html>
<html>
<body>
...Your content here...
</body>
</html>

Source

The background image goes in the body element so that it always covers the full browser viewport.

Note that the code will also work perfectly on block-level elements (a div or form). As long as the height and width of the block-level container is fluid, the background image will scale in order to cover the container in its entirety.

Now, declare the style rule for the body element with:

body {
/* Location of the image */
background-image: url(images/background-photo.jpg);

/* Background image is centered vertically and horizontally at all times */
background-position: center center;

/* Background image doesn't tile */
background-repeat: no-repeat;

/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;

/* This is what makes the background image rescale based
on the container's size */
background-size: cover;

/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}

Source

A few notes on the code

Pay particular attention to:

background-size: cover;

This property/value pair instructs the browser to adjust the background image so that its height and width are equal to the height and width of the element; here, the body element.

However, if the background image is smaller than the body element, the browsers will programmatically expand the image dimensions. Magnifying an image beyond its natural dimension usually causes it to degrade. This scenario usually pops up on high-res screens or on pages with far too much content.

To avoid this, try to use an image large enough for most screen sizes and resolutions.

Now look at:

background-position: center center;

This is used to ensure that the background image always remains at the center of the viewport.

Next, look at:

background-attachment: fixed;

A scroll bar appears in cases where the content height is more than that of the visible viewport. But the background image must stay in its position even if the user scrolls down. Setting the background-attachment property (as done above) ensures this.

Test Image Responsiveness on Real Devices

Shaping and incorporating appropriate code to implement responsive images for all possible devices is not humanly possible. The best option is to deploy code, media queries, and breakpoints that fit the device preferences of the target audience. Additionally, keeping images adjustable and adaptable to change would also help accomplish more in the long term with reasonable levels of effort.

Once images have been rendered responsive, remember to test them on real devices to check their responsiveness. Depending on the number of screen sizes in question, checking responsive design is easiest when using a real device cloud.

BrowserStack offers 3000+ real browsers and devices for instant, on-demand cross-browser testing on the cloud. Simply sign up for free, choose from among the latest devices, navigate to the relevant website, and start verifying its responsive design.

Try BrowserStack for Free

BrowserStack’s responsive design checker provides an easy way to verify the responsive design. Simply enter the URL, click Check and receive a view of the site on multiple real devices, both desktop, and mobile. Ensure that your responsive design breakpoints are placed accurately and facilitate the most satisfying user experience that they possibly can.

Frequently Asked Questions

1. How can an image be made responsive?

An image can be made responsive by using CSS and setting the width of the image to be a percentage of its parent container, rather than a fixed pixel value. This way, when the size of the parent container changes (e.g. due to different screen sizes), the size of the image will also change proportionally.

img {

max-width: 100%;

height: auto;

}

In this example, the max-width property is set to 100%, which means that the image will take up the full width of its parent container, but won’t exceed it. The height property is set to auto, which means that the height of the image will adjust automatically to maintain the aspect ratio of the original image.

2. What is responsive image in HTML?

Responsive images in HTML are images that automatically adjust their size based on the size of the screen or the container they are displayed in, providing an optimal viewing experience on different devices with varying screen sizes.

This can be achieved using CSS, by setting the width of the image to a percentage of its parent container, and allowing the height to adjust automatically to maintain the aspect ratio of the original image.

3. Why are responsive images important?