Responsive Images Feature Plugin Update
It’s been a busy week over in #feature-respimg world!
We are now using a display filter on
the_content to include responsive image markup, and are looking for feedback on the approach.
Why filter on display?
sizesattribute 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
sizesvalues—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.
This first run uses the logic:
- Match all images in content that include the uploads directory in their path.
- Attempt to get the
sizefrom the default
classattributes WordPress adds and pass those to our functions for generating
- If this doesn’t work, try matching the image
srcto 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.