Tables as Responsive Image Containers

If you’ve been following the latest chaos in the responsive image debate, you may know that there is a battle afoot between supporters of src-n, srcset and picture. If you don’t believe me, I refer you to this WHATWG post, a polite round-up of today’s bar fight. Key is that it links to multiple discussions in its round up:

[1] http://tabatkins.github.io/specs/respimg/Overview.html
[2] https://groups.google.com/a/chromium.org/d/msg/blink-dev/tV3T1wHuXqE/SvWKxIyG6IIJ
[3] https://lists.webkit.org/pipermail/webkit-dev/2013-October/025763.html
[4] https://lists.webkit.org/pipermail/webkit-dev/2013-November/025809.html
[5] https://bugzilla.mozilla.org/show_bug.cgi?id=870021

Granted, picture has been mostly abandoned by the Responsive Images Community Group (RICG), but after today’s fight it looks like it might have legs again.

All of these, however, neglect a responsive image solution that we’ve had since 2005: tables.

Consider the RICG logo:

And consider this version encoded as a table, with none of those troublesome pixels:

If you look through the Use Cases and Requirements for Standardizing Responsive Images, you’ll see this approach satisfies none of the requirements and is made of incredibly complex code. This, in effect, guarantees employment for responsive web developers for years to come. You can make your own tabled images, though you’ll want to tweak the code a bit.

I tried to make this clear earlier today:

Guys! Stop fighting about resp image syntax (https://t.co/kE6T7Nv5ne)! I found a solution! http://t.co/yBkji15Yyk Backward compatible!

— Adrian Roselli (@aardrian) November 8, 2013

I can only hope this example sets us all on the right path.

Update: November 14, 2013

If you came here actually looking for something useful about the status of responsive images in general, check out Mat Marquis’ responsive images standings cheat-sheet, which he plans to update regularly.

Update: January 2, 2013

Other responsive image options:

• From Bruce Lawson.
• Over at Medium.

Update: April 10, 2018

Don’t feel limited to static images, here is an animated image using CSS and a table:

See the Pen CSS-only animated gif (Brent Rambo) by Danny Joris (@DannyJoris) on CodePen.