次世代画像フォーマットである「WebP」への対応、もう済んでますか？
高品質画像＆高圧縮を実現しており、ファイルサイズが PNG よりも小さくなるためページの表示速度が速くなるため、エコで高速なインターネットを目指す Google と相性が良く、これからの検索エンジン対策（表示速度の速いWEBサイトは検索結果に上位表示される）のひとつとして注目されています。
先日まで Apple だけがこのビッグウェーブに頑なにのっかっていなかったのですが、遂に次期 iOS14 に実装されると発表され、実際に先月公開された開発者向け Safari14ベータ版が公開されています。メジャーブラウザと呼ばれる全てのブラウザが既に WebP に対応済みな今、時代遅れというかむしろ「対応する気あったんだ」と驚きの方が大きかった人も多いと思います。超優良技術だった Flash が Adobe の気持ちひとつで消されてしまったことを思うと、ね……。
WebP に対応した「iOS14」は今年の秋に公開されるので、いよいよ WebP の世界に足を踏み入れたという実感とビジネスの予感にクリエイター達の震えもとまらないかと思います。実感だと大手のサイトだと3割くらいは既に WebP 対応している感じがします。お手軽に実装できて効果あるのが良いですね。
仕様などよく分かっていない方は、開発した Google のサイトへ。
■A new image format for the Web | WebP | Google Developers
https://developers.google.com/speed/webp/
Photoshop などもプラグインを入れれば WebP 形式で書きだせるようになるため、制作中に WebP 画像を作ってしまえばいいわけですが、問題となるのは過去に制作したサイトとその画像です。面倒なことと人的コストがかかるのを避けるのならば、サイトに入れた画像を自動で変換していく方法をとるのが一番楽だと思い、僕もそうしています。
実装するには、例えば代表格 Ubuntu だったら、cwebpコマンドで webp 形式に変換できるので、これを適宜回していけば勝手に大量に画像を作ってくれることになります。
コマンドは下記。
$ cwebp [options] ファイル名 -o ファイル名.webp
使用できるオプションの種類は下記の説明を参考に。
https://developers.google.com/speed/webp/docs/cwebp
今から実装しておいて、WebP に対応していないブラウザの場合は HTTPリクエストヘッダ の Accept に image/webp の記述があるので、 .htaccess ファイルを使ってフォールバック表示する方法で僕は使用しています。ちなみに手動記述の場合は下記のようにコードを書きます。
<picture>
<source type="image/webp" srcset="img/[ファイル名].webp">
<img src="img/image.png" alt=""> <!– 非対応ブラウザ用img画像 –>
</picture>
実は Safari だけでなく IE も未対応なのですが、IEの場合はスクリプト使うなどしないと対応できないので、僕はもう面倒なので IE 対応まではしてません。自分自身が責任者だとこういう判断が下せるので良いですね。
WebP の技術自体は10年以上前からあるものなので、.htaccess を使った振り分け方はいろんなサイトでいろんな方法が紹介されています。手法についてはいろいろ調べてみるといいと思います。
Wordpress で構築しているサイトは、プラグインを入れるだけなので最も簡単です。表示するタイミングで変換してくれます。
僕は「WebP Express」というプラグインを試しましたが、お手軽でした。
■GitHub – rosell-dk/webp-express: WordPress plugin for serving autogenerated WebP images instead of jpeg/png to browsers that supports WebP
https://github.com/rosell-dk/webp-express
プラグインを外せば普通の IMG タグを利用した HTML に戻るので様子をみるのにも良いですね。
コメント