先日の改修で対応ブラウザにはWebPの画像を配信するように設定しました。実際にどれほどの効果があったのか見てみたいと思います。

検証の条件

• 使用するページはシャニマス: 強いSレアアイドル
• Microsoft Edge(WebP対応)とIE11(WebP非対応)の開発者ツールを開き、ネットワークの項目を参照
  • 開発者ツールのUIがEdgeとIEで同じなので、比較しやすいはず
• ページを上から下までひととおりスクロールする
• EdgeはService Workerをバイパスするように設定
• gatsby-config.jsのgatsby-remark-imagesまわりにこのような設定をしている

/* (前略) */
{
    resolve: `gatsby-remark-images`,
    options: {
        maxWidth: 800,
        quality: 90,
        linkImagesToOriginal: true,
        withWebp: true
},
/* (後略) */

結果

IE

• 13.06MB
• 元画像はPNGなので、圧縮されたPNG画像が配信される

Edge

• 1.39MB
• WebPの画像が配信されている
• 元画像はイラストだが画像の劣化は認められない
• スクリーンショットだとやっぱりわずかに劣化しているように見える

所感

• **1/10にまでサイズが減っている。**これはすごい
• JPEGほど劣化も激しくない。
• Gatsbyであれば少しの設定で導入できるので、是非導入するべき