responsive images

Official Responsive Images Plugin for WordPress

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 srcset attribute 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.

Pretty cool!

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

Andreas Bovens put together this epic recipe list for <picture> / <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.

Hassle Free Responsive Images for WordPress

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.

(more…)

Rundown of Handling Flexible Media

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.

(more…)

Which responsive images solution should you use?

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.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag