WebP(ウェッピー)

サイトのSEO対策で表示スピードの改善で頭を悩ましたりしていましたが、
新しい画像フォーマットを見つけました。

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

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

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

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

 

非対応ブラウザで表示するための記述をする必要があります。

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

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

<picture>
<!– WebP フォーマットの画像 type 属性に image/webp を指定–>
<source srcset=”../images/sample_01.webp” type=”image/webp”>
<!– 従来のフォーマットの画像 –>
<img src=”../images/sample_01.jpg” alt=””>
</picture>

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

福岡県でSEO対策、北九州市でホームページを作りたい、Web広告を依頼したい、チラシの制作を発注したい、といったご要望は株式会社ジャムまでご相談ください。北九州市でホームページ制作、Web広告、SNS広告の代行を行なっております。