深入探討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格式時，需要考慮到其兼容性問題，以適當權衡它帶來的優缺點。