Test page to experiment with WordPress maltreatment of colour information.
Updated 6th may 2025
This page should render the colour blobs below the same as on the Colour management test page.
Because of the way WordPress works, it may or may not render the same way, depending on the size of the image.
When an image is uploaded to the Media Library, often multiple lower res copies are created:
In this case, I uploaded a file “PrimariesAdobeRGB.jpg”, which has profile Adobe RGB embedded. This is uploaded unaltered (marked with an arrow) to a location such as “http://simongarrett.uk/simon/wp-content/uploads/2021/02/PrimariesAdobeRGB.jpg“. The Media Library also created three lower res versions, shown immediately above. To save space, it removes all metadata, including the colour profile from these lower-res versions! These files have no metadata, so browsers will (or should, according to WWW) interpret them as sRGB. So why didn’t the Media Library convert them to Adobe RGB?????? I could guess, but to write it down would be gross defamation to the WordPress developer team!
The Image Blocks below are displayed with html code like:
<img ... src="http://simongarrett.uk/simon/wp-content/uploads/2021/02/PrimariesProPhotoRGB.jpg" ...
srcset="https://simongarrett.uk/simon/wp-content/uploads/2021/02/PrimariesProPhotoRGB.jpg 1024w, https://simongarrett.uk/simon/wp-content/uploads/2021/02/PrimariesProPhotoRGB-300x200.jpg 300w, https://simongarrett.uk/simon/wp-content/uploads/2021/02/PrimariesProPhotoRGB-768x512.jpg 768w"
...>It gives the source (“src” tag) as the original file (with the profile), but with alternatives (“srcset” tag) that can be used by the browser, depending on the size of the display window. These alternatives have no profile embedded.
What happens depends on the browser. As of today (6th May 2025) some browsers note the src and srcset tags, and take the metadata and profile from the src= image, even when one of the smaller srcset= images are used. Microsoft, infamous for its (mis)handling of colour management, seems to get very confused and its Edge browser seems to give up and mis-renders at any image size.
This leaves users a few reliable options for posting images in colour spaces other than sRGB to the a WordPress website:
- Manually create <img > tags that explicitly reference the original uploaded image (which has an embedded profile), rather than use Image or other blocks that may uses alternative versions of the image with no profile.
- Use a gallery plugin with known good behaviour for colour profiles
- Host images on an external service with known good behaviour for colour profiles (e.g. flickr) and use a suitable plugin to embed images from that external service.
Or upload only sRGB images.
sRGB
AdobeRGB
ProPhoto RGB
End text