Usar o Imagemin para compactar imagens

Katie Hempenius

Por que isso é importante para você?

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

A foto à direita é 40% menor do que a da esquerda, mas provavelmente seria idêntica para um usuário comum.

Medir

Execute o Lighthouse para procurar oportunidades de melhorar o carregamento de páginas compactando imagens. Essas oportunidades estão listadas em "Codificar imagens com eficiência":

Imagemin

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

Plug-ins

O Imagemin é construído 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 pode ter vários plug-ins para escolher.

O mais importante a considerar ao escolher um plug-in é se ele é "com perda" ou "sem perdas". Na compressão sem perdas, nenhum dado é perdido. Com perdas reduz o tamanho do arquivo, mas às custas da possível redução da imagem de qualidade. Se um plug-in não mencionar se ele tem "perda" ou "sem perdas", você é possível perceber pela API: se é possível especificar a qualidade da imagem na saída, é "com perdas".

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

CLI do Imagemin

A CLI do Imagemin funciona com 5 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 de imagem do entrada.

Para compactar as imagens na coluna "images/" e salvá-los no mesmo diretório , execute o seguinte comando (substitui os arquivos originais):

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

Módulo NPM do Imagemin

Se você usar uma dessas ferramentas, confira os codelabs da Imagemin com webpack, gulp, ou grunhem.

Também é possível usar o Imagemin sozinho como um script de nó. Esse código usa "imagemin-mozjpeg" para compactar arquivos JPEG com uma qualidade de 50 ('0' sendo a pior, '100' sendo a 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);
})();