How To Make Images Responsive With Examples - BrowserStack

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.

Table of Contents

• What is a Responsive Image?
• How to make an Image Responsive
• Using Media Queries
• Images on a Fluid Layout
• Understanding the max-width property
• Images for Non-Supporting Browsers
• How to make background images responsive
• Test Image Responsiveness on Real Devices
• Frequently Asked Questions

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.

Recommended Read: How To Test Website in Different Screen Sizes

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.

Learn everything you need to know about CSS and Media Query Breakpoints.

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: 560px) { img { width: 100%; } }

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"

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="Responsive" /> </picture>

Note: Replace alt=”Responsive” 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> ...Write your content here... </body> </html>

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 while the background image is loading */ background-color: #F8FAFD; }

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.

background-position: center center;

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

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.

Free Responsive Test on Commonly Used ResolutionsTry testing the responsiveness of your website on real devices.

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?

1. Improved user experience: By adapting to different screen sizes and devices, responsive images ensure that users are able to view images in a clear and easily readable format, regardless of the device they are using.
2. Better accessibility: Responsive images make it easier for users with visual impairments to access and understand images on a website, as they can be resized to match the user’s preferred font size and screen size.
3. Improved SEO: Search engines prefer websites that are optimized for different devices and screen sizes, and responsive images are a key aspect of this optimization.
4. Faster page load times: By using the srcset and sizes attributes, you can specify different versions of the same image for different screen sizes and devices, allowing the browser to choose the most appropriate image for the current screen size, improving loading times and performance.
5. Better user engagement: A smooth and consistent user experience across different devices and screen sizes can lead to increased user engagement and a lower bounce rate.

Overall, responsive images play an important role in ensuring that a website is optimized for different devices and screen sizes, providing a better user experience and improving the overall performance of a website.

Talk to an Expert

4. How do I size a background image in CSS?

You can size a background image in CSS using the cover or contain property or by setting specific width and height values.

1. Using the “cover” property: This value will automatically scale the background image to be as large as possible so that the background area is completely covered while maintaining its aspect ratio. Example: background-size: cover;
2. Using the “contain” property: This value will scale the image to fit the container while maintaining its aspect ratio, and will show any empty space surrounding the image. Example: background-size: contain;
3. Setting specific width and height values: This method allows you to specify the exact dimensions of the background image in pixels, which can be useful if you need to fit the image into a specific space on your webpage. Example: background-size: 100px 50px;