Cloud Four Blog

Technical notes, War stories and anecdotes

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.)

We’re Hiring: Front-end Designer

We’re growing! We’re searching for an enthusiastic and talented front-end designer to join our small team in downtown Portland.

We believe good designers are also educators and explainers. You should be comfortable leading design discussions and facilitating workshops with clients to gather requirements and establish direction.

While you’re comfortable with wireframes and comps, you’re also fluent in the language of the web and often prefer to go from sketching to designing in the browser. You’ll need a passion for HTML and CSS to build the complex responsive designs we specialize in.

Nearly every project we undertake we do as a team. We prefer frequent iterations and working collaboratively with our clients on designs. We need people who have empathy and communicate well.

We provide a positive and creative workplace where people can do their best work. We value the unique contributions of every member of the Cloud Four team. We welcome and seek diverse opinions and backgrounds.

We’re not interested in startup insanity. We support our families with reasonable hours, flexible schedules, and the ability to work from home when needed. We offer benefits including medical, dental, vision, and IRA.

We’re a small agency with big aspirations. We started Mobile Portland and host a community device testing lab. We speak at conferences and participate in web standards setting. We like exploring the frontiers of what’s possible on the web and sharing what we learn.

If this sounds like you, please send your resume and a cover letter explaining why you’re the right person to join our team to jobs@cloudfour.com.

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.

Project Management is BS: an inspirational meditation for modern PMs

This past week, I had the luxury of attending the Digital Project Management conference in Austin. If you are a project manager and you haven’t heard about this group of awesome digital PMs, you are missing out. The first time I attended one of their events, I thought, finally! These are my people! People who actually do what I do at Cloud Four. My tribe.

What do I do, every day? What do digital project managers actually do? It’s mundane stuff, folks. In any given day, I write a ton of emails and Basecamp threads, review lists — many, many lists, in many different forms. I pester people in every way imaginable. (Letters. I’ve written actual letters at times.) I listen, a lot. I run conference calls, I Skype, I Hangout, I Slack, I SIP into meetings. Today, I slacked, then hangout, then called the same person in a 10 minute period. This is not glorious work.

It occurs to me frequently that this is work that really anyone could do. In fact, the tools we use are often designed so that anyone on my team is empowered to use them. 

Want to schedule a meeting? Great! Lucid Meetings makes this really simple. It even walks you through agenda creation and attendee selection! (You know you need an agenda for every meeting, right? Make them good ones, too.) Want to ask the client a question? Perfect! Hit them up in Slack, or Basecamp. You don’t need me.

Sometimes it feels like the work we do is complete BS.

This is not the most encouraging thought to be having about your chosen career.

But here’s the thing: the reason we have project managers at all is because most people are not thinking about these things. Your project team is so heads down on the work they are doing that they don’t think about the overall project progress, or the political implications of asking a certain question, or just the right way to deal with that nagging change request. They don’t worry about the overall budget impact of that bug that was just found in QA, or how the hell you are going to schedule one extra sprint when you’ve got two other projects starting that same week.

They just don’t. But YOU do. And YOU are really freaking good at it. 

[cue the inspirational music]

YOU wake up in the middle of the night, wondering why that one stakeholder didn’t seem engaged in your kick-off meeting that day.

YOU can’t shake that feeling that something isn’t right about that call you just had with your developer. She didn’t really say anything, but you know something is off and how to suss it out. 

YOU know exactly how to load your project teams to maximize efficiency without overloading them. 

YOU can evaluate a budget overage, report it to the customer, and offer alternatives that are actionable and clear.

YOU inspire and motivate your team to keep on keeping on. 

YOU see patterns of inefficiencies in your organization and have ideas on how to address them. 

And this is not just about making sure that someone (anyone) is tasked with these types of things. It’s making sure the right person is leading it.

This stuff is our DNA. And it’s not mundane or ordinary. It’s essential, technical, precise, and difficult work. It’s hard and soft skills. It’s invisible, yes, but like my ever-so-talented colleague Tyler Sticka described it, we’re like the project’s nervous system. The developers, designers, and other project team members are like arms and the legs, moving the body around, but they’d be paralyzed without a good PM to make sure signals are going where they need to be.

Like Nancy Lyons said in the closing DPM keynote, “We are change-makers, we are thinkers, we are do-ers.” 

That’s some really cool, important BS, if you ask me.

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.