Otimização de imagens

Deixa uma imagem em tamanho real em src/ ou public/, aponta-lhe um <img>, e o sitelo redimensiona-a, converte-a para um formato moderno e reescreve a etiqueta com um srcset. Nada para importar, nenhum componente para aprender.

Ativar

export default {
  images: true,
}

A codificação é feita pelo sharp, uma dependência de pares opcional — instala-o ao lado do sitelo quando ativares as imagens:

npm install -D sharp

Sites que não otimizam imagens nunca precisam de o instalar.

Escreve um <img> normal

export default () => `
  <html lang="pt">
    <body>
      <img src="/images/hero.png" alt="Nascer do sol sobre o porto">
    </body>
  </html>
`

import { html, body, img } from 'javascript-to-html'

export default () =>
  html({ lang: 'pt' },
    body(
      img({ src: '/images/hero.png', alt: 'Nascer do sol sobre o porto' }),
    ),
  )

export default function Home() {
  return (
    <html lang="pt">
      <body>
        <img src="/images/hero.png" alt="Nascer do sol sobre o porto" />
      </body>
    </html>
  )
}

Uma origem de 3000×2000 sai assim:

<img src="/assets/img/hero.a1b2c3d4-1200.webp"
     alt="Nascer do sol sobre o porto"
     sizes="(max-width: 1200px) 100vw, 1200px"
     width="1200" height="800"
     loading="lazy" decoding="async"
     srcset="/assets/img/hero.9f8e7d6c-400.webp 400w,
             /assets/img/hero.5b4a3c2d-800.webp 800w,
             /assets/img/hero.a1b2c3d4-1200.webp 1200w">

O que obténs

Redimensionamento que nunca amplia — uma origem de 600px com widths: [400, 800, 1200] produz 400 e 600, e fica por aí.
Formatos modernos — com um só formato obténs um <img srcset> normal; com dois ou mais, tudo é envolvido num <picture> com alternativa no formato original.
Sem saltos de layout — width e height são preenchidos a partir da imagem real, mais loading="lazy" e decoding="async".
A mesma marcação em desenvolvimento — sitelo (dev) reescreve as páginas e serve as variantes a pedido, por isso vês em pré-visualização o que vais publicar.
Uma cache partilhada — as variantes são indexadas por hash de conteúdo em node_modules/.sitelo/images, de modo que nem o desenvolvimento nem as recompilações codificam a mesma imagem duas vezes.

A reescrita corre sobre o HTML já compilado, por isso abrange tanto as imagens de src/ como as de public/.

Opções

export default {
  images: {
    widths: [400, 800, 1200],
    formats: ['avif', 'webp'],
    quality: { avif: 55, webp: 78, jpeg: 82 },
    exclude: ['**/og/**'],
  },
}

widths — por omissão [400, 800, 1200]; o maior é também o limite
formats — por omissão ['webp']; avif, webp, jpeg, png
quality — por omissão { avif: 55, webp: 78, jpeg: 82 }; qualidade do codificador por formato (o png usa compressão, não qualidade)
sizes — o atributo sizes; um sizes posto na etiqueta ganha sempre
dimensions — por omissão true; acrescenta width / height
lazy — por omissão true; acrescenta loading e decoding
exclude — globs ou RegExp de URLs de imagem a não tocar
assetsDir — por omissão 'assets/img'
cacheDir — por omissão 'node_modules/.sitelo/images'
remote — por omissão false; otimiza imagens https:// na compilação
prune — por omissão false; apaga os originais que já ninguém referencia
dev — por omissão true; põe false para servir os originais intactos em desenvolvimento
concurrency — codificações em paralelo, por omissão CPUs − 1 (máx. 8); 1 quando o remote está ativo

Dois formatos dão

O AVIF é mais pequeno mas mais recente que o WebP, por isso listar ambos deixa o navegador escolher e mantém uma alternativa para os antigos:

<picture>
  <source type="image/avif" srcset="/assets/img/hero.*-400.avif 400w, ..." sizes="...">
  <source type="image/webp" srcset="/assets/img/hero.*-400.webp 400w, ..." sizes="...">
  <img src="/assets/img/hero.*-1200.png" alt="..." srcset="..." width="1200" height="800">
</picture>

Como excluir imagens

As etiquetas que já têm srcset, que estão dentro de um <picture>, ou que apontam para um SVG, um GIF animado ou um URL remoto ficam intactas. Para as restantes, di-lo explicitamente:

<img src="/images/exact.png" alt="Pixel art" data-no-optimize>

As imagens de cartões sociais e os favicons vivem em <meta> e <link>, que isto nunca reescreve — mantêm o URL fixo.

Imagens remotas

O conteúdo importado de um CMS aponta muitas vezes para o servidor de outra pessoa. Ativa remote e essas imagens são descarregadas, otimizadas e servidas a partir do teu próprio domínio:

export default {
  images: {
    remote: true,
    prune: true,
  },
}

Uma descarga falhada deixa a etiqueta exatamente como estava, com um aviso — uma origem instável nunca faz falhar a tua compilação. Depois, prune remove os originais locais que já ninguém referencia.