urbgimtam
commented
1 year ago Hi @nandi95. Not sure I've understood correctly your issue, but I'm not a native english speaker.
The generated images by nuxt-images are already real progressive images, as long as they are requested as "jpg" or "jpeg" format. The other available formats like "webp", "avif" don't support progressive images. The browsers render them progressively natively.
If your question is about a component that generates a low-res/blurred version which then transitions into the full version, I agree it would be a nice feature. It has been already talked about earlier in #62, but the module has been rewritten since then.
Maybe there's a couple of things you could try:
The placeholder parameter
Using the placeholder parameter together with the useImage() transformations can take you close, without transitions. Something like this:
<template>
<NuxtImg src="theImage" :placeholder="blurredImage" />
</template>
<script setup>
const imgTransformer = useImage()
const theImage = ref(''https://unsplash.it/1024/768")
const blurredImage = imgTransformer(theImage.value, { h: 10, w: 20, blur: 4, q: 30 })
</script>
// untested codeA variation of this would be to create your own component transition, where the top is component is using the useImage transformer directly as the source, then transition to the full image after some time or by IntersectionObserver.
BlurHash
You could also try a technique like BlurHash (https://blurha.sh/). I remember there was a couple of nuxt 2 modules for it, but haven't seen anything for Nuxt3. I've found an example for Vue 3, but it needs a server counterpart, so this is only part of the solution: https://ledermann.dev/blog/2020/08/01/progressive-image-loading-with-blurhash/
Hope it helped somehow.
I can't see this being discussed before. I think this package is well suited for this as it already does versions of an image. While it's a different aspect of the ux it addresses the same issue. Are there plans to implement this? What are the alternatives?