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広告の代行を行なっております。