Skip to main content

Updating responsive image guidelines in preparation for AEA Austin

By Jason Grigsby

Published on September 16th, 2014

Last year, I wrote 8 Guidelines and 1 Rule for Responsive Images based on some consulting work we had done for a client with over 800,000 images on their site.

In preparation for An Event Apart Austin, I decided to revisit the guidelines and see if they still applied in light of browsers implementing the picture specification.

In particular, I was curious how much caution we should take when implementing solutions for responsive images. Last year, I wrote:

The one and only rule for responsive images: Plan for the fact that whatever you implement will be deprecated

Is that rule dated with the browsers standardizing on the picture specification?

I asked for some feedback from the responsive images community group on the risk of the specification changing and how much we should be hedging out bets.

Simon Pieters, who works for Opera, wrote:

It is also normal that the first shipping implementations are not perfectly compliant with the spec. For instance they might have implemented a slightly out of date algorithm and missed that something was changed, or simply have bugs. Then it is fixed in a future version and that might break your code if you only tested in one implementation.

This is no different from any other feature that is shipped on the Web. To avoid issues, test in multiple implementations and validate.

| Should we still be hedging our bets a little?

No, that’s not necessary.

Now, a couple of people on the list responded that they have a large set of images on the sites they manage and centralizing image handling and markup still made sense. So perhaps it isn’t a rule, but still an idea that you should consider based on the scope of the site and the number of images involved.

I’ll leave the final word on the matter to Marcos Cáceres who played a critical role on the picture specification and works for Firefox, reassured me with these words:

Once it gets into the wild and people start using it, it can’t change. Thems is the golden rule of the Web.

Spec is stable and the browsers are coming this month – go forth and <picture> all the things! Make the web beautiful again 🙂

As Marcos says, go forth and <picture> all the things!

P.S. If you’re interested in more on this topic, join us at AEA Austin or AEA Orlando. You can use discount code ‘AEAGRIG’ to get $100 off your registration. I hope to see you there!


Justin Avery said:

It's probably not part of the rules but I think that images should be optimised as much as possible. This isn't necessarily focussed on running it through a variety of cropping or compression methods but instead looking at other ways to improve the users experience.
Things like
1. Is the image actual content (Flickr, Facebook) or is it supporting the content (BBC, Guardian), or is it just there to look pretty (Medium). If it's the latter then lazy or conditionally load that.
2. Do you really need a 2x, 3x, 4x sized images for retina. That is an bandwidth overhead luxury. A 1x or 1.5x image does the job of a 3x image, just not quite as crisply (which may be required sometimes, but often it's not).
3. Focus on things you can do to the image to improve it's purpose as well as it's performance. I wrote up a few ways to achieve this for images with a particular focal point.

Good luck with the talk, I can't make the conference so will have to wait for the videos to come out.