Tem alguma maneira de comprimir imagens usando o webpack?

[renedocket]

Olá, pessoal tudo bem?

Gostaria de saber se tem alguma forma de comprimir imagens através do webpack, estou em um projeto que tem muitas imagens e isso pode acabar deixando a aplicação lenta, por esse motivo basicamente.

Podem me ajudar? Agradecido 💃

[wmartins]

Normalmente utilizo o image-webpack-loader para isso. A vantagem é que ele já agrupa diferentes otimizações para cada tipo de imagem.

Segue um exemplo:

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

[salatielsql]

Normalmente utilizo o image-webpack-loader para isso. A vantagem é que ele já agrupa diferentes otimizações para cada tipo de imagem.

Parece que essa lib está com dependencias antigas, essa parace ter as mesmas features porém mais atualizada: https://www.npmjs.com/package/imagemin-webpack-plugin

[felipefialho]

Faz anos que uso o imagemin-webpack

[eliseumds]

Comprimir imagens hoje em dia é fácil e eu não deixaria mais essa responsabilidade com o Webpack (e a tonelada de dependências que esses loaders requerem). Você comprime uma vez e pronto, ao invés de deixar isso com o Webpack toda vez que estiver desenvolvendo ou fazendo deploy. Ferramentas como optimize-images e imgp podem facilmente comprimir imagens em diretórios inteiros recursivamente.

[felipefialho]

@eliseumds Bom ponto, o Netlify mesmo tem otimizações que podem ser ativadas facilmente.

[eliseumds]

@felipefialho verdade. Para imagens dinâmicas (enviadas por usuários), é o jeito.

[eliseumds]

@felipefialho opa, me confundi. Aparentemente o Netlify só comprime imagens que estiverem no repositório Git. Ele não consegue conectar com um storage externo como S3. CloudFare e Cloudinary são boas opções.