Responsive Images: Merge Proposal

The RICG WordPress Team is proposing a partial merge of the RICG Responsive Images plugin into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in version 4.4. Specifically, we are proposing to add native srcset and sizes support to WordPress (ticket #33641).

Purpose

As of today, the average web page currently weighs over 2 MB with the majority of those bytes being attributed to images. Screen density and display sizes continue to increase and site owners are including larger image assets to keep up, causing slower page load times for people on smaller/older devices and on slower/expensive networknetwork (versus site, blog) connections. We have the opportunity to make a huge impact on the ~25% of the web that runs on WordPress by adding responsive image support out of the box so sites can serve appropriate sizes images to all users.

Project Background

The initial plugin idea was conceived by Tim Evko and Chris Coyier in April of 2014 before becoming the basis for the official WordPress implementation from the Responsive Images Community Group last November. Since that time, the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party has been downloaded over 40,000 times and is actively installed on over 10,000 WordPress sites. We’ve gotten input from many WP core committers during regular meetings in the #feature-respimg slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, and received guidance from Mat Marquis and other members of the RICG—including the same people who wrote and are implementing the responsive image HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. spec.

Implementation details

First off, the plugin does not add any UIUI User interface or adminadmin (and super admin) settings to core. 🙌

The plugin adds srcset and sizes attributes to images by extending wp_get_attachment_image(), which includes all post_thumbnails, photo galleries, and any other images that use wp_get_attachment_image() to build the markup.

For images embedded in post content, we have opted to add srcset and sizes 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. rather than writing those attributes directly to the database. You can read more about that change in our previous project update. We’ve improved the performance of the display filter and believe it’s acceptable, but are still working to improve it further.

In all cases, we have chosen to make use of the native intermediate sizes functionality in core to create alternate image sources for our srcset attributes rather than adding additional image sizes specifically for our use. This includes any user defined image sizes as long as they are resized versions (i.e., soft crops) of the file defined in the src attribute. Themes and plugins can also filter the value of the srcset attribute through included filter hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same..

For the sizes attribute, we have chosen to use sizes="(min-width: {img.width}px) {img.width}px, 100vw" as a sensible default. However, this default value can and should be filtered by themes to meet their layout needs.

Based on community feedback, we are choosing not to include a polyfill for non-supporting browsers directly in core. However, we would recommend that themes make use of Picturefill in order to provide responsive image support to the broadest set of users.

While the plugin also includes experimental image compression settings for the Imagick editor (ticket #33642), we are not proposing that those enhancements be included at this time.

Housekeeping and next steps

This is a proposal and is subject to revision based on your feedback. If you haven’t already tried out the plugin, please download and install it from WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. You can review the current code and leave feedback at the project’s GitHub repository or in #feature-respimg on Slack.

Many thanks to @mike for shepherding the project during this release cycle and @azaozz for his performance and security feedback. We’ve reached out to the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team and received no objections, and we have reached out to @drew who will review the docs once a core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. is ready.

#media, #respimg