Por que isso é importante para você?
Imagens não compactadas sobrecarregam suas páginas com bytes desnecessários. Como as imagens podem ser candidatas à Maior exibição de conteúdo (LCP), esses bytes desnecessários podem aumentar a duração do carregamento de recursos da imagem, possivelmente resultando em tempos de LCP mais longos.
A foto à direita é 40% menor do que a da esquerda, mas provavelmente parece idêntica ao usuário comum.
20 KB | 12 KB |
---|
Medida
Execute o Lighthouse para verificar oportunidades de melhorar o carregamento de página compactando imagens. Essas oportunidades são listadas em "Codificar imagens com eficiência":
Imagem
O Imagemin é uma escolha excelente para compactação de imagens porque oferece suporte a uma ampla 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 boa alternativa se você quiser testar o Imagemin sem tocar em nenhum código.
Plug-ins
O Imagemin é criado com base em "plug-ins". Um plug-in é um pacote npm que compacta um formato de imagem específico (por exemplo, "mozjpeg" compacta JPEGs). Formatos de imagem populares podem ter vários plug-ins para você escolher.
O mais importante a considerar ao escolher um plug-in é se ele é "com perdas" ou "sem perdas". Na compressão sem perdas, nenhum dado é perdido. A compactação com perdas reduz o tamanho do arquivo, mas às custas de uma possível redução da qualidade da imagem. Se um plug-in não mencionar se é "com perda" ou "sem perdas", você poderá dizer pela API: se for possível especificar a qualidade da imagem da saída, ela vai ser "com perdas".
Para a maioria das pessoas, plug-ins com perda são a melhor escolha. Elas oferecem economias significativamente maiores de tamanho de arquivo, 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 seu projeto.
Formato da imagem | Plug-ins com perdas | Plug-ins sem perdas |
---|---|---|
JPEG | imagemin-mozjpeg | imagemin-jpegtran |
PNG | imagemin-pngquant | imagemin-optipng |
GIF | imagemin-giflossy | imagemin-gifsicle |
SVG | imagemin-svgo | |
WebP | imagemin-webp | imagemin-webp |
CLI da 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 de imagem da entrada.
Para compactar as imagens do diretório "images/" e salvá-las no mesmo diretório, execute o seguinte comando (substitui os arquivos originais):
$ imagemin images/* --out-dir=images
Módulo npm da imagemin
Se você usa uma dessas ferramentas de build, confira os codelabs da Imagemin com webpack, gulp ou grunt (links em inglês).
Você também pode usar a Imagemin sozinha como um script de Node. Esse código usa o plug-in "imagemin-mozjpeg" para compactar arquivos JPEG com uma qualidade de 50, sendo "0" 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);
})();