Performance and SEO considerations when using blurry images

[felixranesberger]

I was wondering, what the best solution for blurry images is.

I can render the data URI on the server for the blurry image and include it in the HTML,
or provide a thumbhash to create the data URI for the image on the client.

The thumbhash would be way smaller than the data URI.
Does creating the data URI on the client cause some SEO problems?

[johannschopplich]

There's no direct answer, since the blurry image generation strategy depends on your use-case. Personally, I use client-side generation for SSR applications and client generation for SPA's.

Here are a few considerations:

Performance and efficiency:
If network latency is a big concern, it might make more sense to generate the data URI on the server side and send that down with the initial HTML payload. This approach would allow the image to start rendering immediately as the HTML is parsed and improve the overall performance of your page load. Rendering the image won't be delayed since the client won't need to wait for the JS bundle to execute.

SEO implications:
If SEO is a major concern for your application, it might be safer to generate the data URI on the server side and include it directly in the HTML. This way, the search engine would see the same content that a user with JavaScript disabled. On the other hand, a large, inlined data URI could potentially slow down your LCP and negatively affect your page's ranking. However, delaying the load of the image until after the page has loaded might have a similar effect.