This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).
Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
Did you know Google runs a free an open image resizing service?
I did not! This could be quite useful. Seeing as it’s an https endpoint, it could be especially useful on https sites that pull images from http domains (and avoid those mixed-content warnings).
Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).
This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.
Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.
A great primer on using
picture. I think I’ll be referring back to this a lot.
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.
Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.
It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.
Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
The image-stitching algorithm is trying its best.
Literally a library of patterns: y’know, for tiling background images. Old school!
A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.
Scenes from a future Sweden.
Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.
A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.
Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute
WebKit nightlies now have support for
srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of
I’ve always maintained that the best solution to responsive images will be some combination of
picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by
picture, but the “retina” use case is better handled by
This is a really nice and simple idea: view photos from a specific place taken at a specific time. Voyeuristic fun.
A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.
Some thoughts (and code) on responsive images.
Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.
Chris takes a look at all the different ways you can use SVG today.
Slides, videos, and links from Paul’s presentation at the Responsive Day Out.
A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.
Funny and painful in equal measure.
Everything you ever wanted to know about using SVG today.
Communal satellite eyes. A Mac screensaver is also available.
Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.
A cute little service for mocking up pictures of your site being used on different devices. Just drag and drop a screenshot on to an image.
A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.
Gorgeous pictures from the Suomi satellite, just released by NASA
This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.
Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.
You’ve probably seen this already, but it’s really worth bearing in mind: when you’re scaling up JPGs for retina display you can safely reduce the image quality by quite a lot—to the point of getting the exact same file size as a higher quality image that’s half the size.
At least one of these will probably drive you crazy.
The kickass articles just keep on comin’. This one from Dave is a great overview of options for dealing with images in responsive designs.
A really great article from Paul that simultaneously takes a high-level view of the web while also focusing on the details. A lot of work went into this.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
The not-so-new-but-hella-fun aesthetic.
This looks like a really handy tool for reducing the file size of JPEGs without any perceptible loss of quality (in much the same way that ImageOptim works for PNGs)—available as a Mac app or an installable web service.
Yet another brilliant technique from Dave. The only caveat is that it uses background images rather than img elements, but it’s still very powerful (and very clever).
The Old Aesthetic. It’s eighties-tastic!
Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!
Compare the “view source” output with the generated source output to see it’s being interpreted.
Aegir’s portfolio is a thing of a beauty on every screen size.
Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.
Wilto does an excellent job of summarising the current state of responsive images, highlighting Florian Rivoal’s compromise proposal that combines the best of the picture element with the best of srcset.
Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.
A nice round-up of the issues around responsive images and their potential solutions.
If you’re adding some noise texture to your backgrounds, this little service might be handy. I usually base-64 encode these kinds of background images: it would be nice to see that added as an option here.
A run-down of the various approaches to the responsive images problem, concluding that this is something that needs to be solved in the image format.
Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.
A well thought-out evaluation on responsive images from Bridget.
Trent offers some excellent advice for dealing with the effects of the iPad’s retina display on your websites. That advice is: don’t panic.
An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.
Some practical advice for optimising your images on the web.
The Old Aesthetic.
This responsive image technique has a lot of moving parts but it seems pretty solid.
Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
From Kornel, the genius who gave us ImageOptim, comes another Mac desktop tool for optimising PNGs, this time converting 24-bit PNG to 8-bit with full alpha channel.
Elliot jots down some of the issues discussed at the responsive summit.
Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.
Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.
Here’s a new angle on tackling the responsive image problem: what if the file format itself could specify multiple image sizes?
There’s a W3C community group now for looking at the responsive images question.
A terrific article from Wilto detailing the thinking that went into the Boston Globe’s responsive image techniques and how browser pre-caching is now throwing a spanner in the works.
2951 images at 12 frames per second. Each image is the “related image” of the image before according to Google image search. The first image is simply a transparent PNG.
Some very interesting results from testing background image downloads contained within media queries or overridden with media queries: it turns out that, in iOS at least, the browser is getting smarter and smarter.
Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.
A visual representation of the design process.
This isn’t recommended as a robust means of delivering responsive images, but it’s still quite clever: using media queries to pass information to the server about the viewport size.
Jason takes a high-level look at tackling mobile-first responsive images (his next post will dig into the details). This is a really good summation of current thinking. Be sure to read the comments too: Andy chimes in with his experiences.
Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:
Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.
That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).
I wonder if it’s the use of class names or jQuery that allows it to work here?
If you’re trying to retrofit an existing desktop-centric site for small screens, this server-side image-resizing technique might be useful but is definitely not the right tool for a content-out, small-screen-first approach.
This is something we’ve previously had to build from scratch at Clearleft so it’s nice to see an off-the-shelf solution.
Here’s an approach to responsive images in the Expression Engine CMS …but I fundamentally disagree with the UA-sniffing required.
Once there’s better support for the CSS3 attr() function, this could be a nifty way of handling responsive images (although large-screen user-agents will download more than one image).
Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
Another approach to responsive images, this time using background images. The disadvantage is that large-screen devices will download both images. Still, pretty darn clever.
Josh explains the pros and cons of embedding background images in your CSS using base 64 encoding.
A lovely bit of experimentation with prime numbers and multiple background images.
Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.
Some of the more unusual moments in time that have been captured by Google Street View. There’s something very Gibsonian about this.
I may have to start using this for placeholder images—it won’t be distracting, right?
Some very smart ideas here for responsively enhancing image requests.
Look what Norm! built: it's another placeholder image service, but this is one that you can install and run on your own machine.
A clever technique to create the effect of multiple background images using the :before and :after pseudo-elements.
A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.
This will be very, very handy for my day-to-day front end development work.
Finding the sweet spot between realism and abstraction in interface elements.
I'm kicking myself that I didn't know about this little Fireworks trick.