Teaser text: Adding responsive image support to WordPress, type-switching, and some housekeeping
Let’s talk about WordPress. According to some websites that I just found, the venerable pile of PHP and MySQL that we call “WordPress” serves up 1 in every 5 websites and runs more than half of all websites that use a CMS.
So it’s high time that WordPress had proper responsive image support. Tim Evko wrote a fine blog post about the efforts that he, along with our illustrious chair and a few members of the WordPress core team, has made to create a drop-in responsive images plugin for WordPress. The plugin can be had here and its source lives here. It does the hard work of creating a range of source files from a single high-resolution image and marking them up with srcset and sizes. If you want to art-direct your WordPress-hosted images, you’ll need to use picture; as luck has it, Rory Douglas wrote a thing about how to do that last week, too.
I love JPEG! Mozilla likes it too. The 22-year-old format recently received the strangest, highest compliment I have ever heard an engineer give when a researcher for the (awesome, exciting, in-development) Daala video standard called it “alien technology from the future.”
But, while JPEG was the first image format to dominate the web, it will not be the last. New formats are coming; new formats are already here. picture, source and the type attribute let us use them now, while providing fallbacks for non-supporting browsers.
Jason Grigsby posted a thing about picture and type-switching on the Cloud Four blog this week; Zolton Dulac wrote a huge article detailing the different formats currently on offer, when you should use each, and how to serve them to as many users as possible without breaking things for older browsers by using Modernizr and Picturefill. Read! Implement!
A load’o’links:
- Bruce Lawson wrote a blog post in preparation for an upcoming talk in Barcelona (next month at the Awwwards conference) which answers everybody’s first question about responsive images: why a markup solutuion? Why not JavaScript or CSS?
- Art direction can be a hard use-case to understand if you value content parity. This post about adapting album art for cassettes helped me wrap my mind around it back in the day; I recently stumbled across an exploration into responsive logos that hit those same, sweet, “art direction is not only valid — it’s vital” notes for me.
- Hey did you know that caniuse started tracking CSS image-set a month or two ago? I sure didn’t!
- HTML5Test – the website that tests you how well your browser supports HTML5 – added responsive images feature tests last week.
- Are you in Oxford, UK? Go see Yoav talk about responsive images at SmashingConf!
There was some talk in the RICG chat room the other day about reducing the frequency of these newsletters – maybe releasing them once a month instead of once every two weeks. We figure we should at least ask you for your opinion before making a change, so I set up a one question survey which does exactly that. If you have a second, let me know — how often do you want these newsletters in your inbox?
See you in a couple of weeks!
—eric