Serving dynamic images in responsive web design

by graham

Until the proposed picture element or an alternative is defined there are various shims used to display images depending on the size of the device used.

Several JavaScript based methods have been created, such as Scott Jehl's Picturefill but these create multiple server requests (in the Picturefill demo the smaller mobile image is loaded and then the larger version) which doesn't reduce bandwidth, even if the first image request is small, and can lead to the page content jumping as the initial content is loaded.

While it may not be suitable for every project, here are two options for implementing images on responsive design sites:

Use SVG

Images in responsive sites should be scalable if they are inline content, and this can be solved using SVG. Displaying different images or cropping images will usually mean the image is decorative rather than content, which moves it into the realm of CSS.

Add decorative images via CSS

Removing these images from the html mark-up and img element means you will have better control over the content, can reduce the server request to one and not have to rely on JavaScript. This is also suitable for some CMS driven sites, where the styles can be created dynamically and imported into the main style sheet.

This keeps the code in line with the HTML5 specification, which states that images that are purely decorative should not have any alt text and be included with CSS. Where images have some relevance to the content or is used to enhance visual appearance a purely CSS approach can be used, as long as the relevant content is in the HTML

html

<div class="image image-3245"><span class="alt">Image alt text</span></div>

The mark-up uses non-specific identifiers and contains alternate text if the image doesn't load or the CSS fails.

 

CSS

Modules

.image {

       display: block;

       background: transparent no-repeat 0 0;

} 

.image .alt {

       position: relative;

       z-index: -1;

} 

The initial image class defines the reusable module for the content, this will be the behaviour applied to all images. Alt text (if needed) is hidden from view using z-index when the image div has a background.

Desktop layout

.image-3245 {

       background-image: url("http://dummyimage.com/600x400/474447/fff");

       width: 600px;

       height: 400px;

}

The image-3245 class is the unique identifier for the image. As it isn't named to a specific image we can change the image file without having to revisit the mark-up.

This will show the standard image for the site content, allowing for legacy desktop browsers.

Media queries

Depending on your site break points set the image for each screen size. In the example screens below 670 pixels use a 320 pixel content width. 

/* first break point in grid */

@media only screen and (max-width: 990px) {    

       .image-3245 {

              background-image: url("http://dummyimage.com/300x200/474447/fff");

              width: 300px;

              height: 200px;

       }

} 

/* second break point in grid and high res image */

@media only screen and (max-width: 670px) {

       .image-3245 {

              background-image: url("http://dummyimage.com/150x100/474447/fff");

              width: 150px;

              height: 100px;

       }

}

/* second break point in grid and high res image */

@media only screen and (max-width: 670px) and (min-device-pixel-ratio: 2) {

       .image-3245 {

              background-image: url("http://dummyimage.com/150x100/474447/fff"); /* link to high res image */

              width: 150px;

              height: 100px;

       }

}

When the page is loaded, a single image request is made depending on the device size. When the page is resized the image is changed (without the need for JavaScript).

view demo ›

Comments

Comments are closed