こんにちは。Maromaroのyamahanaです。

最近サイトの画像でxxx.webpという画像をよく見かけるようになりました。

photoshop※などで画像を編集しようとするとエラーになってしまうし、めんどくさーい・・・！WebPってなんだこれと思っていました。

ずっと何者なのかと不思議に思っていたのですが、この機会にちゃんと調べてみることにしました。

※Photoshop23.2からWebP画像対応になったそうです。私のPhotoshopはまだみたいです・・・

まずは色々な画像の拡張子について！

まずは画像の拡張子の種類をおさらいしましょう

JPG（ジェイペグ）

.jpg  .jpeg

・一番一般的なファイル
・色数も多くデータ容量が比較的小さい
・圧縮率を指定することが可能

色々なサイトやアプリに対応していて、一番メジャーな形式。

PNG（ピング）

.png

・透過画像が作れる
・画像が劣化しにくい
・データ容量が大きめ

一部のアプリなどでは対応不可の場合もあり、読み込めないことも。

GIF（ジフ）

.gif

・色数が少ない
・アニメーションが作れる
・データ容量が小さい

アニメーション作りで主に利用されている

SVG（エスブイジー）

.svg

・ベクトル形式
・データ容量が小さい
・様々な表現に対応

WEBへの組み込みで古いブラウザではエラーが出る場合も
対応してないアプリなども多い

WEB業界で主に使うのはこの辺りでしょうか。

WebPとは？

WebP（ウェッピー）

.webp

・とにかくデータ容量が小さい
・アニメーションが作れる
・透過画像が作れる

WebPはGoogleが開発しているオープンな静止画像フォーマット。

インターネットのWebページで広く使われるようになり、次世代を担うと言われるフォーマットなのです。

というかウェブピーと読んでいましたが、「ウェッピー」だったんですね。

なんだかかわいくて愛着がわきます♪

WebPのメリット・デメリット

WebPがどんなものか大体分かりましたが、メリットとデメリットは何なのでしょうか？

WebPのメリット

・とにかく軽量なので、webサイトの表示速度を上げることができ、SEOにも効果的。

画像読み込みが遅くてイライラしてページから離脱！なんてこともなくなりますね。

・アニメーションや透過などにも対応している為、様々な表現に対応してくれます。

・フォーマットを1本化

様々な表現に対応している為、JPEG、PNG、GIFの度の拡張子にするかなど、選択しなくてよくなります。

まだまだ発展途上ですが、そのうちJPEG、PNG、GIFなどを使わなくなるかも？

WebPのデメリット

・古いブラウザでは非対応

最近では対応ブラウザが増えてきたものの、一部の古いブラウザでは非対応なことも。

・変換が面倒

画像編集ツールなどではまだまだ未対応の物が多く、変換が必要になります。

WebPの変換方法

以下のサイトなどでJPEGやPNGに変換が出来ます。
今後変換できる画像編集ソフトは増えてきそうですね。

https://www.iloveimg.com/ja/convert-to-jpg/webp-to-jpg

https://saruwakakun.com/tools/png-jpeg-to-webp/

まとめ

今回WebPについて調べてみました。
あまり良いイメージの無かった画像ファイルでしたが、画像が１本化してくれるというのは、とてもありがたいので、ぜひ今後の動向を見守っていきたいです！

以上yamahanaでした♪