Use Imagemin para comprimir imagens
Por que você deveria se importar? #
Imagens não compactadas incham suas páginas com bytes desnecessários. A foto à direita é 40% menor do que a da esquerda, mas provavelmente seria idêntica à do usuário comum.
|
|
|---|
Medir #
Execute o Lighthouse para verificar se há oportunidades de melhorar o carregamento da página compactando imagens. Essas oportunidades estão listadas em "Codificar imagens com eficiência":
Imagemin #
Imagemin é uma excelente escolha para compressão de imagem porque suporta uma ampla variedade de formatos de imagem e é facilmente integrado com scripts de construção e ferramentas de construção. Imagemin está disponível como módulo CLI e npm. Geralmente, o módulo npm é a melhor escolha porque oferece mais opções de configuração, mas o CLI pode ser uma alternativa decente se você quiser experimentar o Imagemin sem mexer em nenhum código.
Plugins #
Imagemin é construída em torno de "plugins". Um plugin é um pacote npm que compacta um formato de imagem específico (por exemplo, "mozjpeg" compacta JPEGs). Os formatos de imagem populares podem ter vários plug-ins para escolher.
A coisa mais importante a se 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 possivelmente reduza a qualidade da imagem. Se um plugin não menciona se é "com perdas" ou "sem perdas", você pode dizer por sua API: se você pode especificar a qualidade da imagem de saída, então é "com perdas".
Para a maioria das pessoas, plug-ins com perdas são a melhor escolha. Eles oferecem uma economia de tamanho de arquivo significativamente maior e você pode personalizar os níveis de compactação para atender às suas necessidades. A tabela abaixo lista os plug-ins populares da Imagemin. Esses não são os únicos plug-ins disponíveis, mas todos são boas opções para o seu projeto.
Imagemin CLI #
O Imagemin CLI funciona com 5 plugins diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin usa o plugin apropriado baseado no formato de imagem da entrada.
Para compactar as imagens no diretório "images/" e salvá-las no mesmo diretório, execute o seguinte comando (sobrescreve os arquivos originais):
$ imagemin images/* --out-dir=imagesMódulo npm imagemin #
Se você usar uma dessas ferramentas de construção, verifique os codelabs para Imaginemin com webpack , gulp ou grunt.
Você também pode usar Imagemin por si só como um script de Node. Este código usa o plugin "imagemin-mozjpeg" para comprimir arquivos JPEG para uma qualidade de 50 ('0' sendo o pior; '100' sendo 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);
})();