[gatsby-plugin-image] Styling options for placeholder image missing.

[nimajnebp]

New image plugin missing placeholder image styling options.

I'm using the new gatsby-plugin-image and was trying to add styling to the placeholder image. I opted for the placeholder="blurred" option, then i wanted to add some extra styling to that blurred placeholder on top of the default.

The old gatsby-image gave us a clear way to that with placeholderStyle and placeholderClassName, but the new plugin has seemingly one way which is the blurredOptions.

Official documentation on blurredOptions:
"Options for the low-resolution placeholder image. Ignored unless placeholder is blurred."

In the source files i found that it expects width and format, which is bad news for those who expected style options.

Anybody know how to add styling to the placeholder the new way?

[wardpeet]

@nimajnebp Thanks for your question. This was intentional, I'm curious what other styling you want to add to the placeholder?

[nimajnebp]

@wardpeet I would like to add extra filter blur by css, because the default "blurred" effect is a bit raw in my opinion. But the option to add custom css to that image would be very useful in other use-cases too. For instance, If i wan to add some custom stripes to that preloaded image or a spinner while it loads, so there are many ways to further improve the default experience.

[wardpeet]

I understand but adding more blur effects and everything has its costs too. It's more expensive for the browser to execute. How do you achieve what you're doing, by using nested css.

.your-image [data-placeholder-image] {
  filter: ...
}

I'm not sure why we added an imgClassName in the first place as the same can be achieved with the above. 🤔 With that information it makes sense to add a placeholderClassName too.

[nimajnebp]

@wardpeet Thank u for the response.

I understand the performance drawbacks, unfortunately some customers weigh these visual features above performance, but i see no problem with having this option for those who prefers it. placeholderClassName would be perfect i believe.

I think to have the className option would be better experience for the developers because they could apply utility classes on the exact element, rather than defining nested css rules (as showcased above). It would be a better support for class driven css frameworks like tailwind, and would still have the option leave that out and write the custom css rules.