webp(ウェッピー)ってなんだ?【新しい画像フォーマット】

2021/11/17

WEBデザイン

t f B! P L

普段スマホやデジカメで撮った画像はどうしていますか?

どのような方法で保存しているでしょうか。

その保存の方法によって性質が変わるのは知っていましたか?

今回は、その保存の方法の一つであるウェッピーのお話です。


最近よく聞くwebp(ウェッピー)とは?

パソコンやスマホの画面、つまりモニターで静止画を表示したいときに使うものなんですが、そういわれてもピンとこないと思います。

こういうとピンとくるかもしれません。

.jpg ジェイペグ

.png ピング

この辺は聞いたことがあると思います。

ふだんデジカメで写真を撮ったりして保存しますよね。

そのときに、自動的にファイル名の後ろに.jpgというものがついていると思います。


これを保存のフォーマットと呼びます。

そして選んだフォーマットによってファイル名の後につく.jpg.png拡張子(かくちょうし)と呼びます。

ringo.jpg

という画像ファイルがあった場合、この画像はジェイペグというフォーマットで保存されているということがわかります。

フォーマット、拡張子という言葉を覚える必要はありませんが、皆さんが撮ったデジカメの写真や、PCで描いたイラストなんかを保存するときに使われるもの、と覚えておいてください。


そしてこのフォーマットですが、この二十年くらい?は画像を扱うときは.jpgが主流でした。そして、イラストなどを保存するときは.pngを使っていましたね。


webpとほかのフォーマットとの違い

jpeg
いままで主流だったフォーマット

ジェイペグ 拡張子 .jpg

容量を小さくして画像を取り扱いすることに向いています。

色数が多いのでデジカメで撮った写真の保存につかわれますが、保存を繰り返すと画質が劣化していくので気を付けなくてはいけません。


ピング 拡張子 .png

透過ができるのが特徴。透明な部分を表現できるので背景を透かしたいイラストなどに向いています。

細かな色彩も表現できるので、グラデーションを作ったりすることにも適しています。


ジフ 拡張子 .gif

色数が256色に限られます。

最大の特徴は、動画を作ることができるという点です。

gif動画というものを聞いたことがあると思います。

動画を作るまでもない簡単なもの(パソコンの操作画面の説明、動きのあるバナー広告)であればgif動画で十分です。容量も軽く抑えることができますよ。


そして今回取り上げるウェッピー(.webp)

webp

ではここから.webpについてお話していきましょう。

べつにjpg,pngなどでも問題はないはずなのですが、なぜわざわざwebpを使う必要があるのでしょうか?

これからスタンダードになるのでしょうか?

大きく二つの特徴があります。


グーグルが公式に使用をおすすめするフォーマット

最近多くの人がグーグルが作ったブラウザ(クローム)やスマホなどを使うようになりましたね。ウェッピー自体は2010年からあったのですが、まだその段階では、ほかの会社が強かったのでグーグルがおすすめするウェッピーはあまり普及しませんでした。

でも、皆さんご存じのように、ここのところはインターネットと言えばグーグルと言われるぐらい、多くの人が利用するものになりましたね。ということで、そのグーグルが開発をしおすすめもしているウェッピーはこれからの基準になっていくかもしれません。


いままでのフォーマットのいいとこどり

先ほどジェイペグやピングの説明をしましたが、それらの良いところだけを集めたのがこのウェッピーなんです。ジェイペグのようにきれいな画像もあつかえるし、背景を透かすこともでき、なおかつ動画もつくることができてファイルのサイズも軽くすることが可能です。


今後ウェッピーは一般的になるのでしょうか?

ということで、ウェッピーというフォーマットの特徴を、ほかのフォーマットとの違いもあわせてご紹介をしました。

優れたフォーマットでグーグルも利用をおすすめしているものなので、もっと使われてもいいものなのですが、現在つかっているウェブサイトはほとんどありません

その理由の一つはインターネットエクスプローラーと呼ばれる古いブラウザ(インターネットを見るウインドウ)がこのウェッピーに対応していないから、といわれています。

近い将来、このインターネットエクスプローラーもなくなることがわかっていますので、ウェッピーの使用は増えていくと私は考えています。

ジェイペグやピングの画像をウェッピーに変換できるページもあるので、試しに使ってみてはいかがでしょうか?

Squoosh

カテゴリー別に記事を探す

このブログを検索

お問い合わせ

名前

メール *

メッセージ *

QooQ