深入探讨image/webp格式

一、imagewebpackloader

ImageWebPackLoader是Webpack中一个可以自动为图片进行压缩，转换成dataURL或者利用image loader来进行处理的工具。其最主要的功能是帮助我们实现webp的压缩。

使用ImaageWebPackLoader只需安装它和Webpack即可使用

    
        npm install --save-dev image-webpack-loader
    

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

通过配置上述webpack.config.js中的loader，即可实现对webp格式图片的压缩。同时，ImageWebPackLoader还支持对png、jpeg、gif三种图片格式的压缩、转换成dataURL等处理。

二、image/webp下载报错

使用ImageWebPackLoader进行webp格式图片的压缩时，常常会遇到无法下载image/webp格式图片的问题，此时可以通过配置修改mimetipes来解决。

    
        module.exports = {
            module: {
                rules: [
                    {
                        test: /\.(png|jpe?g|gif|webp)$/i,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: '[path][name].[ext]',
                                    mimetype: 'image/webp' // 增加mimetype配置
                                }
                            },
                            {
                                loader: 'image-webpack-loader',
                                options: {
                                    mozjpeg: {
                                        progressive: true,
                                        quality: 65
                                    },
                                    optipng: {
                                        enabled: false,
                                    },
                                    pngquant: {
                                        quality: '65-90',
                                        speed: 4
                                    },
                                    gifsicle: {
                                        interlaced: false,
                                    },
                                    webp: {
                                        quality: 75,
                                    }
                                },
                            },
                        ],
                    },
                ],
            },
        };
    

通过在file-loader中增加mimetype为image/webp的配置，就可以让webpack正确地以webp格式下载图片。同时，也可以通过类似的修改其他格式的mimetype，来修复下载报错的问题。

三、image/webp格式支持度

WebP是一种由Google推出的图片格式，它在图片大小和清晰度上都要比其他常见格式像JPEG和PNG等更具优势，但是同时也存在格式支持度问题

目前，WebP格式的支持情况如下：

1、PC端浏览器：Chrome、Firefox、Opera、Edge支持WebP格式。

2、移动端浏览器：iOS Safari和微信内置浏览器目前不支持WebP格式，但安卓端的微信、UC浏览器、QQ浏览器、百度浏览器都支持WebP格式。

3、应用场景：WebP格式适用于需要大量图片的网站，如电商网站、博客网站。

四、webp格式的优劣势

在选择使用WebP格式的时候，需要考虑它的优劣势。

1、优势：WebP格式图片比PNG和JPEG格式的图片大小要小，同时又能保持很高的画质，因而可以大大优化网页的加载速度。

2、劣势：WebP格式的兼容性存在局限性，无法在所有的设备和浏览器上正常加载，因而在某些场合下不适合使用。

3、应用场景：如果网站需要涉及大量的图片，且用户大多数使用兼容WebP格式的浏览器，那么使用WebP格式可以带来较大的性能提升。

五、结语

通过本文对WebP格式的探讨，我们可以看出，WebP格式相对于其他常见图片格式在大小和画质上都有其优势。但是在使用WebP格式时，需要考虑到其兼容性问题，以适当权衡它带来的优缺点。