1. WebPとは？
WebPは、Googleが作った新しい画像の保存方法（フォーマット）です。JPEGやPNGよりもファイルサイズを小さくし、ページが早く表示されるように設計されています。
2. WebPのメリット
圧縮率が高い：画像の品質を損なうことなく、ファイルサイズを大幅に削減します。
透明とアニメーション対応：PNGのような透明画像やGIFのようなアニメーションも可能です。
ページ速度の向上：軽量なため、ページの読み込みが速くなり、SEOにも効果的です。
3. WebP画像の作成方法
WebPは無料のブラウザサービスで作成することができます。以下はその手順になります。
- WebPに変換したい画像の用意
WebPにしたい画像を1枚また複数枚用意しましょう。
JPEG/PNG/GIFに対応しているので、これらの形式であればどれでも問題ございません。 - 「PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱」へアクセス
以下のURLからサイトにアクセスしましょう。
https://saruwakakun.com/tools/png-jpeg-to-webp/ - 画像のアップロード
WebPにしたい画像を以下の添付画像のようにドラッグ&ドロップします。
- 画像のダウンロード
3のアップロードが終わると下部にWebPに変換された画像が表示されます。
個別にダウンロードをするか、その下の「全てダウンロード」から一括ダウンロードをしましょう。
これでWebPの画像をダウンロードできます。
画像サイズが大きすぎる場合、WebPに変換したタイミングで自動でリサイズされてしまうことがあります。表示する画面に適したサイズの画像を用意しましょう。
3. WebPの使い方
WordPressやCMSでの導入：多くのCMSがWebPをサポートしているため、プラグインや設定を活用して簡単に導入できます。
HTMLでの記述例：
<picture> <source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明">
</picture>WebPがサポートされていないブラウザには、JPEGやPNGが表示されるように設定できます。
4. WebP使用時によくある失敗と解決方法
非対応ブラウザへの対応：
すべてのブラウザがWebPに対応していないため、上記のようにJPEGやPNG（フォールバック画像）も設定することで問題を回避できます。
画像の画質低下：
圧縮率を調整して品質を保つ工夫が必要です。適切なツールを使用し、画質を確認しながら設定を調整します。
5. まとめ
WebPは、ウェブサイトのパフォーマンスを向上させる優れた画像フォーマットです。適切に活用することで、SEOの改善やユーザー体験の向上が期待できます。
小山浩行
2024.11.01