きっかけはこちらのひき太郎さんの記事。

BLOGGER投稿一覧などの画像をJavaScriptでwebpに変えてみた

最近は日記系の記事投稿が続いたので今日はBLOGGER関連の記事でも書こうかな。少し前から画像ファイルを webp 形式に書き換える作業を試していました。

hikikomorisos.blogspot.com

WebPについて初めてちゃんと知り、コードを見てインスピレーションを受け、アイキャッチ画像のWebP変換方法を思いつきました。

早速トップページのアイキャッチ画像を全てWebPに置き換えたみたところ、PageSpeed Insightsのスコアがモバイルで5点ほど、PCで2点ほど上がりました。WebPすごい！

ということで、今回はアイキャッチ画像をWebPに一括変換する方法をご紹介します。

※今回の内容は少し専門的なので、テンプレートいじりに慣れている方のみおすすめします。

WebP（ウェッピー）とは？

WebPというのは、高い圧縮率を誇る次世代の画像形式です。通常のJPEG画像などに比べ、同じ画質でもサイズを大きく抑えることができます。

開発元であるGoogleの発表によると、ほぼ同等の画質で通常のPNG, JPGよりも3割ほどファイルサイズを圧縮できるそうです。

しかも、WebPは非可逆圧縮でありながら透過やアニメーションにも対応しているというすごいフォーマット。現在はほぼすべての主要ブラウザでサポートされているため、導入に関しても大きなデメリットはありません。

Bloggerでの画像WebP化

なんと、Bloggerではアップロードした画像のURLを一部変更するだけで簡単にWebP形式に変換することができます。Bloggerさん優秀すぎますね。（WebPの開発元がGoogleで良かった！）

具体的には、画像URLの解像度指定"s〇〇"の部分を"s〇〇-rw"にするだけでOKです。本当にこれだけ？？と疑ってしまいますが、画像を保存しようとするとちゃんとWebP形式になっていることが確認できます。

このありがたい仕組みを利用し、トップページの画像をWebPに変換します。

実行手順

私のテンプレートはいじりまくっていて参考にならないので、方針と手順のみお伝えします。

まず、今回一番の肝となるのはトップページの投稿表示部分にJavaScriptを組み込み、読み込み時にリアルタイムでWebP画像表示用のHTMLを出力するということです。独自タグを組み合わせた内部処理を行うことで、画像を二重読み込みしたりすることなく表示できます。

あくまでリアルタイムの変換なので、一度設置すればそれ以降は外しても自動的にWebP画像になるというわけではありません。ご注意ください。

では、早速手順のほうを見ていきます。

手順1

トップページの投稿表示部分を以下のような構成にします。

<b:loop values='data:posts' var='post' index='i'>
  <div class='top-post'>
    <b:if cond='data:post.thumbnailUrl'>
      <picture class='eyecatch'></picture>
      <!-- スクリプト設置部分 -->
    <b:else/>
      <!-- No Image 画像 -->
    </b:if>
    ...
  </div>
</b:loop>

補足：QooQをご使用の場合

テーマでQooQを使っている場合は、まずid='list'の部分を探してループ部分を以下のように書き換えることになります。

<div id='list'>
  <b:loop values='data:posts' var='post' index='i'>
    <b:include data='post' name='post'/>
  </b:loop>
</div>

サムネ設定やスクリプト設置を行う本体部分は、<b:includable id='post' var='post'>タグで囲まれている部分です。下の画像を参考に探してみてください。

手順2

手順1のスクリプト設置場所（pictureタグ直下）に、次のスクリプトを設置します。

<script type='text/javascript'>
  (function() {
    const idx = <data:i/>;
    let imgurl = "<data:post.thumbnailUrl/>";
    let imgurl_webp; // WebP画像URL
    if (imgurl.match(/\/s[0-9]+-.*\//)) { // 旧URL
      imgurl_webp = imgurl.replace(/\/s[0-9]+-.*\//, '/w320-h180-n-rw-e365/');
      imgurl = imgurl.replace(/\/s[0-9]+-.*\//, '/w320-h180-n-e365/');
    } else if (imgurl.match(/=s[0-9]+-.*$/)) { // 新URL
      imgurl_webp = imgurl.replace(/=s[0-9]+-.*$/, '=w320-h180-n-rw-e365');
      imgurl = imgurl.replace(/=s[0-9]+-.*$/, '=w320-h180-n-e365');
    } else if (imgurl.match(/default.jpg/)) {  // YouTubeサムネ対策
      imgurl = imgurl.replace('default.jpg', 'mqdefault.jpg');
      imgurl_webp = imgurl.replace('/vi/', '/vi_webp/').replace('.jpg', '.webp');
    } else { // 例外処理
      imgurl_webp = "<data:post.firstImageUrl/>";
      imgurl = imgurl_webp;
    }
    let eyecatch = document.getElementsByClassName('eyecatch')[idx];
    let html = '';
    html += '&lt;source srcset="' + imgurl_webp + '" type="image/webp"/&gt;';
    html += '&lt;img alt="アイキャッチ" loading="lazy" width="320" height="180" src="' + imgurl + '"/&gt;';
    eyecatch.innerHTML = html;
  }());
</script>

スクリプトでは、ループ毎に各投稿のサムネ画像URLを<data:post.thumbnailUrl/>により取得し、そのURLを書き換えてWebP画像URLを作っています。

URL処理後はHTMLを出力し、対応する投稿のpictureタグに中身を出力します。

「水の中にはサメがいる！」さんの記事を参考にさせて頂き、YouTubeサムネ画像のWebP化にも対応しました。

注意点として、動画によってはWebP形式のサムネイルが表示できないものがあります。その場合は、スクリプトのYouTubeサムネ対策部分を次のように置き換えてください。

    } else if (imgurl.match(/default.jpg/)) {  //YouTubeサムネ対策
      imgurl = imgurl.replace('default.jpg', 'mqdefault.jpg');
      imgurl_webp = imgurl.replace('/vi/', '/vi_webp/').replace('.jpg', '.webp');

    } else if (imgurl.match(/default.jpg/)) {  //YouTubeサムネ対策
      imgurl = imgurl.replace('default.jpg', 'mqdefault.jpg');
      imgurl_webp = imgurl;

手順3

トップページの投稿一覧が正しく表示されるか確認してください。

うまく動かないときは、コードの構成ミスや打ち間違いがないかチェックしてみてください。

補足：画像表示に関して

今回のコードでは、IE等WebP形式に対応していない一部ブラウザのためにpictureタグで画像が切り替わるようにしています。

そのためWebPに対応しているブラウザではsourceタグのWebP画像が、そうでないものはimgタグの通常画像が自動的に表示されます。

余談

ModernizrというJavaScriptライブラリを使用すると、CSSのbackground-imageで背景化しているものに関しても画像の切り替えができるようになります。本記事では割愛しますが、WebP画像を背景として設定したい方はぜひチェックしてみてください。