Usar o Imagemin para compactar imagens

Katie Hempenius

Por que isso é importante para você?

Imagens não compactadas incham suas páginas com bytes desnecessários. Como as imagens podem ser candidatas a Largest Contentful Paint (LCP), esses bytes desnecessários podem aumentar a duração do carregamento de recursos da imagem, resultando em tempos de LCP mais longos.

A foto à direita é 40% menor do que a da esquerda, mas provavelmente pareceria idêntica ao usuário médio.

Medida

Execute o Lighthouse para verificar oportunidades de melhorar o carregamento de página compactando imagens. Essas oportunidades estão listadas em "Codificar imagens de forma eficiente":

Imagemin

O Imagemin é uma excelente opção para compactação de imagens porque oferece suporte a uma grande variedade de formatos de imagem e é facilmente integrado a scripts e ferramentas de build. O Imagemin está disponível como uma CLI e um módulo npm. Geralmente, o módulo npm é a melhor opção porque oferece mais opções de configuração, mas a CLI pode ser uma alternativa decente se você quiser testar o Imagemin sem tocar em nenhum código.

Plug-ins

O Imagemin é criado em torno de "plug-ins". Um plug-in é um pacote npm que compacta um formato de imagem específico (por exemplo, "mozjpeg" compacta JPEGs). Formatos de imagem conhecidos podem ter vários plug-ins para escolher.

O mais importante a considerar ao escolher um plug-in é se ele é "com perdas" ou "sem perdas". Na compactação sem perdas, nenhum dado é perdido. A compactação com perdas reduz o tamanho do arquivo, mas à custa de possivelmente reduzir a qualidade da imagem. Se um plug-in não mencionar se ele é "com perdas" ou "sem perdas", você poderá saber pela API: se for possível especificar a qualidade da imagem da saída, ela será "com perdas".

Para a maioria das pessoas, os plug-ins com perdas são a melhor opção. Eles oferecem economias de tamanho de arquivo significativamente maiores, e você pode personalizar os níveis de compactação para atender às suas necessidades. A tabela abaixo lista plug-ins populares do Imagemin. Esses não são os únicos plug-ins disponíveis, mas seriam boas opções para seu projeto.

CLI do Imagemin

A CLI do Imagemin funciona com cinco plug-ins diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. O Imagemin usa o plug-in apropriado com base no formato da imagem da entrada.

Para compactar as imagens no diretório "images/" e salvá-las no mesmo diretório, execute o comando a seguir (substitui os arquivos originais):

$ imagemin images/* --out-dir=images

Módulo npm do Imagemin

Se você quiser usar o Imagemin com um bundler, verifique se o bundler escolhido tem um plug-in disponível para ele. Por exemplo, o webpack é um bundler conhecido que tem ótimo suporte para o Imagemin. Saiba mais sobre como usar o Imagemin com o webpack neste codelab.

Também é possível usar o Imagemin sozinho como um script do Node. Este código usa o plug-in "imagemin-mozjpeg" para compactar arquivos JPEG com uma qualidade de 50 (sendo "0" o pior e "100" o melhor):

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();