Beginning with fluid images

How many times have you created web pages only to find that a viewer complains that they look poor on a mobile device? I'll bet that one possible reason for this is image content. The image is set with fixed sizes, so it doesn't resize well in smaller browsers, right?

In this tutorial, we will take a look at the basics needed to move away from fixed images to those that adapt when a browser window has been resized or content is being viewed on a mobile device.

For this exercise, I've created a dummy page about Lake Peyto in Canada—a truly stunning part of Canada if you are fortunate to be able to visit! Throughout this tutorial, we're going to make some changes to help make the image react better when resized in a browser window. These steps will guide you through the exercise:

1. Let's start by cracking open a copy of the code download and extracting simplefluid1.html and simplefluid1.css. This a simple web page about Lake Peyto, Canada.
2. Try resizing the browser window. Notice how it doesn't resize any of the content? Let's fix that by making two small changes to our code.
3. Alter the two lines in simplefluid1.css as shown in these lines of code:

   img { max-width: 100%; height: auto; float: left; padding: 10px; }
   #description { box-sizing: border-box; }
   #peytoe { ... padding: 0px 10px 10px; width: 66%; }

   The three changes we just performed are all that is required to make the content responsive and adapt to fit the resized window. We've used max-width to control the size of the image and the use of height: auto helps to keep the aspect ratio of the image to prevent it from looking distorted.

   One might think that this is enough, right? Well no, not quite; try resizing the content to a smaller size and we can see the image is starting to spill over the border.

   To make the image truly adaptive, we need to convert the sizes to their percentage equivalents; for this, we can use the formula target ÷ context = result. Let's put this into practice. Consider 443px (width of image) / 800px (original size of box) * 100 = 55.375 percent.

4. Using this formula, go ahead and modify the img rule as follows:

   img { width: 55.375%; height: 37.125%; float: left; padding: 10px; }

If all is well when resizing the image, the content will adjust but remain within the confines of the #peytoe div, as shown in this screenshot:

It should be noted that this approach may not work for all sites. For example, it may be preferable to crop it first using the background position before scaling it down to a smaller size. It will depend on your design as well as the type and quantity of images used; this is something that needs to be considered during design.

Now that we've seen the basics of making images responsive, let's move on and take a look at how we can improve on this by using higher quality images on supported devices. Before we do this though, it is worth covering a couple of key points about responsive design, namely relating to the use of vendor prefixes and image formats.