Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Por que você deveria se importar?
  • Medir
  • Imagemin
    • Plugins
    • Imagemin CLI
    • Módulo npm imagemin

Use Imagemin para comprimir imagens

Nov 5, 2018 — Atualizado Apr 6, 2020
Available in: English, Español, Русский, 中文, 日本語 e 한국어
Appears in: Tempos de carregamento rápidos
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Nesta página
  • Por que você deveria se importar?
  • Medir
  • Imagemin
    • Plugins
    • Imagemin CLI
    • Módulo npm imagemin

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.

20 KB

12 KB

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":

image
O Lighthouse atualmente relata sobre oportunidades de compactar imagens apenas no formato JPEG.

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.

Formato de imagemPlugin (s) com perdasPlugin(s) sem perdas
JPEGimagemin-mozjpegimagemin-jpegtran
PNGimagemin-pngquantimagemin-optipng
GIFimagemin-giflossyimagemin-gifsicle
SVGImagemin-svgo
WebPimagemin-webp

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=images

Mó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);
})();
Desempenho
Last updated: Apr 6, 2020 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Using Imagemin with webpack
  • Using Imagemin with Gulp
  • Using Imagemin with Grunt
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.