Gotcha. Sorry we don’t have a better answer for that right now! Hopefully the web standards people will eventually add a real placeholder prop for images. It’s strange that in 2025 we still don’t have a standard way to do that.
Just as an aside — because I thought it was interesting, not because it’s a very good workaround — I also explored using a CSS mask over the placeholder to constrain its edges to that of the real image.
Basically, you end up applying the real image’s alpha channel as a solid mask over the placeholder:
This was nice because it didn’t depend on any particular timing. The placeholder is properly cropped as soon as it appears. The downside is that it makes the blurhash look weird, with some sharp edges instead of the blur.
And the bigger issue is that the mask itself has to be a different file, more data to download. Even if we base64 encoded the mask and sent it with the GraphQL, that is still more image data (and pretty big, a KB or two at least) that the user needs to download, taking away bandwidth from loading the real image — which kinda defeats the point of a placeholder to begin with. A blurhash is small enough (just a few bytes) that it’s a good tradeoff, but this was not.
Alas…
Still we wait for a better solution!