Home Guide How to make images responsive

How to make images responsive

Shreya Bose, Technical Content Writer at BrowserStack -

Table of Contents

Did you know?

  • 74% of people are more likely to return to a website if it’s optimized for mobile.
  • 57% of internet users say they won’t recommend a business with a poorly designed website on mobile
  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly
  • 70% of web traffic happens on a mobile device.
  • More than 4 billion people access the web through 9000+ distinct devices.

What do the above stats reveal beyond the shadow of a doubt?

That every website that wants to stand a chance of being successful needs to implement a responsive design.

However, given that most modern websites have rich, layered designs that incorporate text, image, and video to attract, communicate with and retain users, implementing responsive design might not be too easy.

Using the right image is integral to creating an aesthetically pleasing and relevant website design. Nobody wants to skim through blocks of text with no image in between. Images depict, clarify and make information more accessible and understandable. Thus, no matter the device from which a website is being accessed, images have to render correctly and presentably. In other words, web developers must make images responsive.

This article will explore and describe the process by which web developers can create responsive images.

What is a Responsive Image?

Before wondering how to make images responsive, it’s worth taking the time to understand what a responsive image is.

Quite simply, a responsive image responds and adjusts to different screen sizes. 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.

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: 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 2000+ 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.

Tags
Responsive

Featured Articles

Defining Breakpoints in Responsive Web Design

What is the ideal screen size for responsive design?

5 Tests You Must Run Before Launching A Website

BrowserStack Logo Test Instantly on 2000+ Real Devices & Browsers Contact us Get Started Free