tinypng-loader-webpack

Thanks for tinypng-loader, it's a really great project. However, gulp is no longer popular, and some of the project dependencies is deprecated, so I forked it and made it better. And I kept the former description in salute.

PNG is useful because it's the only widely supported format that can store partially transparent images. When app moves to production stage, image compression is essential. However, according to my experience using such as gulp-image, imagemin-webpack, most of them relied on optipng plugin. This compression algorithm only help reduce around 5%-10%. tinypng.com uses smart lossy compression techniques to reduce the file size of PNG/JP(E)G files with around 60%-70% file size reduction.

Here is a command line way if you just want to quickly use it without any coding.

Advantage

By compare to other tinypng library, this library use a tinypng "loophole" API to compress images. Support popular build tools webpack so that developers can easily used this in and only in Production stage (Since this library rely on tinypng web api which require network accesss)

Compatible Image

• PNG
• JP(E)G

Get Started

npm install tinypng-loader-webpack --save-dev

Support

• Webpack

Language

• Typescript
• Javascript

Webpack

    ...
    module:{
        ... //webpack loader starts from here
        {
           test: /\.(png|jpe?g)(\?.*)?$/,
           loader: 'file!tinypng'
        },
        ... //end of webpack loader
    }

    ...
    {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'static/media/[name].[hash:8].[ext]',
                }
            },
            {
                loader: 'tinypng-loader-loader',
                options: {
                    test: /\.(png|jpe?g)(\?.*)?$/
                },
            }
        ]
    }
    ...

Since such operation requires communication with tinypng.com, therefore I would suggest to use cache-loader which allows to use MD5 to cache the result accordingly.

    ...
        {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            use: [
                {
                    loader: require.resolve('cache-loader'),
                    options: {
                        cacheDirectory: path.resolve('node_modules/.cache-images')
                    }
                },
                {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'static/media/[name].[hash:8].[ext]',
                    }
                },
                {
                    loader: 'tinypng-loader-loader',
                    options: {
                        test: /\.(png|jpe?g)(\?.*)?$/
                    },
                }
            ]
        }
    ...

Screenshot

Here is a normal case if you use this library correctly

Any errors occured will be logged in console

ChangeLog

2.0.3 (2019-02-26)

• fix: update readme to avoid misunderstanding

2.0.2 (2019-02-26)

• fix: include dependency vinyl

2.0.0 (2019-02-22)

• feat: fork from tinypng-loader and update test, some packages, together with remove gulp configs