Responsive Images Feature Plugin Update

It’s been a busy week over in #feature-respimg world!

We are now using a display filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. on the_content to include responsive image markup, and are looking for feedback on the approach.

Why filter on display?

  • The sizes attribute describes the intended layout of an image to a browser before the page has been rendered, so that it can choose the appropriate image source. Since the theme knows the layout best, it should be able to filter the sizes values—something that isn’t possible if we save markup within the post content.
  • Ensures future compatibility if the user changes their theme (especially if they regenerate thumbnails) or if WordPress makes changes to the way it handles layouts.
  • Allows us to avoid accounting for the editing of image markup in TinyMCE, including directly through source, or dragging to resize.
  • Extends responsive image support to existing posts. This is the most requested feature, and a display filter is the only way—aside from bulk-modifying user content in the database—to provide this type of backwards compatibility.

Implementation

This first run uses the logic:

  • Match all images in content that include the uploads directory in their path.
  • Attempt to get the id and size from the default class attributes WordPress adds and pass those to our functions for generating srcset and sizes.
  • If this doesn’t work, try matching the image src to image paths in attachment metadata.

In our internal tests, the current filter added around 3ms per image, which will be offset in many contexts by the time saved not downloading larger than necessary image assets. That said, the performance is not ideal, and we’re working on improving it based on the conversation we had in our meeting yesterday.

How you can help

Please leave comments below or in #feature-respimg if you have feedback on the approach, suggestions for improving the filter, or if you test and can provide additional performance data.

Come get involved! Our meeting each week is on Friday at 19:00UTC in #feature-respimg.

#media, #respimg