Jason Grigsby just wrapped up a 10-part
series on responsive images. There is a table of contents at the bottom of each post for jumping around.
Remember Tim Evko's guest post on responsive images in WordPress? Here's some news on that:
- It's now the official WordPress plugin of the Responsive Images Community Group (RICG). It's on on GitHub here and in the Plugin Directory.
- It now uses the more appropriate
srcsetattribute instead of
<picture>, since it just does resolution switching.
- It's endorsed by the WordPress core team, on track to be a "featured plugin" in the next release, and may ultimately end up in core itself.
If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the
srcset attribute on the
<img />. Gaze upon this easy syntax:
Andreas Bovens put together this epic recipe list for
<img srcset>. There are four scenarios:
- Do my image sizes change depending on my responsive design rules?
- Do I want to optimize for high-dpi screens?
- Do I want to serve images with different mime types to browsers that support them?
- Do I want to serve different art depending on certain contextual factors?
Then Andreas shares what the code would look like for all of those plus any combination of them.
Latest Update: The plugin has been merged into WordPress core. So if you're running WordPress 4.4 or newer, you automatically have this.
Update: The plugin created in this article has moved here and now uses the more appropriate
srcset attribute. It's the official WordPress plugin of the Responsive Images Community Group and is endorsed by the WordPress Core Team. It sounds likely that this will make it into WordPress core eventually. Pretty cool!
The following post is guest co-authored by Tim Evko (@tevko). WordPress has a built-in media uploading system. When you upload an image, it automatically creates and saves different versions of it. Tim will show us how we can customize and exploit that ability to help us with responsive images in content.
A guest post by Parker Bennett where he explores another responsive images technique. This time using media queries and multiple background images in CSS.
When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an
<article></article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That's not too hard. But media - images, video players, and audio players - demand a bit more attention (e.g. a video that sticks off the edge of the screen == bad). This post is to round up the methods of handling that.
Mat Marquis keeping us up to date on the responsive images hot drama. Good reminder at the end about not picking sides.
There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.
The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions.