今回は
Googleが開発した画像フォーマット「
圧縮率が高いので、大きくてキレイな画質の画像でも、サイズがそこまで大きくならないで済むのが最大の特徴。ページの表示スピードに起因するため、SEO対策としてもぜひ取り入れたいですね。
また、PNGのように透過の画像を作ることも可能で、GIFのようなアニメーションにも対応。どこをとってもデメリットのない画像フォーマットとなっています。
問題点があるとすれば「一部のブラウザで表示することができない」というところ。Chromeをはじめとしたほとんどの最新ブラウザでは対応しているのですが、IEなどの一部のブラウザでは表示できません。
したがって、サイト制作で使用する場合は、そのあたりのケアをしてあげる必要があります。
それでは、
表示できないOS・ブラウザを把握する
今日時点で
iOSは13まではダメで、14からOK。MacのSafariは、BigSurではすでに対応しているのですが、それより前のOSは表示できません。また、IEは共通して対象外となります。
今後リリースされるデバイスやOSは大丈夫でしょうが、もし古いOSやデバイスをサポートしなければならないようであれば、設計には注意が必要です。
非対応ブラウザで表示するための記述をする
上記のように
具体的には、画像を表示させるためには以下ような記述をします。
<picture> <!-- WebP フォーマットの画像 type 属性に image/webp を指定--> <source srcset="../images/sample_01.webp" type="image/webp"> <!-- 従来のフォーマットの画像 --> <img src="../images/sample_01.jpg" alt=""> </picture>
こうやって記述することで、
背景画像として使う場合はJavaScriptでの制御が必要
上記の対応をしても、背景画像は、非対応ブラウザで表示できません。
したがって背景画像に
Modernizr: the feature detection library for HTML5/CSS3
Respond to your user’s browser features.
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
上記の公式サイトへアクセス。オプションの中から「WebP」を選択して、「BUILD」をクリック。JSファイルをダウンロードします。
使い方は、任意の場所に以下の記述をするだけでOKです。
<script type="text/javascript" src="modernizr-custom.js"></script>
CSSの記述例は以下の通り。これで背景画像も、自動で出し分けてくれるようになります。
/* WebP未対応のブラウザ用のスタイル */
.no-webp .element {
background-image: url("image.jpg");
}
/* WebP対応のブラウザ用のスタイル */
.webp .element {
background-image: url("image.webp");
}
非対応ブラウザで表示するための画像を用意する
上記の通り、非対応ブラウザをサポートするためには、
基本的な作業は、制作したデザインをJPGやPNGで書き出し、その画像をツールを使って
PNG・JPEGをWebP画像に一括変換
Web（ブラウザ）上ですぐに使えるWebP変換ツールです。複数の画像をまとめてWebP形式に変換できます。
Google が提供する画像軽量化サービスの「Squoosh」でも WebP に変換することはできます。が、一枚ずつでしか処理ができないので、ちょっと使いにくいのが玉に瑕です。
画像準備の手間が増えてしまうのが、
画像をつねに2種類ほど用意するのも面倒ですし、修正が発生したときの手間も増えてしまいます。非対応ブラウザが減ってくれば、この手間もなくなってくるとは思いますが、今の時点ではケアをする必要がありますね。
あとがき
非対応ブラウザへの対応がネックですが、それも今だけ。これからどんどん対応が進み、今後は
今のうちに対応できるように、知識と経験を身に着けておきたいですね。私もまずは、自分のブログで対応しようと思います！
