development_creative

この記事は1年以上経過しています。

【これからWeb制作を目指す方へ!】次世代画像フォーマットwebp(ウェッピー)とは?

みんなはもう使ってる?次世代型画像フォーマットwebp!

かつては対応ブラウザーが少なくて、使用されなかったwebp。
ずっと思ってたけど、webpて何?って方に届け僕の気持ち!

webpを簡潔にまとめると・・・

詰まるところ、以下です。

  • Googleが開発した次世代画像フォーマット
  • 画質を極力そのままに、容量だけを減らす
  • pngのように透明部分の情報も保持
  • 結果的に直帰率が減る
  • 結果的にSEOにも強い

え!いいことしかないじゃん!って思ったそこのアナタ。
そうなんです!いいんです!

これが、特にオチとか急展開なく、至極普通に良いのですよ・・・・。
webpちゃんは。

詳しく説明しますね。

1. Googleが開発した次世代画像フォーマット

2010年にgoogleが公式発表した次世代型画像フォーマット。
かつては対応しているブラウザが少ないことが懸念点だったが、2022年6月時点で、Google ChromeやSafari、FirefoxなどのブラウザがWebpに対応。

https://www.profuture.co.jp/mk/column/40040

かつてはワイのmacでプレビュー表示ができなかったものの、
2023年現在は、プレビュー表示もできるようになっています。

2. 画質を極力そのままに、容量だけを減らす

さらっとすごいこと言ってるんですが、マジです。

Webpは「jpg」以上の高い圧縮率でありつつ、画質の劣化はほぼなく容量のみ軽量化することが可能。
通常は、圧縮率を高めファイルサイズを落とすと、比例して画質は劣化するもの。しかし、Webpは元の画質を極力保ちつつ、容量だけを削減できる。

https://www.profuture.co.jp/mk/column/40040

其方こそ、真の三國無双よ!

3. pngのように透明部分の情報も保持

Webpは、アルファチャンネルを扱うことができる。
アルファチャンネルとは、透過度の情報が扱えるデータ領域のこと。
pngのように背景透過が可能となります。

https://www.profuture.co.jp/mk/column/40040

「あ。もう全部webpでいいじゃん。」と思わせたパワーワードです。
わたくし、考えるのをやめました。

容量の軽いjpegであり、png・・・。しかも画像の荒れも抑えられるなんて・・。
アナタ以外もう知らないっ!!

4. 結果的に直帰率が減る

ユーザーがWebページを訪問し、コンテンツがなかなか表示されない場合、直帰率が上がるというデータがGoogleより発表されている。

出典 : Think with Google – Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

単純な話で、ローディングが長いとすぐ帰るよね。
営業先でも構わず直帰するよね。
閃光のローディングで、ユーザーはノンストレス。

5. 結果的にSEOにも強い

ページスピードが高速になれば、SEOにおいてもメリットがある。
Googleは、ページスピードをWebサイトの評価指標の1つとしており、遅いWebサイトは検索順位が落ちる傾向。
速いWebサイトであれば、適切な評価を受けられる可能性も高まる。

https://www.profuture.co.jp/mk/column/40040

そらそう。
早いサイトは絶対正義。
googleも評価しないわけにいかない。

速さといえば、やはりこちらのサイトでしょうか?

http://abehiroshi.la.coocan.jp/

あ、でもここはwebp使ってないから、もっと早くできますね!

結論:webデザイナーは黙ってウェッピー!(webp)

あの、僕はウェッピーじゃなくてホッピー(.hoppy)が・・
はい。おふざけは置いておいて、男は黙ってwebp使うのが良いのではないでしょうか。

ほぼ悪いことないもん。。

ではでは。

Related ariticle

関連記事

TOP