The main change in conceptualization that responsive web design has brought is certainly the replacement of the pixel by relative units. It is true that in the past we linked all design elements (font size, containers, images, margins …) to a fixed drive: The pixel. But with “responsive” everything is different. We work with relative units: percentages (%) ems, rems…, and images are certainly one of the most affected items.
Pixels versus relative units
Imagine you have an image of 400 pixels wide by 300 pixels high (400x300px.) Well, look at this full size image requires a device with at least 400px wide, because a lower resolution would require horizontal scrolling, and, unless absolutely necessary, we will always try to eradicate it.
As of today, the best choice is to resize the image depending on the container to make it adaptable to different possible resolutions. This is only possible if you forget the pixel unit and think in relative units. The responsive design is a web design trend that is here to stay.
Forget also about having multiple images in specific pixels depending on the device (iPhone 5 or a tablet in particular.) The devices world changes very fast and daily new devices with internet come out to the market with the most varied resolutions. It is hard to select good stock images, so will you be able to add a picture every time a new device comes out? Look beyond, think ahead and design something today that will be ready for tomorrow.
Are you convinced? Let’s see how to work with responsive images with CSS.
CSS and responsive images
Let’s continue with our 400px wide image. We will declare that this image has a relative width. In this case 100%
img { width: 100%};Well, with this we have managed to get rid of the pixels. Now the image adapts to its container. If it is within an article, it will take up 100% of the article width. If it is inside a widget in the sidebar or aside (HTML5 element,) it will always take up 100% of the widget width. Perfect! We had before a fixed-width image, but now we just get a fluid image.
Let’s go to the next level. Fluid images are great, so we can start using the power of images. The problem is: what happens if our container exceeds the size of the image pixels? Imagine a container of 1200 pixels. What happens with our fluid image? It takes up 100% of the space. Therefore, our 400px image turns into a 1200px image as a total responsive image, but also a pixel one. So, this is not a good idea.
We must ensure the image is fluid, but up to a limit! Solution: the CSS max-width rule. By this rule we will indicate the image width in pixels, at the most, 100% of the width of the container. I mean:
If the container is 300px: our image will be 300px (max-width: 100%)
If the container is 400px: our image will be 400px (max-width: 100%)
If the container is 1200px: our image stays on 400px!
See the Pen Responsive images by Ricardo Prieto (@ricardpriet) on CodePen.
So, we have the best of fluid images without pixelation from excessive stretching.
img { max-width: 100%};Height in responsive images
With the height value things change a little. Usually we are guided by the width of the devices and containers to place our content. Rarely in web design the height value is an item to consider. There are websites with horizontal navigation, but most often with vertical, so these values don’t need much control.
However, its use is interesting in web designs with fixed items, e.g. a fixed navigation menu, which we will surely have to set a specific height. But beyond this, and returning with responsive images, the best for height is to indicate a value, i.e. to let the browser calculate the height of the element.
In most cases, the height and the width will be in proportion. If the width of the image is reduced to adapt to the responsive, the height will be too. If the width is fixed, the height will be too. So let’s complete our rule for responsive images:
img {
height: auto;
max-width: 100%;
}With this, our website is ready for responsive images.
One more step: Loading multiple images per resolution
Indeed there are interesting alternatives. Actually, what we have done is to turn all our images on flexible, making possible that they can be displayed properly on any device, thereby increasing the user experience.
But we can go a step further and optimize it more. Imagine we are accessing from a mobile phone and a 1200px wide image resizes perfectly. Fantastic, the user will see the image correctly; however, you are downloading an image above the necessary. You are downloading more kb than necessary. That same image can be resized to 600px wide and be lighter!
To do this, although there is not yet a standard, there are some interesting projects as Adaptive Images or Picturefill. Some of them resize images and load either depending on the dimensions of the device. Most of them use JavaScript. Doing it with CSS requires using the background-image rule, and it is impractical to do it manually article by article. If you are interested in this topic I recommend you read this article.
Internet Explorer and responsive images
Our beloved Internet Explorer 8 and 7, as always, are making life difficult. The issue here is that the Microsoft browser will not render the image properly when the max-width rule is applied on these earlier versions. So we must make a small fix. If you have declared that your header is covered by a rule if the visitor comes from IE8 or 7 (as I’ll show below):
<!doctype html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
You can apply a specific rule that only applies to images in internet explorer versions that do not support max-width, usually, all previous versions of Internet Explorer 9.
/* Fix IE problems with images */
.ie img {
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}WordPress and responsive images
If you’re on WordPress, the previous information is useful too. However, it is a good idea to define the location of those images where rules to convert these images into fluid are applied. Therefore, if you are using a template or theme that follows the recommendations of classes in its structure, you can limit that this rule only applies to images within the post or the sidebar:
.entry-content img,
.entry-summary img,
.comment-content img,
.widget img,
.wp-caption {
max-width: 100%;
height: auto;
}This is good, as it can happen that you do not want to resize some of the images you have (such as a button or a header item,) i.e., those images out of the container marking items and elements like widgets.
It is a good practice that we use in our themes. Similarly, there are some interesting plugins to work with images in WordPress responsive such as PB Responsive Images and Simple Responsive Images.
Conclusion
It’s all done. Check that all we have done is to turn an image with static dimensions into a fluid and dynamic one. But the point is how to do these images take up less at lower resolutions. Do you need to create 3 copies of the same image and upload them depending on the device?
There is no doubt that it will be the next and most important step. We have already achieved a minimum viable user experience. Now you need to research a step further. I mean a website that loads faster and reaches the user in a consistent time with a fluid navigation. But we will see it in the coming months. Stay tuned 😉
This article is awesome. It helped me out