【jpg / pngから一括変換】WebPとは？ サイト軽量化、SEO向上のための仕様と変換方法を解説!!

WebPとは？

WebPはGoogleが開発した画像フォーマットで、JPEGやPNGよりもファイルサイズを抑えつつ、高速なページ表示を実現します。
これにより、WebPを活用するとSEOの向上が期待できます。

Webサイトでの採用が増えた背景には、Googleが推奨していることが挙げられます。
表示速度の向上はユーザビリティの改善にもつながり、快適な閲覧環境を提供します。

さらに、WebPは透過処理にも対応しているため、ホームページやWebサイトで幅広く活用されています。

WebPのメリット

• 高圧縮率
  JPEGより約30％、PNGより約26％小さいファイルサイズで保存可能。
• 可逆・非可逆圧縮対応
  用途に応じて圧縮方法を選択可能。
• 透過処理対応
  PNGと同様に背景透過が可能。
• アニメーション対応
  GIFと同じように動く画像を作成できる。
• SEO効果
  画像の軽量化によりページ表示速度が向上し、検索エンジンでの評価が高まる。

WebPのデメリット

• 対応ブラウザの制限
  WebPは新しい画像形式のため、以前は対応ブラウザが限られていましたが、現在は主要なブラウザで広くサポートされています。
• 画像編集ソフトの対応状況
  一部の画像編集ソフトではWebPに対応していないため、使用するソフトを選ぶ必要があります。
• 画像変換の手間
  WebPを利用するには既存の画像を変換する必要があり、作業負担が増える場合があります。

WebP画像の作成・変換方法

1. WordPressプラグインを活用する方法

• EWWW Image Optimizer
  画像を自動的にWebPに変換し、最適化。
• WebP Express
  既存の画像をWebP形式に変換し、適切なフォールバックを設定。
• WebP Converter for Media
  WordPressメディアライブラリの画像を自動変換。

2. オンラインツールを使う方法

WebPは無料のブラウザサービスで作成することができます。
jpgからwebpへ / pngからwebpへ一括で簡単に変換が可能です。
以下はその手順になります。

1. WebPに変換したい画像の用意
   WebPにしたい画像を1枚また複数枚用意しましょう。
   JPEG/PNG/GIFに対応しているので、これらの形式であればどれでも問題ございません。
2. 「PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱」へアクセス
   以下のURLからサイトにアクセスしましょう。
   https://saruwakakun.com/tools/png-jpeg-to-webp/
3. 画像のアップロード
   WebPにしたい画像を以下の添付画像のようにドラッグ&ドロップします。
   
4. 画像のダウンロード
   3のアップロードが終わると下部にWebPに変換された画像が表示されます。
   個別にダウンロードをするか、その下の「全てダウンロード」から一括ダウンロードをしましょう。
   

これでWebPの画像をダウンロードできます。

画像サイズが大きすぎる場合、WebPに変換したタイミングで自動でリサイズされてしまうことがあります。表示する画面に適したサイズの画像を用意しましょう。

3. Photoshopで作成する方法

WebPShopプラグイン
PhotoshopにWebP対応機能を追加し、直接書き出し可能。

4. コマンドラインで変換する方法

• cwebp
  WebP形式に変換するコマンドラインツール。

cwebp -q 80 input.jpg -o output.webp

• dwebp
  WebP画像を元の形式に戻すためのコマンドラインツール。

dwebp input.webp -o output.png

WebPの使い方

WordPressやCMSでの導入：多くのCMSがWebPをサポートしているため、プラグインや設定を活用して簡単に導入できます。

HTMLでの記述例：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明">
</picture>

WebPがサポートされていないブラウザには、JPEGやPNGが表示されるように設定できます。

WebPと他の画像フォーマットの比較

WebPは、従来のJPEGやPNGと比べて圧縮率が高く、より小さいファイルサイズで画像を保存できます。
また、GIFと同じようにアニメーションをサポートしながら、PNGのように透過処理も可能です。

さらに、AVIFはWebPよりも高圧縮率を誇りますが、対応ブラウザが限定的なため、現時点ではWebPの方が汎用性に優れています。

形式	可逆圧縮	非可逆圧縮	透過処理	アニメーション	圧縮率	主な用途
WebP	〇	〇	〇	〇	高	Web画像
AVIF	〇	〇	〇	〇	非常に高	次世代Web画像
JPEG	✕	〇	✕	✕	中	写真
PNG	〇	✕	〇	✕	低	透過画像
GIF	〇	✕	〇	〇	低	簡易アニメーション

WebPの対応環境

WebPは主要なWebブラウザでネイティブサポートされており、SEO対策としても有効です。
以下は、WebPの対応状況です。

• Google Chrome (含むAndroid版)
• Firefox
• Microsoft Edge
• Opera
• Safari (iOS 14/macOS 11以降)

WebPはVP8ベースの画像フォーマットであり、RIFFコンテナを使用しています。また、WebMと共通の技術を活用しているため、動画フォーマットとの親和性も高いです。

開発者向けには、Googleのlibwebpライブラリを使用することで、独自のWebP変換処理を実装できます。

WebP使用時によくある失敗の解決方法

非対応ブラウザへの対応：
すべてのブラウザがWebPに対応していないため、上記のようにJPEGやPNG（フォールバック画像）も設定することで問題を回避できます。

画像の画質低下：
圧縮率を調整して品質を保つ工夫が必要です。
適切なツールを使用し、画質を確認しながら設定を調整します。

まとめ

WebPは、ウェブサイトのパフォーマンスを向上させる優れた画像フォーマットです。適切に活用することで、SEOの改善やユーザー体験の向上が期待できます。