Responsive Images: How They Can be Created and Implemented Using CSS

Images leads to better engagement with your website visitors. They help in presenting the important pieces of information in a fun and effective manner. And so, when creating a mobile version of your website, make sure that your images look perfect on any mobile display. But, let's face it! Making your images responsive can be challenging, since not all of them are adaptable. Put it simply, the fixed-width images cannot resize according to the device they're accessed on.

There are techniques using which you can make the images having fixed width fluid, however, you might find them complex and incomprehensible to implement. For example, the <picture> element when used together with the "srcset/sizes" attributes proves an effective technique to implement responsive image in your website design. But, working with the srcset attribute can give you a hard time. Even though, this responsive image technique may seem befitting to experienced designers, but a beginner will find working on this technique quite challenging.

But, there is a simple approach following which you can easily create responsive images without going through much trouble. You can make images responsive using CSS properties: width and height. Reading this post further will help you better understand how you can use this approach to make your images fit for different mobile devices and platforms.

Let's Get Started

Remember before beginning with the process of making the images responsive, it's important for you to create a responsive (or a fluid) layout. Even when using CSS, you'll have to work with different variations to make the images responsive. However, the concept on which all those variations will rely upon will remain to be same: the width of the image will be set to percentage-length (or a rel unit), and the value of height will be auto, as shown in the following code snippet:

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

Create a Simple Responsive Image

Let's understand how you can create a simple responsive image. For this let's consider an example, use “div” as the container containing an image element. Below is a simple HTML markup with the div container:

<div class="container">
	<img src="abc1_image.jpg" width="940" height="620" />
</div>

Assume that the image container has a width set to 94%, so as to save some margin on the left and right side of the container. As you can see in the code above, the maximum width of the container is 940px. This will ascertain that the layout won't exceed when being viewed on a large screen.

The image-width of an element inside the container will contain a percentage-length of 100%, making it's value equal to that of the container-width. This will help in making your image scale according to the size of the container, no matter whatever viewport it used for accessing the images. This results in making the images responsive. Apart from the width, the height will be set to auto (as we had discussed previously). This will make the image to scale proportionally.

Let us now look at how the CSS will look, once the above discussed technique is implemented:

div.container {
	width: 94%;
	max-width: 940px;
	margin: 0 auto; /* to center the container */
}
img {
	width: 100%;
	height: auto;
}

Note: Implementing the above discussed image responsive technique will turn the image element into a responsive one, even though it features fixed dimensions (i.e. width and height). This is an ideal approach, you can use for website containing content with fixed dimensions.

Making Responsive Images For Different Column Layouts

When browsing the web, you'll most likely have come across sites featuring a responsive web design with images presented in a column. For instance, several sites contain image gallery added in the form of gird with plenty of images and thumbnails.

In order to make the images responsive for column layout, you just need to lessen the value of CSS width. And then, simply set the value of your image element "display" property to “inline-block”. Since a website design may contain two-column or three-column layout, let's understand how we can implement responsive images in both these column layouts:

Implementing Responsive Images in Two-column Layout

For this purpose, you just need to make your CSS width property reduced to one-half of the container's width, i.e. 47%. Since the CSS width isn't set to 50%, the images will be placed on your design having proper space on the left and right sides (or margins).

<div class="container">
	<img src="abc1_image.jpg" width="940" height="620" />
	<img src="abc2_image.jpg" width="940" height="620" />
</div>

img {
	width: 47%;
	display: inline-block;
}

Implementing Responsive Images in Three-column Layout

In order to implement responsive images in the three-column layout, we'll have to follow the same approach as discussed in the two-column layout scheme. However, the only difference in both the schemes is that here the CSS width will be calculated based on one-third of the container's width, i.e. 31%.

<div class="container">
	<img src="abc1_image.jpg" width="940" height="620" />
	<img src="abc2_image.jpg" width="940" height="620" />
	<img src="abc3_image.jpg" width="940" height="620" />
</div>

.three-columns {
	width: 31%;
	display: inline-block;
}

Adding Conditional Breakpoints

When you need to incorporate responsive images in different columns, you'll be required to resize the images quite often, based on the size of small or large screen. But, making our scale for multiple screen sizes separately isn't a viable solution. One best way to implement responsive images in columns is to make use of conditional breakpoints, which further requires using media queries.

Here's an example demonstrating how you can use media queries to display responsive images in different column layouts:

<div class="container">
	<img src="abc1_image.jpg" width="940" height="620" />
	<img src="abc2_image.jpg" width="940" height="620" />
	<img src="abc3_image.jpg" width="940" height="620" />
	<img src="abc4_image.jpg" width="940" height="620" />
</div>

/* Code for making images responsive for small devices (i.e. Smartphones) */
img {
  max-width: 100%;
  display: inline-block;
}

/* Code for making images responsive for medium-size devices (i.e. tablets) */
@media (min-width: 420px) {
  img {
    max-width: 47%;
  }
}

/*  Code for making images responsive for large devices (i.e. desktops) */
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}

Conclusion

Hope that the post will prove a useful resource to you, helping you understand a simple approach to making the images responsive and implementing them in your responsive design.

Author

Samuel Dawson is a extreme professional in Designs2HTML Ltd, a leading PSD to HTML conversion company. He is also a serial blogger sharing his knowledge across the globe on the web.