Images in Responsive Designs

Responsive designs are all the rage these days, and I recently created the first of my own, which has almost become a right of passage. One of the problems that I came across was how to make the images responsive as well. I was used to using background images for a number of uses, such as logos that need to have the images replace text so that screen readers still work, but when background images do not scale when using responsive designs, especially responsive grid systems, they simply overflow and get cut off.

When dealing with images in the main content of the site, this can be dealt with by adding the images using regular <img> tags in the html, and instead of setting a fixed width for the image, set the width to 100% and put the image in a bounding box. This adds a little extra markup, but allows for the width of the box to be changed dynamically, if using percentages, or for a pixel width to be set using CSS and the image will scale accordingly.

This becomes a little more difficult when dealing with background images. Repeating backgrounds and the like are fine, as they are designed to repeat ad infinitum no matter what size the bounding boxes are, but for the like of logos, I have found only one solution that does not involve mucking about with javascript and that is to create different image sizes. This is one of the reasons that the mobile / tablet designs need to be considered when creating a design, so that the designer already knows at what sizes different sizes of logo etc. will be needed. Once this is considered it is a simple as creating the file at a few different sizes and using the corresponding one for each screen size.

This method is not really ideal as the images are still all downloaded no matter what the screen size is, potentially slowing down the site for users on mobile or slow connections so should only be used where necessary, but it solves the problem quickly and effectively for the moment.

Update

Apparently, all images are not downloaded when using media queries for responsive designs, and only the ones required by the stylesheet are downloaded. Thanks to @HerrWulf for providing a link that explains this a bit better at CSS Tricks.

|