Webディレクターの仕事

WebP(ウェッピー) でサイト制作をする際の手順と注意点

webp-no-chuiten

今回はWebPウェッピーを使ったウェブサイト制作を進める上で、必要な手順や注意点についてまとめました。

Googleが開発した画像フォーマット「WebPウェッピー」。

圧縮率が高いので、大きくてキレイな画質の画像でも、サイズがそこまで大きくならないで済むのが最大の特徴。ページの表示スピードに起因するため、SEO対策としてもぜひ取り入れたいですね。

また、PNGのように透過の画像を作ることも可能で、GIFのようなアニメーションにも対応。どこをとってもデメリットのない画像フォーマットとなっています。

問題点があるとすれば「一部のブラウザで表示することができない」というところ。Chromeをはじめとしたほとんどの最新ブラウザでは対応しているのですが、IEなどの一部のブラウザでは表示できません。

したがって、サイト制作で使用する場合は、そのあたりのケアをしてあげる必要があります。

それでは、WebPウェッピーを使うさいの手順と注意点についてお話ししましょう。

表示できないOS・ブラウザを把握する

WebPウェッピーは新しい技術なので、まだ対応できていないOS・ブラウザが多数あります。

今日時点でWebPウェッピーに対応しているOS・ブラウザは以下の通り。リンク先の情報は常にアップデートされますので、実際にご自身で確認してみてください。

webp-no-chuiten_1

iOSは13まではダメで、14からOK。MacのSafariは、BigSurではすでに対応しているのですが、それより前のOSは表示できません。また、IEは共通して対象外となります。

今後リリースされるデバイスやOSは大丈夫でしょうが、もし古いOSやデバイスをサポートしなければならないようであれば、設計には注意が必要です。

非対応ブラウザで表示するための記述をする

上記のようにWebPウェッピーを表示できないものがありますので、そういったデバイスのために、代わりにJPGやPNGを表示するための記述をしなくてはなりません。

具体的には、画像を表示させるためには以下ような記述をします。

こうやって記述することで、WebPウェッピーに対応しているものではWebPウェッピーが、そうでないものはJPGやPNGが表示されるようになります。

背景画像として使う場合はJavaScriptでの制御が必要

上記の対応をしても、背景画像は、非対応ブラウザで表示できません。

したがって背景画像にWebPウェッピーを適応させるには、Modernizr という JavaScript ライブラリの読み込みが必要になります。

上記の公式サイトへアクセス。オプションの中から「WebP」を選択して、「BUILD」をクリック。JSファイルをダウンロードします。

webp-no-chuiten_2

使い方は、任意の場所に以下の記述をするだけでOKです。

CSSの記述例は以下の通り。これで背景画像も、自動で出し分けてくれるようになります。

非対応ブラウザで表示するための画像を用意する

上記の通り、非対応ブラウザをサポートするためには、WebPウェッピー形式の画像の他に、JPG形式やPNG形式の画像も用意する必要があります。

基本的な作業は、制作したデザインをJPGやPNGで書き出し、その画像をツールを使ってWebPウェッピー形式でも書き出すような流れになります。

WebPウェッピー形式で書き出せるツールはいくつかあります。以下のツールなどは、一括でアップロード・変換できるのでおすすめです。

Google が提供する画像軽量化サービスの「Squoosh」でも WebP に変換することはできます。が、一枚ずつでしか処理ができないので、ちょっと使いにくいのが玉に瑕です。

画像準備の手間が増えてしまうのが、WebPウェッピー対応へのデメリットですね。

画像をつねに2種類ほど用意するのも面倒ですし、修正が発生したときの手間も増えてしまいます。非対応ブラウザが減ってくれば、この手間もなくなってくるとは思いますが、今の時点ではケアをする必要がありますね。

あとがき

非対応ブラウザへの対応がネックですが、それも今だけ。これからどんどん対応が進み、今後はWebPウェッピーがサイトの標準になっていくような気がします。

今のうちに対応できるように、知識と経験を身に着けておきたいですね。私もまずは、自分のブログで対応しようと思います!

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-Webディレクターの仕事
-,

© 2021 あなたのスイッチを押すブログ