Cloud Four Blog

Technical notes, War stories and anecdotes

Responsive Images Audits

When you start incorporating the new responsive images standards across your site, the task can seem daunting. How do you know which standards to use and where? How will you maintain the new markup and image sizes?

We have found that a good first step is a responsive images audit.

Much like a content audit, a responsive images audit is designed to help you take stock of the images you have on your site and how they are being utilized.

The output of the audit is often a spreadsheet describing different types of images, the templates they are used on, and what solution you plan on implementing for those images.

Sample questions to ask about images

Here are some sample questions you should consider asking about the images on your site:

  • Where are the source files and what is the process for publishing?

    This may seem unrelated to the technical questions of how the responsive images will be implemented, but my experience has been that knowing where the images are coming from, where they are stored, and if anyone needs to modify the image before it is posted can dictate what solutions are practical.

    Consider this your reminder that people are still involved and you need to understand the people part first.

  • Is there a big difference between smallest and largest image size?

    We had a client who had badges for awards and types of recognition. These badges were displayed at a small size even when the page was large. We found that even if we had the largest size possible at retina density, the images were about same in file size. So why provide multiple image sizes?

    In addition, the images came from third parties and they didn’t have the source which was another good reason to simply use the largest image and have the browser resize it.

  • Are the images resolution switching or art direction?

    Knowing which use case you’re solving for will help determine which syntax makes the most sense.

  • Can we use SVG?

    If the images will work well as vector, then we may be able to use a single image source.

  • Are there representative images we can use to find sensible jumps in file sizes for our image breakpoints?

    Picking responsive image breakpoints remains a tough problem. It can be easier if all the imagery we’re using are things we control and have a distinct style.

    If there are representative images, then we can save them at various sizes in the range they will be used in the template and make a determination of how many image sources we need to provide.

    In situations where images come from user generated content, it can be harder to find representative images from which you can determine image breakpoints. In that case, we know we’re going to have to make an educated guess about what will work.

  • Do we want to support multiple image formats?

    Perhaps we’re using a lot of alpha channel images and want to provide JPEG 2000 for those whose browser supports that image format. Or perhaps we want to provide WebP alternatives.

    If we determine there is a good reason to do this for a set of images, then that will mean we want to use the <picture> element even if we aren’t doing art direction.

Sample responsive images audit results

We conducted a responsive images audit for a large site. The end result was a spreadsheet that looked like the table below.

Image Description Format Size Markup Notes
Property logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes.
Partner logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes.
Iconography SVG <img>
Brand logos PNG8 (future SVG) regular, Retina <img> Assumes little variance between the wide and small screen image sizes.
Property photography JPG 
(conditional WebP) Dynamically resized and compressed Non-art-direction <picture> Templates specify breakpoints.
Promo images w/ text 
(art direction) TBD <picture> Content producer defines images and breakpoints in CMS.

We did this audit a couple of years so we might have different answers today than we did then.

Also, it is worth noting that the property photography represented over ninety percent of the images on the site. We have found this to be common on the sites we’ve worked with.

Combine the audit with image services

Once you have your audit complete, you need to combine it with image resizing and processing services so you know how you will implement what your audit recommended. For more on that, check out:

When to use <picture> for resolution switching

I wrote recently about why you shouldn’t use <picture> for responsive images most of the time.

In short, my argument is that most responsive images fall under the resolution switching use case and that <picture> is best used for art direction.

There is one resolution switching use case where <picture> makes sense—when you want to provide different file formats using the type attribute.

If that is the case, then you should use <picture> without the media attribute.

Most of the syntax examples for <picture> include the media attribute, but it isn’t required. You can do something like:

<picture>
   <source type="image/svg+xml" srcset="logo.svg" />
   <source type="image/webp" srcset="logo.webp" />
   <source type="image/png" srcset="logo.png" />
   <img src="logo.gif" alt="Company logo" />
</picture>

That is a simple example with a single file per source element, but there is no reason you can’t use the full power of the srcset attribute to provide multiple files per file type. You can even add the sizes attribute to give you more control.

So long as you don’t use the media attribute, you’re still giving the browser the information it needs to pick the right image source without dictating to it that it must use a specific one.

And unless you’re doing art direction, you should be striving to provide the browser with options, but letting the browser pick which source will work best.

(Thanks to Kevin Lozandier for reminding me that I need to write this up, and to Brett Jankford and Wesley Smits for raising this point in the comments on my previous article.)

The Forgotten Responsive Images Spec: image-set()

Now that responsive images have landed in Chrome and Opera, I’ve started working on a flowchart to help people decide how to use these new features.

This work led me to wonder what ever happened to the image-set() specification.

For those who haven’t heard of the image-set() specification, it was a precursor to srcset which is now part of the responsive images specification. It was originally proposed in February 2012, and WebKit-based browsers shipped prefixed support for it in August of the same year.

The are a few differences between srcset and image-set(), but the biggest difference is that image-set() deals with CSS images whereas srcset is an attribute on the <img> element.

How we forgot about image-set()

In 2012, the image-set() spec was still under development and we were cautioned against using it at the time. Because media queries were available in CSS, handling CSS images in responsive designs wasn’t as difficult as handling responsive images in HTML itself.

So the Responsive Images Community Group focused on how to solve the <img> problem. And I gradually forgot about image-set() thinking that it was moving forward in the CSS Working Group and browsers.

It seems that I may not have been the only one who forgot about image-set() because despite being two years older than <picture>, it is still only supported under prefixing in Chrome and Safari.1 Worse, it isn’t on the roadmap for either Internet Explorer or Firefox.

Why we need image-set()

We need image-set() for the exact same reasons we need srcset and sizes. Whenever we are dealing with a CSS image that fits the resolution switching use case instead of the art direction use case, we should be using image-set() instead of media queries.

In fact, you can take nearly everything I wrote in Don’t Use <picture> (most of the time) and substitute image-set() for srcset and media queries for <picture> and the same logic applies.

We need image-set() for resolution switching because it gives browsers the choice of what size image source will work best. And in cases where all we are dealing with is resolution switching, the browser is better informed than we are as web authors.

Help get image-set() into browsers

We need your help to make sure that image-set() is implemented in browsers. Help us by voicing your support and ask browsers to prioritize this feature:

Image-set() is a key piece of having a comprehensive responsive images solution in browsers. It has been languishing too long. Let’s get it back on track.


  1. Eugeny Vlasenko built a nice test for image-set() as well as publishing the results of testing a bunch of browsers and their support of the spec.

Image Resizing Services

Responsive images are landing soon and many organizations are looking for ways to resize images. Thankfully, there are a number of startups, established companies, and open source solutions for image resizing.

I’ve pulled together a spreadsheet of the image resizing services to make it easy for people to explore their options.

Figuring out what to include and what to ignore was difficult.

For example, GD and ImageMagick are available on many platforms and you could build your own service using them. Many CMS tools have built-in image resizing tools.

I focused on services and software that provided a level of abstraction (e.g., you can ask for image resizing via a URL) or were specifically focused on responsive images.

Does the image resizer try to detect the correct image size and would that be desired?

The spreadsheet has a column for detection to indicate whether or not the image resizer tries to automatically detect what size of image to request or deliver.

Detection comes in two forms. One is using the user agent string to look up information in a device database. The other uses JavaScript to either find the same information or find the exact size of the image element in the page.

With the responsive images specification landing in browsers soon, I’m not sure if detection is desirable. The benefit of srcset and sizes is letting the browser choose what source is best.

What other image manipulation is offered?

Many of the image services offer services that can crop, filter, and otherwise manipulate images. Some even add things like focal point or facial recognition.

Performance is the missing column

As long as you’re centralizing images processing, you should try to find a service that will compress them as much as possible and provide other performance benefits such as caching and CDN support.

If I were evaluating services, I would be looking for these things, but comparing image compression is tough because it is a balance of raw file size and image quality the requires a judgment call.

Cost is a column I didn’t want to add

When I published this spreadsheet originally, I got a lot of people asking for column to compare price. I resisted adding it until recently. And I only report on whether the service is free or paid.

Comparing prices in the spreadsheet is pointless. Every service that charges varies pricing based on the volume of images. The prices will change in the future, and I don’t want to maintain that information. And the services are different.

I encourage you to explore the services themselves. Some are quite reasonably priced and the expensive ones offer a ton of features.

Anything missing?

So take a look at the list of image resizing services. If you see something that is missing, please let me know.

I hope you find this useful.

Fixed and inflexible

Even before smartphones came along and dashed any hope for a 960-pixel-wide web, designers and organizations have struggled with the challenge of prioritizing and composing content that scrolls. Our screens act like windows to content of variable size and scale, demanding an awful lot of abstract thinking to design for. Sometimes we’re successful, revising content, designing modern day deliverables and embracing compromise like we know in our hearts we should. Other times, we convince ourselves that we can predict this inherently unpredictable medium, making decisions that age quickly and poorly by prioritizing the window instead of the content.

Most recently, I’ve noticed a sharp uptick in the number of requests I receive to explore fixed-position (aka “sticky”) interface elements. Fixed elements are positioned relative to the viewport instead of the page, allowing them to maintain position even as the document scrolls. Some of the most popular sites on the web employ “sticky” menus, and with good reason… when applied thoughtfully, they can yield substantial usability improvements.

But when fixed positioning is used without care, restraint or precision, it can have disastrous consequences. Here are some of the reasons why.

We can’t predict how much space we have.

Our industry has a nasty habit of quietly embracing display resolution “standards” that are mostly fantasy… design decisions are a lot easier if you assume all devices are 320 pixels wide by 480 pixels tall (and users never turn them sideways). The inconvenient truth is that display resolutions vary wildly. Each additional “sticky” element increases the risk of obscuring the page content mostly (or entirely) for some users… in which case the page might as well not exist at all.

We can’t get those pixels back.

Fixed elements aren’t just “prominent,” they photobomb the interface, robbing focus and attention from what really matters — the content! Before you make something “sticky,” consider reevaluating the element’s importance relative to the entire page (instead of on its own merits).

It makes scrolling tougher.

As evidenced by the years-long debate over “The Fold,” the fear that users won’t know (or lack willingness) to scroll persists to this day. When that fear is real, then fixed positioning is a godsend, ensuring the visibility of content regardless of scroll position.

But those fears don’t mesh with reality very well.

Today’s users are so familiar with scrolling that most mobile browsers will hide the scrollbar entirely. “Sticky” elements complicate matters by reducing or obscuring the scrollable area, forcing the user to swipe more carefully to avoid accidental actions.

Ironically, our desire to alleviate the supposed “difficulty” of scrolling may make scrolling that much more difficult!

It can slow everything down.

Users care about speed. But speed isn’t all about navigation… there’s also the overall speed of the experience. Fixed positioning can result in strange browser-specific quirks or even costly repaints, potentially counteracting any efficiency you might have gained.

It may not actually work.

Mobile websites share a lot of their design vocabulary with native mobile apps, where fixed headers, menus and tab bars are commonplace. This makes it easy to forget that fixed positioning as we know it is relatively new to the web, and often unreliable.

“Sticky” headers, footers and navigation flourished in the 1990s, often implemented using frames. When frames fell out of fashion in the early 2000s, most browsers did not support fixed positioning using CSS. In the absence of frames, position: fixed or consistent, intuitive JavaScript, fixed positioning became just another discarded Web 1.0 trend… at least until CSS support arrived in IE7.

But smartphone browsers have historically not supported position: fixed as predictably as their desktop counterparts. It was entirely absent from mobile Safari prior to iOS5, and largely unusable in Android browsers prior to Honeycomb. To this day, behavior can be inconsistent across platforms. To quote Brad Frost in his excellent post on Fixed Positioning in Mobile Browsers, “‘support’ isn’t exactly binary.”

Since you can’t rely on support for fixed positioning, you’ll need to make sure your experience works without it anyway. Which begs the question…

Why position: fixed at all?

I believe there are plenty of interface elements that benefit from fixed positioning, provided they follow a few best practices:

  • The “sticky” element is clearly more important than everything else on the page.
  • The footprint of the element is modest enough that it does not obscure too much of the page content (even in landscape).
  • Any efficiency gained from the element’s consistent availability is significantly greater than any lost as a result of the element’s inclusion (due to performance, obscuring of page content, etc.).
  • There should only be one “global” (navigation, tab bar, etc.) and one “temporary” (modal, dialog, etc.) fixed-position element on-screen at any one time.
  • Fixed positioning should always be an enhancement. Your interfaces should never rely on it.

If any of these considerations completely upend your design aspirations, you may want to rethink your user experience with less rigidity. As John Allsopp so aptly put it fourteen years ago, “The journey begins by letting go of control, and becoming flexible.”