【QooQ】list 版記事一覧のサムネイルの WebP 化とサイズ変更

Blogger テンプレート「QooQ」の list 版の記事一覧のサムネイルは 72 px × 72 px と、サイズが小さめです。ただサイズを変更するだけなら Blogger のresizeImage()関数を使えばできますが、サイズを大きくすると、どうしてもページの読み込みも遅くなってしまいます。

そこで、サムネイルの WebP 化を行い、画像サイズを大きくしつつページの読み込みへの影響を最小限に抑えました。

このカスタマイズではテンプレートの編集を行います。その前にテンプレートのバックアップをとることをおすすめします。

サムネイルの WebP 化とサイズ変更

参考にさせていただいた記事はこちらです。

• アイキャッチ画像をWebPに一括変換する方法 | IB-Note

また、QooQ 通常版への導入方法はこちらで詳しく説明されています。

• ブログを高速化しました | ふじろじっく

通常版と list 版はサムネイル周りの構造が違うため、上の記事で紹介されている方法をそのまま適用することができません。

そこで、list 版の以下のコードを

<b:if cond='data:post.thumbnailUrl'>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img class='list-item-img' expr:src='data:post.thumbnailUrl'/>
    </a>
  </div>
</b:if>

こちら↓に差し替えてから、上のふじろじっくさんの記事で紹介されている方法を導入したところうまくいきました。

<b:if cond='data:post.thumbnailUrl'>
  <a expr:href='data:post.url'>
    <img class='list-item-img' expr:src='data:post.thumbnailUrl'/>
  </a>
</b:if>

WebP 変換スクリプトを導入したあと、CSS の.list-item-img-boxを.list-item-imgに、.list-item-imgを.list-item-img imgにそれぞれ差し替えると、QooQ のデフォルトの CSS をそのまま使い回せるのでおすすめです。

私は 280 px × 280 px の正方形のサムネイルを取得したかったので、画像のパラメータは WebP をs280-c-rw-e365、PNG をs280-c-e365に設定しました。-pよりも、確実に中央をトリミングしてくれる-cのほうが好きです。-e365の部分については、こちらの記事で解説しています。

• 【Blogger】画像のキャッシュの有効期限を変更する方法

JavaScript 無効化への対策

注意点として、ブラウザの設定等で JavaScript を無効にしている場合はこのスプリクトが働かず、サムネイル自体が表示されなくなってしまいます。

<picture class='list-item-img'/>の部分をこのように変えると、万が一 JavaScript が無効にされた場合でもサムネイルを表示できるので安心です。

<picture class='list-item-img'>
  <noscript><img expr:src='resizeImage(data:post.thumbnailUrl, 280,&quot;1:1&quot;)' height='140' loading='lazy' width='140'/></noscript>
</picture>

あとがき

QooQ の list 版で記事一覧のサムネイルの WebP 化とサイズ変更を行う際、躓いた部分があったのでこうして記事にしてみました。

実は言うと、このブログでは画像周り以外も高速化をわりと頑張ってるせいか、WebP 化スクリプト使用前後の PageSpeed Insights のスコアにほぼ変わりはありませんでした。ただ、「次世代フォーマットの画像の使用」の指摘対策としてやっておいて損はないと思います。