当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

WebPとは?導入するメリットや変換方法なども解説します!

アイキャッチ画像
みきてぃ東西線

JPEG形式やPNG形式に変わる新しい画像フォーマットとして注目されている「WebP」。

今回は、「WebP形式の基礎知識や導入するメリット、変換方法」などを解説していきます。

WebPとは

WebPとは、2010年頃からGoogleが開発している次世代画像フォーマットです。

画像によって多少差がありますが、JPEG画像やPNG画像より1枚当たりの画像のデータ容量をさらに抑えることができます。

WebP形式の特徴

WebP形式の特徴は以下の通りです。

  • 可逆圧縮と非可逆圧縮(ロスレス圧縮)の両方に対応している
  • 透過に対応している
  • アニメーションに対応している

WebP対応ブラウザの状況

WebPに対応しているブラウザは、こちらのサイトから確認できます。

現在の主流ブラウザのほとんどはWebP形式に対応されています。

長らく未対応だったSafariブラウザも、ようやくmacOS Big Sur以降およびiOS14以降に対応しました。

IE11はWebPには対応していないものの、既にサポート終了されていますので、これも気にする必要はありません。

それでも、古いバージョンのブラウザによってはWebP形式には対応していないので、Webサイトやブログの全画像をWebP形式に一本化するのはおすすめできません。

そのため、WebP対応ブラウザはWebP形式、そうでないブラウザではJPEG形式やPNG形式で画像表示させるなどの工夫が必要になります。

WebP形式を使うメリット

WebP形式を使うメリットは、

  • 画像形式を「WebP」に統一できる
  • 画像のデータ容量を減らせる

の2つです。

画像形式を「WebP」に統一できる

WebPは、JPG、PNG、GIFの特性を全て持っているので、画像形式をWebPに統一することができます。

画像のデータ容量を減らせる

画像内容にもよりますが、基本的にWebPはJPGやPNGよりデータ容量が軽くなります。

Googleの公式ドキュメントによると、WebP形式の画像データ容量はPNG形式の画像より26%、JPEG形式の画像より25~34%小さくなると言われています。

出典Google Developers「ウェブ用の画像形式」

JPG形式とWebP形式で変換した時の画像を比較

実際にJPGとWebPの2つの画像を比較してみると、以下の通りとなります。

いちごのショートケーキ(JPG画像)
JPG変換時:72kb(圧縮率:90)
いちごのショートケーキ(WebP画像)
WebP変換時:40kb(圧縮率:90)

確かに、WebP形式の画像の方がJPG形式の画像より、画像のデータ容量が小さくなっていますね。

もちろん、画像の見た目もJPG形式の画像とほぼ変わりはありません。

WebP形式へ変換する方法

WebP形式へ変換する方法は、

  • 画像編集ソフトで変換する
  • 画像圧縮サイトで変換する

の2つの方法があります。

画像編集ソフトで変換する

お手持ちの画像編集ソフトでWebP形式に変換することもできます。

以下の画像編集ソフトでは、WebP形式に変換できます。

  • Adobe Photoshop(バージョン23.2以降)
  • Affinity Photo2
  • Affinity Designer2
注意点

Adobe Photoshop バージョン23.1以前で画像をWebP形式に変換する場合は、「WebPShopプラグイン」が必要です。

画像圧縮サイトで変換する

また、画像圧縮サイトでWebP形式に変換することもできます。

個人的には、WebP形式と同じくGoogleが開発している「Squoosh」が一番おすすめです。

「Squoosh」で画像最適化する方法

「Squoosh」では「WebP」・「WebP V2」の2種類があります。

WebPに変換する画像を確認しながら設定できるので、画像変換時に「色が変わってしまう」「画質がぼやける」などの心配もありません。

HTMLで記述する方法

HTMLでは、いつも通りにimgタグを使ってWebP画像を表示することができます。

1<img src="sample.webp" alt="Sample Image">

WebP対応ブラウザではWebP形式、そうでない場合はJPEG形式の画像を表示するように振り分けたい場合は、以下のように記述するだけです。

1<picture>
2  <source srcset="sample.webp" type="image/webp">
3  <img src="sample.png" alt="Sample Image">
4</picture>

WordPressでWebPに変換できるプラグイン

WordPressではバージョン5.8からWebP形式の画像をアップロードできるようになりました。

ただ、さすがに古いブラウザのことを考えればWebP画像だけ統一するのは難しいです。

そこで、無料プラグインを使って、WebP対応ブラウザではWebP形式、そうでない場合はJPEG形式の画像を表示できるようにしておきましょう。

Imagify – Optimize Images & Convert WebP

  • 画像サイズ変更
  • 画像圧縮
  • WebP形式へ自動変換

などの画像最適化機能がありますので、1枚ずつでの最適化&変換はもちろん、既にアップロードした画像も一括でまとめて最適化&変換してくれます。

また、WebPに対応しているブラウザで画像が読み込まれた時に、プラグイン側でWebP画像を自動的に表示してくれます。

無料版では、毎月20MB(約200枚)まで変換できます。

≫WordPress.org「Imagify – Optimize Images & Convert WebP | Compress Images Easily」(外部サイト)

Converter for Media(旧名:WebP Converter for Media)

無料版では、JPGやPNG、GIF形式の画像をWebP形式に変換できます。

既にアップロードされた画像に加え、新たにアップロードされた画像も自動的にWebP形式に変換してくれます。

「Imagify」プラグインと同様に、WebPに対応しているブラウザで画像が読み込まれた時に、プラグイン側でWebP画像を自動的に表示してくれます。

なお、有料のPro版では

  • WebPとAVIFの2種類に変換できる
  • 変換する画像の大きさを制限できる

などの機能があります。

とはいえ、基本的には無料版だけでも十分でしょう。

≫WordPress.org「Converter for Media – Optimize images | Convert WebP & AVIF」(外部サイト)

ShortPixel Image Optimizer

JPGやPNG、GIF、そしてPDF形式のファイルを圧縮・WebP形式やAVIF形式の画像に変換してくれるプラグインです。

「Imagify」プラグインと同様に、1枚ずつ、または一括で全ての画像を最適化&変換してくれます。

画像の最適化時に、元画像と最適化後の画像を比較で確認することもできます。

無料版では、毎月100枚まで最適化できます。

≫WordPress.org「ShortPixel Image Optimizer – Optimize Images, Convert WebP & AVIF」(外部サイト)

元画像の最適化も忘れずに!

当然ですが、WebP画像だけ最適化されたとしても、元画像のJPEGやPNGの画像データ容量が大きいままだと意味がありません。

そのため、新たに画像をアップロードする前に、画像圧縮サイトなどで元画像を最適化しておくことで、WebPに対応していないブラウザでも表示速度を改善できるようになります。

また、画像形式にもそれぞれメリット・デメリットがありますので、

  • JPEG・・・複雑な要素を含む写真
  • PNG・・・グラデーションを含まないイラストレーション
  • GIF・・・アニメーションを含む画像

のように、画像形式を使い分けることも大事です。

まとめ

というわけで、今回は「WebP形式の基礎知識や導入するメリット、変換方法」など解説しました。

WebP形式の画像は画像最適化の手段として注目されているものの、古いバージョンのブラウザによってはWebPに対応していない場合もあります。

ですから、

  • WebP対応ブラウザでは、WebP形式の画像で表示する
  • WebP未対応ブラウザでは、JPEGやPNGなど従来の形式の画像で表示する

というように、ブラウザごとに表示する画像形式を振り分けることも重要です。

とはいえ、当ブログはまだ様々な理由もあってWebPには未対応のままですが、いずれはWordPressプラグインでWebPに対応しようかな~、と思っています。

参考になれば幸いです。

≫【WordPress高速化】ブログの読込みが遅い時の対処法8選

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました