【WordPress】姉妹サイトを紹介する「バナー」の作り方（2倍サイズ＋WebP）

前回、デザインの記事欄を「更新順」に直した話を書きましたがー

今回はその横に置いてある、あのバナーの話ですよねー

サイドバーにポンと置いてあるだけのバナーなんですが、地味に「サイズ」と「もう1個のファイル」で悩むポイントがあるんです。

なぜ「2倍サイズ」で作るのか

バナーの表示サイズが 300×250px だとしても、画像ファイル自体は 600×500px で作ります。

理由はスマホ・PCの「Retinaディスプレイ」対策です。物理的に画素数の多い画面では、300×250のつもりで作った画像を等倍で表示すると、輪郭がぼやけて見えます。2倍のサイズで作って、表示側で300×250に縮めることで、高精細な画面でもシャキッと見えます。

<img src="banner_apartmentmorning_600500.png" width="300" height="250" alt="...">

ファイル名に「600500」と実サイズを入れておくと、後から見た人が「これ2倍サイズだ」と一目でわかるので、地味におすすめです。

width / height は削らない

2倍サイズで作ったからといって、width・height 属性を外してはいけません。むしろ逆で、表示したいサイズ（300×250）をそのまま書きます。

これを書いておくと、ブラウザが画像を読み込む前に「このスペースは300×250だ」と先に確定できるので、読み込み中にレイアウトがガタッとズレる（CLS）のを防げます。画像が2倍サイズであることと、width/heightに何を書くかは、別の話なんです。

WebPを「もう1枚」用意する

同じフォルダにある既存のバナーを見ると、.png の横に .png.webp というファイルがもう1枚あります。中身は同じ画像で、形式だけ違う「双子ファイル」です。

WebPはPNGより軽いことが多い画像形式です。今回作ったバナーで実際に試すと

banner_apartmentmorning_600500.png       55,322 bytes
banner_apartmentmorning_600500.png.webp  10,332 bytes

約5分の1になりました。テーマ側やAutoptimizeのようなプラグインが「対応ブラウザにはWebPを、対応していないブラウザにはPNGを」と自動的に振り分けてくれるので、テンプレートのコードは何も変えなくて大丈夫です。画像ファイルを2種類、同じ場所に置くだけです。

作り方は、コマンドラインが使える環境なら cwebp という無料ツール1つで済みます。

cwebp -q 80 banner_apartmentmorning_600500.png -o banner_apartmentmorning_600500.png.webp

-q 80 は画質80%という意味です。バナーのような写真・イラスト系の画像なら、80前後でファイルサイズと見た目のバランスが良いことが多いです。

alt文言、何を書くか

alt はスクリーンリーダーで読まれたり、画像が読み込めなかったときに代わりに表示される文字です。サイト名だけだと味気ないので、サイト名＋一言説明にしています。

alt="apartment morning - 二つの視点が交互に綴られる連載小説"

「これは何のサイトなのか」が、画像を見なくても1文でわかることを目安にしています。

さいごに

バナー1枚でも

• 表示サイズの2倍で作る
• width / height は書く（削らない）
• WebPをもう1枚用意する
• altに一言説明を入れる

の4点セットでちょっと丁寧になります。次回は、このバナーやコードを「本番サーバーにどう安全に上げるか」の手順について書きます。

2倍サイズって聞くと、おかわりしたくなりますねー

しましょうー