Possible to add png optimization? about responsive-loader HOT 13 CLOSED

Has anyone found a good workflow for minifying the png's that this plugin creates? It is currently quite a big problem for me, downsizing a 5kB PNG results in a 15kB PNG...

from responsive-loader.

Has anyone found a good workflow for minifying the png's that this plugin creates? It is currently quite a big problem for me, downsizing a 5kB PNG results in a 15kB PNG...

I'm currenly solving with imagemin-webpack-plugin. However with it build takes longer.

from responsive-loader.

@joaocarmo I ended up following the suggestion here: #3 (comment) although it took me a day and a half to get working. Had to fork my own version of the srcset-loader repo and update a few dependencies to get it to build on osx.

from responsive-loader.

from responsive-loader.

Sharp supports PNG optimization only if libvips is compiled with support for libimagequant.

It does not come as default in the bundled libvips binaries that are in the sharp npm package because:

The prebuilt binaries provided by sharp for libvips and its dependencies do not include GPL-licensed or patent-encumbered software.

Originally posted by @lovell in lovell/sharp#1793 (comment)

To optimize all png images that webpack emits you can use a plugin like imagemin-webpack:

npm install imagemin-webpack imagemin imagemin-pngquant

// webpack config
...
  plugins: [
    new ImageminPlugin({
      test: /\.(png)$/i,
      bail: false, // Ignore errors on corrupted images
      cache: true,
      imageminOptions: {
        // Before using imagemin plugins make sure you have added them in `package.json` (`devDependencies`) and installed them
        // Lossy optimization, check the documentation for other options. 
        plugins: [
          [
            "pngquant",
            {
              quality: [0.6, 0.8],
            },
          ],
        ],
      },
      loader: false,
    }),
  ],
...

from responsive-loader.

I don't know how much optimization is actually needed with jimp/sharp but it would be a good idea to support all the output-specific options of either adapter, see http://sharp.dimens.io/en/stable/api-output/

from responsive-loader.

from responsive-loader.

I guess this has dropped off, but I have run pngquant -f --ext .png --quality 70-95 *.png on my source images, but when responsive-loader resizes them, they end up much bigger at a comparable image size. Was hoping there was a good solution for this.

from responsive-loader.

@tettoffensive , try what @AlexOuttaspace suggested using imagemin-webpack which will optimize all the images that have been handled by the build.

from responsive-loader.

@tettoffensive , did you try pwa-srcset-loader? It seems to have a (as of now, at least) somehow recent release.

from responsive-loader.

Luckily the emitted PNGs are lossless. It is possible to use the webpack imagemin plugin and its test field to have a glob that only matches these PNGs and optimize them using the imagemin png plugins.
This is a different story with lossy formats like JPEG (even with 100% quality) as these are passed as JPEGs through mozjpeg or guetzli and hence can experience an unnecessary additional quality loss.

from responsive-loader.

Maybe it makes sense to drop optimization settings and leave it to image-minimizer-webpack-plugin?

from responsive-loader.

Sharp makes it easy to compress jpg/webp/avif, do not think another loader is necessary in the majority of scenarios

from responsive-loader.