Proposal: Add a dominant color background to images.

Add a dominant color background to images

Contributors to this doc: Paul Bearne, …

  • CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.: Proposals, Images
  • Tags: feature projects, performance, Images

This proposal seeks to integrate dominant color background for images into WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., targeting the WordPress 6.1 release.

Context

Continuing WordPress efforts to improve performance, members of the performance team have created a feature that identifies the dominant color of an image and adds it as the CSSCSS Cascading Style Sheets. background to the image tags. This gives the viewer/user a visual placeholder while the image is loading, resulting in an improvement to the perceived performance and user experience.

The feature was originally proposed and developed as a module in the Performance Lab plugin.

Project update

Development of the feature has been ongoing in the Performance Lab plugin repository on GitHub, where it has been implemented as the Dominant Color module, available since 1.2.0.

The recently released version 1.3.0 of the Performance Lab plugin contains the module in a state that is ready to merge into core. You can continue to support this effort by testing this version of 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. For new installations, the Dominant Color module should be enabled by default. You can check that and activate the module under Settings > Performance.

The team is currently migrating the module code into WordPress core patches in 2 TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets:

Any feedback on the tickets or reviews on the core patches would be greatly appreciated.

Implementation details

WordPress calculates the color and determines transparency as part of the image upload. This information is stored in the image metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. The process of computing the color and transparency adds a little overhead to the image uploading process, so testing this specifically and potentially optimizing it further is crucial for this feature.

When an image with color and transparency metadata is placed in the frontend, a CSS variable is added to the `image` tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.), and a single line of CSS is added to the page `head`. 
We encourage you to test this module (and others) from the Performance Lab Plugin, report any bugs in our GitHub repository, or contribute with fixes and ideas. You can also share any feedback, concerns, or questions to improve these features further in the comments.

Props to @shetheliving @flixos90 for review and proofreading.