この記事を読むのに必要な時間は約 17 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

WebP(ウェッピー)は､JPEGやPNG,GIFと同じように､Webで利用できる新しい画像形式です｡
この記事ではWebP(ウェッピー)の活用や作成なども含め解説していきます。
今後のWEBサイト製作で重宝されるであろうWebP(ウェッピー)とはどんな画像なのか
これを機会にしっかり覚えてください。

WebP(ウェッピー)とは

Webp（ウェッピー）とはGoogleが開発した高圧縮率の次世代の静止画フォーマットです。 圧縮率の高い非可逆圧縮を採用しており、透過書き出しも可能。 GIFのようなアニメーションにも対応しており、拡張子は「.webp」になります。 但し、WebPはビットマップ画像のため、画像を拡大すると画質は劣化します。

Googleの解説ページでは英語のページになります。
WordPress5.8よりサポートされていることもあり今後の記事で使う頻度が高くなりそうな画像形式です。

画像形式の比較

WebP(ウェッピー)を使うメリット

WebPのメリットとしてまず挙げられるのは、非可逆圧縮であるにもかかわらずアルファチャンネルを扱えることです。

非可逆圧縮とは、画像を拡大したり縮小したりできない、ということです。非可逆圧縮の画像フォーマットでは、たとえばデータ画像の一部をカットして保存した場合、もう元のデータには戻せなくなります。また、サイズ変更や上書き保存をすることで画質が劣化します。代表的な非可逆圧縮の画像フォーマットとしてJPGが挙げられます。

WebPもJPGと同じく非可逆圧縮の画像フォーマットですが、アルファチャンネルを扱えるメリットがあります。画像処理においてアルファチャンネルを扱えると、たとえば背景を透明にできるなどのメリットがあります。可逆圧縮であるPNGやGIFは背景透過ができることが大きなメリットとされています。

WebPは非可逆圧縮でありながら背景透過ができるのです。JPGとPNGやGIFのメリットを併せ持つ画像フォーマットだといえるでしょう。

いいところどりだけでなくファイルサイズをPNGと比較してサイズが26％小さくなり､JPEG画像よりも25〜34％小さくすることができるということは、表示速度の向上にもつながるでしょう。

WebP(ウェッピー)を使うデメリット

これまで大きなデメリットとされてきた、対応ブラウザの少なさですが、現在は主要ブラウザの多くで対応できるようになり、非対応のブラウザはIEのみとなります。
非対応のIEだけならまぁいいかと思っていたのですが・・・

上記画像は、iPad Air(A1474)で下記の記事を開いた画像です。

iPhoneのパスコードを忘れたときの対処法

https://kumahachi.me/2021/09/30/post-850/

誰だって、iPhoneのパスコード（パスワード）を忘れてしまうことはあります。一発でアウトになってしまうわけではありませんが、あまりに何度も入力に失敗すると、ロックアウトのプロセスが始まってしまいます。 そのプロセスは、はじめのうちは小刻み

パソコン・タブレット・スマホを快適に使うためのワザ

 

20 Users

19 Pockets

2015iMacの Safariバージョン15.0でも表示してない
iOSはiOS 14以降、MacOSのSafariもBig Sur以降であればWebPに対応しています。

確かに表示してないが、筆者の環境だけの事で最新なら問題なく表示可能。

画像編集ソフトが対応していない場合があるなど、既存フォーマットと比べて使いにくい部分はまだありますが、大きなデメリットは無くなってきたといえます。

WebP(ウェッピー)画像の作成について

ここでは､Windows環境でWebP画像を作成することができる公式ツールのダウンロードを行います｡
使いこなすまでには難易度高いですが・・・

Downloading and Installing WebP  |  Google Developers

https://developers.google.com/speed/webp/download

Google Developers

 

5 Users

76 Pockets

赤枠をクリックして次へ

 Windowsの場合は、赤枠のファイルをダウンロードします。

macOSの場合は赤枠のファイルをダウンロードします。

以降は、下記のサイト参照

次世代画像フォーマットWebP画像の作り方 | HTMLレシピ集 | CookBook

https://cookbook.xrea.jp/html-cookbook/image/webp.php

次世代画像フォーマットWebP画像をWindows環境で作成する方法を学習します｡

Cookbook

Tool使ってみる

公式ツールで難しいと思われる方は、これから紹介するアプリがおすすめです。
「WebP画像を作る君」は、超簡単でしたね。

WebP画像を作成できるアプリ「WebP画像を作る君」を公開

https://ics.media/entry/11711/

みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか？　聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。本記事では、このアプリケーションでの使い方から、ウェブページにWebP画像を配置する方法を解説します。 ▲ オリジナルアプリケーション「WebP画像を作る君」。

ICS MEDIA

 

12 Tweets

6 Users

64 Pockets

 Windowsも macOSも使えるこのアプリは楽でいいです。
この章の最初の写真を試しにwebpに変換してみました。
1000X500ピクセル
jpeg 59.1kb
webp 34.2kb
より軽くすることが可能になるんですね
また、gifアニメーションも変換することが可能なために今後のWordPressだけでなくWEBサイトでは重宝されることは間違いないと思っています。

まとめ

webp画像を使うと画像がかなり軽量化できることがわかりました。
これは使わない手はないでしょう。
なぜなら画像をすべてwebp画像にして軽量化することで表示速度アップできます。
表示速度アップは、Googleでの評価アップにつながるのです。
それが無料で手に入るならやらない理由を見つけるほうが難しい
そんな気もします。
アメブロやはてなブログでは2021年9月20日現在、使えないWebP(ウェッピー)ですが、 WordPressではバンバン使っていきたいですね。

WEBのことならくまはちＬＡＢにお任せください。
寄付やカンパもお待ちしております。

くまはちLABのご利用ありがとうございます！ くまはちLABの最新情報をフォローしてゲットしてください！   @eddie24751102

Evernoteに保存

この記事をお気に入りに追加する