Blured thumbnails

[leomp12]

Transformando imagens runtime server-side é até simples:

let thumbWidth: number;
let thumbHeight: number;
if (aspectRatio === 1) {
  thumbWidth = thumbHeight = Math.min(attrs.width || 32, 32);
} else if (aspectRatio > 1) {
  thumbWidth = Math.min(attrs.width || 32, 32);
  thumbHeight = Math.round(thumbWidth / aspectRatio);
} else {
  thumbHeight = Math.min(attrs.height || 32, 32);
  thumbWidth = Math.round(thumbHeight * aspectRatio);
}
const thumbBuffer: Buffer = await sharp(getImageFilepath(src))
  .resize(thumbWidth, thumbHeight, {
    fit: sharp.fit.fill,
  })
  .blur(2)
  .toBuffer();
const thumbBase64 = thumbBuffer.toString('base64');
if (!attrs.style) attrs.style = '';
attrs.style += `background-image: url("data:image/png;base64,${thumbBase64}");`;
attrs.style += 'background-repeat: no-repeat; background-size: 100% 100%;';

Mas não manipulamos imagens no SSR runtime em serverless (#129) e devemos continuar não fazendo.

Talvez a solução seja um script separado executado após o primeiro build (SSG) lendo cada imagem pré-compilada, criando o base64 da thumb de cada uma e adicionando de volta no images.dist.csv na linha da respectiva imagem.

[leomp12]

https://unlazy.byjohann.dev/integrations/vue.html 👀