Feature: Configurable width/size for base64 placeholder with webp support and backgroundColor fallback

[polarathene]

Summary

Configurable width/size for placeholder image in gatsby-image.

Webp support for base64 placeholder image element, and compatibility with the backgroundColor element to use as fallback for those that don't have Webp(due to inlining base64, less benefit to support multiple image formats, 2019 a good portion of users should have webp access).

Basic example

A global option in gatsby-config.js for width/size and maybe a prop for the image component for overriding? Nothing else really changes API wise, you just get the ability to also use webp format for the base64 placeholder image, and compatibility/fallback with backgroundColor element.

Motivation

Configurable width/size for placeholder image in gatsby-image. 20px vs 40px can make quite a bit of difference in the preview aesthetic. Facebook if I'm not mistaken uses around 40px and Medium 30px.

I'd also like this base64 inlined data to be webp, I notice it's jpeg(and I think can also be png if input is png?). I take it webp is not supported there as the placeholder does not use the <picture> element? Firefox presently doesn't have support for webp, but it's current beta and nightly both do so it's users will be able to benefit from webp as well from 2019. There's also a polyfill now.

To better handle users who browsers do not support webp, I would like to also use the backgroundColor placeholder as a fallback. Presently this is not possible as the backgroundColor element is after/above the image placeholder element... An alternative would be to use background-color style on the image element? The element order could be rearranged, but the styles conflict a little, image element has a 500ms opacity transition while the backgroundColor element has a 350ms transition delay(no transition duration on opacity, just a delay before it switches).

Custom styles could be passed in to resolve the placeholder issues, but I think some/all of those could be addressed by updating the source directly?

I'd like to contribute all of the above features/changes if anyone else thinks they'd be value in doing so.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[polarathene]

@gatsbybot Not stale, still waiting on feedback.

PR here