Image placeholders

[sifferhans]

Not really an issue, but more of a question / idea.

At my work we handle quite a lot of images, and have therefore looked at a few solutions to improve perceived loading speed for them. I don't know if there are any image optimization solutions in the BMM api, but I see the images load quite slow at first page load (in the web app at least).

I've looked at Blurhash for good looking image placeholders, which has quite good support, and I've looked at Thumbhash which is more unknown. Another idea is to simply use a tiny version of each image until the full image loads. plaiceholder also looks nice

Is something like this implemented in the BMM api? If not, would it be an idea?:)

[SimonSimCity]

Wow! Just more stuff: For Blurhash there exists a .NET implementation (for the API and for Xamarin) https://github.com/MarkusPalcer/blurhash.net which I couldn't find for Thumbhash. They even have a minimal code example: https://stu.dev/blurhash-on-xamarin/

And for Vue, there seems to be an easy2use lib: https://github.com/damienroche/vue-blurhash

[sifferhans]

@SimonSimCity Yeah, it's really cool! They explain a bit about how and why they made it in this blog post. The catch here is that Blurhash needs a <canvas> element to render the placeholder (at least by default)

The vue library you mentioned is Vue 2 only 😆 unpic might be an alternative, or @nuxt/image when that is ready

[SimonSimCity]

https://github.com/nuxt/image doesn't seem to make much sense to me if not using SSR.

The catch here is that Blurhash needs a element to render the placeholder (at least by default)

I don't see this as an issue, because we'd anyways create our own element for this use-case, IMO.

The vue library you mentioned is Vue 2 only

I'm not afraid to fork it and port it over to vue3. Looking at the code it should be quite little of an effort.

[sifferhans]

This also looks promising 😊 It is used in the Elk web app, made with Nuxt https://unlazy.byjohann.dev/integrations/nuxt.html

[sifferhans]

https://github.com/bcc-code/bmm-web/assets/18753964/94b4b651-dc29-4481-99fa-792b6c5e8040

This is how images currently behave before they are fully loaded. Would be pretty nice with some colorful blurry placeholders here 😁

[u12206050]

Do we have the primary color of those images? On activechristianity.org we have a datauri generated from the original image (scaled down->blurred) that we use while waiting for the image to load

[SimonSimCity]

@u12206050 that's what this is all about 🤗 just a bit more than just singular colors...

[kkuepper]

@sifferhans @SimonSimCity Is this issue still relevant? For me the image experience is way better than one year ago:

• we no longer show the ugly image placeholder
• load speed feels quite fast

Shall we close this issue?

[sifferhans]

@kkuepper It is way better now, no question! 🤩

The perceived speed would probably be slightly better though if we had some sort of low-quality placeholder, average color, Blurhash etc. but it probably isn't worth it if it is a lot of work

If it was implemented in the backend it would also be usable on mobile. The placeholders on mobile is now a gray square

But it is probably ok to close the issue if it isn't worth it