Responsive Images

Images

Responsive images are one of the huge challanges facing modern web design today. There are many competing standards of which Picturefill looks the most promising at the moment. The biggest drawback of Picturefill's picture element besides depending on JavaScript is that it incorporates media queries into HTML markup.

As Awesomeness centrally manages breakpoints within SASS, using picturefill would make our projects less flexible and harder to maintain. That's why we chose to use a pure CSS solution to display responsive images, unfortunately having to replace img with div tags and thus potentially hurting SEO performance and accessibility. To make up for this, add role and aria-label attributes to the div tag.

Example

If you are using a desktop browser, please resize your browser window to see the different image sizes in action.

Imports

  • SASS:
    @import "base";
    @import "imports/modules/responsive-images";

HTML

<div id="my-oreo-cake" class="responsive-image" aria-label="this is a yummy oreo cake" role="img">
        <div class="responsive-image__inner"></div>
</div>

SASS

The real magic happens in SASS, where the responsive images are defined. Breakpoints are optional and can be ommitted for the default image. They use the syntax of Breakpoint SASS, so it's easy to define minimum and maximum breakpoints.

@include responsive-image("img__url", img__width, img__height, breakpoint);

For our example above we use the following code:

#my-oreo-cake
{
    @include responsive-image("/img/oreocake.jpg", 400, 249);
    @include responsive-image("/img/oreocake--medium.jpg", 750, 467, $large-width);
    @include responsive-image("/img/oreocake--large.jpg", 1024, 638, $giant-width);
}

To optimise download performance, Awesomeness only loads the image defined for the currently visible viewport.

Captions

You can easily add captions to your responsive images.

Imports

  • SASS:
    @import "base";
    @import "imports/modules/responsive-images";

Code

<div id="my-madleines" class="responsive-image" aria-label="These are tasty madleines" role="img">
    <div class="responsive-image__inner">
        <div class="responsive-image__caption">
            <h3 class="responsive-image__title">Madleines</h3>
            <p class="responsive-image__body">Maybe just one</p>
        </div>
    </div>
</div>