一番上(ヘッダーといっていいと思う)に設定している画像をWebPにした。

理由


以前から対応しようかどうか悩んでいたがCan I use?であらためて確認したところ、現時点で下記の通りおおよそのブラウザでサポートしているのでやることにした。

また、検索するとbackground-imageには使用できないというニュアンスの記事がいくつか引っかかるが、問題なかった。ただし、フォールバック。つまり非対応のブラウザの場合にwebpでない画像(jpegなど)を表示するというのは無理そうだった。JSを使えばイケそうだけども、このサイトは(広告以外)JSレス街道を絶賛邁進しているので、それに反してまで対応するつもりはない。

加工


御用達のsqooshを使った。

配信時のサイズと画像の大きさ


配信前比で3KBほど減ったはず。ただし、以前の画像から容量は減りつつも大きさは若干大きくなっている。もともとは横1500px 縦 280px(ぐらい)だったのが 横1800px 縦 320px(ぐらい)になった。

※ちなみにもとの画像は(横6000px 縦1139px)

非対応ブラウザの場合


こんな感じで黒にちかい焦げ茶が表示されるようにしている。

見た目の前後比較


下記の画像だと解り辛いけれども、スムージングの関係でAfterの方がなめらかかつ少し暗めになっている。Beforeの若干粗さがある方はイイ感じに解像度の低さをカバーしてくれる粗さで良い雰囲気も醸し出されていたのでそれに近づけたかったけれども、どう調整しても再現できなかったのであきらめた。

Before

After

余談


実のところもとの画像はこんな感じで微細な模様がある。見えるようにしたいんだけど、そうすると70KBほどの画像になってしまうので我慢している。このページの他の画像で70KB超えてるやつがあるとかいうツッコミはなしで。