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.
Transformando imagens runtime server-side é até simples:
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.csvna linha da respectiva imagem.