Como usar o Imagemin com Grunt

Katie Hempenius
Katie Hempenius
X

Configurar o plug-in do Imagemin Grunt

Esse Glitch já contém grunt, grunt-cli e grunt-contrib-imagemin plug-in. Para adicionar a configuração do Imagemin, é necessário editar o gruntfile.js.

  • Clique em Remixar para editar para tornar o projeto editável.
  • Em gruntfile.js, substitua o comentário //Add configuration here por este bloco de código:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Esse bloco de código informa ao Grunt quais arquivos precisam ser compactados com o Imagemin.

  • dynamic indica que a lista de arquivos a serem compactados será dinamicamente gerados pela correspondência dos nomes dos arquivos com o padrão de arquivo especificado.

  • O padrão de arquivo {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} corresponderá a todas as imagens JPEG e PNG no diretório images/.

.
  • Carregue a tarefa Imagemin adicionando esta linha imediatamente antes de grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Por fim, adicione o Imagemin como a tarefa Grunt padrão substituindo o comentário /* list plugins here */ por 'imagemin'. Essa linha ficará assim:
grunt.registerTask('default', ['imagemin']);

✔︎ check-in

O arquivo gruntfile.js completo ficará assim:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Personalizar a configuração do Imagemin

O imagemin-pngquant é um plug-in para especificar níveis de qualidade de compactação. Já adicionamos imagemin-pngquant a este projeto no package.json para que você possa usá-lo na compactação dos seus PNGs. Para usá-lo, declare o plug-in e especificar um nível de qualidade da compactação no Gruntfile.

  • Declare o plug-in imagemin-pngquant adicionando esta linha à parte de cima do gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Adicione configurações para compactar imagens PNG adicionando uma propriedade options à objeto imagemin. Essa propriedade options vai ficar assim:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

Esse código instrui o Imagemin a compactar PNGs usando o plug-in Pngquant. A O campo quality usa um intervalo de valores min e max para determinar o nível de compressão: 0 é o menor e 1 é o mais alto. Para forçar todas as imagens a seja compactado com 50% de qualidade, transmita 0.5 como o valor mínimo e máximo.

✔︎ check-in

Seu arquivo gruntfile.js ficou assim:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Mas e os JPEGs? O projeto também tem imagens JPEG, então você deve especificar como mas também são comprimidos.

Personalizar a configuração do Imagemin (continuação)

Use o plug-in imagemin-mozjpeg, que já foi instalado, para compactam imagens JPEG.

  • Declare o plug-in imagemin-mozjpeg colocando esta linha na parte de cima da gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • Em seguida, adicione mozjpeg({quality: 50}) à matriz no objeto options. A matriz ficará assim:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ check-in

Seu arquivo gruntfile.js ficou assim:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Corrida Grunt & verificar resultados com o Lighthouse

  1. Clique no botão Ferramentas.
  2. Em seguida, clique no botão Console.
  3. Execute o Grunt digitando o seguinte comando no console:
grunt

Quando o Grunt for concluído, você verá uma mensagem como esta no console:

Minified 6 images (saved 667 kB - 66.5%)

Oba! Esses resultados são muito melhores.

Por fim, é uma boa ideia usar o Lighthouse para verificar as alterações que você acabou de feitas. "Codifique imagens com eficiência" de desempenho permite que você para saber se as imagens JPEG da página estão compactadas de forma ideal.

  • Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia tela cheia
  • Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho) em a versão ativa do Glitch e verifique se a opção "Codificação imagens" foi aprovada.

Transmitir "Codificar imagens com eficiência" auditar no Lighthouse

Pronto. Você usou o Imagemin para compactar as imagens na sua página de maneira otimizada.