Fluid Images

Be Flexible and Responsive my friend!

One of the biggest problems for responsive, mobile web designs are fluid images and other media. This is a study of the various options available.

Simple Fluid Images

Even though we followed the workflow for adding optimised images, when the parent container width is less than the fixed width that was correctly applied to the image, it will break out of the container, resulting in a broken responsive layout.

We can fix this using CSS relative units. First, max-width: 100%; enables the image width to be 100% of the parent containers width up to the image's maximum width size (240px in this case). We now have the problem of aspect-ratio, squashing the image.

Lake View (Responsive Image) If we now set height: auto;, the aspect-ratio of the image is maintained and the image is now suitable for RWD.

You can also set something like min-width: 140px; so that the image does not become too small but be sure it does not break out of the parent container on small mobile devices with narrow view-ports.

/* Markup */
<img src="URL" alt="DESCRIPTION" title="DESCRIPTION" width="XXX" height="YYY" class="fluid left">
/* Emmet */
img[src="URL" alt="DESCRIPTION" title="DESCRIPTION" width="XXX" height="YYY"].fluid.left

Relative Images

kingfisher The simple max-width/auto-height, fluid image approach is fine for article headers and “hero” images, but for in-line images within the content, there is a better solution.

Follow these guidelines to create relative images to fit into different layouts and column widths:

For my layout designs, because I work in relative ems and percentages, a method of converting the column widths from ems to pixels is required. 1em roughly equates to 16px.
column width in ems * 16px = column width in pxs
When floating images in a column, an image looks good if it takes up about one third of the column (but adjust to suit your design)
column width in px * 33.3% = image width in pxs
When following the steps to optimise the image, resize it to the image width in pxs.
Float the image (or is parent, such as a figure) left or right.
Set the image width to 33.3%.
Set a max-width to prevent the image growing too large and pixelating.
Set a min-width to prevent the image growing too small if needed.
Set height: auto to maintain aspect-ratio.
If the column width gets into mobile width, say 20em (320px), cancel the float and centre the image.

Ideal Column Layout Images

Setting the image width within fluid columns.

This image, contained in a figure element, is currently in my 22em elastic columns layout.

Calculate its width in pixels.

22em * 16px = column width, 352px

Now we can calculate the image width and then resize the image in the optimisation process.

325px * 33.3% = resized image width, 117.216pxs

Finally, let's float it left and style it appropriately. Study the markup and CSS rules below to see how it is coded.

<!-- Relative Image - Rounded down to 45% of container width -->
<img src="i/view-lake.jpg" alt="Lake View" width="240" height="180" class="rel-img" style="width:45%;" />

.rel-img {
  height:auto; 
  margin: 0 0 1em 2%; /* breathing space */
}
@media screen and (max-width: 20em) { /* below 20em (320px) */
  .rel-img {
    display:block;  /* put image on its own line */
    width: inherit!important; /* over-ride in-line style setting */
  }
}
@media screen and (min-width: 20em) { /* above 20em */
  .rel-img {
    float:right; /* Let content wrap */
  }
}

Full Width Layout Images

Single Column Layout Images

The Jacobite crossing Glenfinnan Viaduct, Scotland

zzzz

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, inventore officia culpa cupiditate mollitia saepe molestiae voluptate ut itaque tempore. Placeat, amet, recusandae pariatur voluptas rerum accusantium velit ad. Eos? Excepturi, illum aut similique libero suscipit id cum praesentium ut porro nulla tempore nemo beatae omnis exercitationem dignissimos facilis deleniti vel cupiditate qui nesciunt culpa sed debitis consequuntur velit nisi. Doloribus, explicabo, dolor, aliquid, sequi sit veritatis optio enim ut reiciendis nemo incidunt repudiandae eos temporibus fugit fugiat debitis deserunt aspernatur saepe iure ab sapiente eius delectus. Explicabo, esse fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, inventore officia culpa cupiditate mollitia saepe molestiae voluptate ut itaque tempore. Placeat, amet, recusandae pariatur voluptas rerum accusantium velit ad. Eos? Excepturi, illum aut similique libero suscipit id cum praesentium ut porro nulla tempore nemo beatae omnis exercitationem dignissimos facilis deleniti vel cupiditate qui nesciunt culpa sed debitis consequuntur velit nisi.

400 / 1200

* 100 = 33.33%

CSS background images

Lake View CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images time to shine!

Choosing A Responsive Image Solution

CSS Fluid Image Techniques for Responsive Site Design

Maintaining Image Aspect Ratios in RWD

Full Background Image

A background image can cover the full viewport at any size. This could be used for a web site design, adverts, or even as a dialog box.

Woodland sun rays

Displaying PNG Files

This stuff will move to IE page

Often the best choice but PNG files can display badly in IE6. The best solution I have found is DD_belatedPNG. This must be done correctly in order to maximise its benifits.

Only IE6

The only browser left that requires this PNG fix is IE6.

IE6 days are numbered, so the fix can be eliminated in the near future.
We must ensure that only IE6 loads the fix because it does slow down the page render process.
In addition to PNG files used in the img tag, CSS background PNG images will also need to be fixed.

Targeting IE6

Begin by using IE conditional comments to load an IE specific JavaScript file.

<!--[if IE]><script src="/j/ie.js?v=1"></script><![endif]-->

ie.js

This file sets flags for each version of IE using conditional JavaScript.

var
  ...
  IE6 = false,
  ...
;
/* JavaScript IE conditional comments */
/*@cc_on
  ...
  if (@_jscript_version === 5.6) {
    IE6 = true;
  }
  ...
@*/

Next, the fix is loaded only for targeted browsers and a callback, which fires once the library has finished loading, applies the PNG fix.

yepnope({
  load: {
    'ie': 'js!ielt7!/j/libs/DD_belatedPNG_0.0.8a-min.js'
  },
  callback: function (url, result, key) {
    if (IE6 || IE55) {
      DD_belatedPNG.fix(".png, img");
    }
  }
});

Notice that CSS selectors are passed to the fix. First, any element that needs a CSS background mage will be targeted with a class of png. Next, all img elements fixed.

Additional testing needs to be made with the code in ie.js but atleast it is functional currently. I believe we can drop IE5.5 from the code because it is long dead. Try js!ie6! and if (IE6){

PNG in Mark-up

Here is an example of a PNG file within an img tag.

PNG in CSS

This paragraph has a background PNG image.

Notes

Could follow Lazy Loading Images and Video or simplify it by using the same authors lazy=loader library, yall.js, which also has a polyfill, Polyfill.io
Responsive images (Following)
Responsive Image demos
Online Image Map Editor

Fluid Images

Table of Contents

Simple Fluid Images

Relative Images

Ideal Column Layout Images

Full Width Layout Images

Single Column Layout Images

zzzz

CSS background images

Full Background Image

Displaying PNG Files

Displaying PNG Files

Only IE6

Targeting IE6

ie.js

PNG in Mark-up

PNG in CSS

Notes