画像フォーマットWebPの歴史｜2010年発表からWordPress対応まで
WebPの歴史の全体像
- WebPは2010年にGoogleから発表された
- Web画像の軽量化を目的に開発された
- 現在はWordPress運用でも使いやすい形式になった
WebPの歴史は、Webサイトの表示速度を改善するための画像圧縮技術の流れとして整理できます。最初はJPEG代替として注目され、その後、PNGやGIFの領域にも広がりました。
| 時期 | 出来事 | 意味 |
|---|---|---|
| 2010年 | GoogleがWebPを発表 | Web向けの新しい画像圧縮形式として登場 |
| 2011年以降 | 可逆圧縮や透過対応が追加 | PNGのような用途にも広がる |
| その後 | アニメーション対応 | GIF代替としても使える領域が広がる |
| 主要ブラウザ対応拡大 | Chrome以外にも対応が広がる | 実運用で使いやすくなる |
| 2021年 | WordPress 5.8でWebP対応 | WordPressメディア運用で扱いやすくなる |
実用例
現在のWordPress運用では、アイキャッチ画像をWebP化して軽量に保つ方法が実用的です。
2010年のWebP発表
- Webページの画像軽量化を目的に登場
- 非可逆圧縮でJPEGより軽くする狙いがあった
- Web高速化の文脈で注目された
WebPは、Webページの読み込み速度を改善するための画像フォーマットとして発表されました。当時のWebサイトでは画像ファイルの重さが表示速度に影響しやすく、より効率的な画像形式が求められていました。
| 比較対象 | 当時の課題 | WebPの狙い |
|---|---|---|
| JPEG | 写真向きだが容量が大きくなる場合がある | 同程度の見た目で軽量化を目指す |
| PNG | 透過や図解に強いが重くなりやすい | 後に可逆圧縮や透過対応で領域を広げる |
| GIF | アニメーションに使われるが画質制限がある | 後にアニメーション対応で代替候補になる |
補足
WebPは最初から万能な形式として完成していたわけではなく、機能追加と対応環境の拡大によって実用性を高めていきました。
可逆圧縮・透過・アニメーション対応
- 可逆圧縮により画質を保った圧縮が可能になった
- 透過対応によりPNG的な用途にも使えるようになった
- アニメーション対応によりGIF代替の用途も広がった
WebPは、非可逆圧縮だけでなく、可逆圧縮、透過、アニメーションにも対応するようになりました。これにより、写真だけでなく、図解、ロゴ、切り抜き、簡単なアニメーションにも使いやすくなりました。
| 機能 | 対応による変化 | 使いどころ |
|---|---|---|
| 非可逆圧縮 | 写真を軽くしやすい | アイキャッチ、写真 |
| 可逆圧縮 | 画質を保って圧縮できる | 図解、文字入り画像 |
| 透過 | 背景を抜いた画像に使える | ロゴ、切り抜き |
| アニメーション | 動きのある画像に使える | 簡単な説明アニメーション |
実用例
ブログのアイキャッチでは、文字が読める程度の品質を保ちながらWebP化すると、見た目と軽量化のバランスが取りやすくなります。
ブラウザ対応の広がり
- 初期は対応ブラウザが限られていた
- 主要ブラウザ対応が進んで実用性が高まった
- 現在はWebサイト運用で採用しやすい形式になった
画像フォーマットは、対応ブラウザが広がらないと実運用しにくい面があります。WebPも初期は対応環境が限られていましたが、主要ブラウザの対応が進むことで、実際のWebサイトで使いやすくなりました。
| 段階 | 状況 | 運用への影響 |
|---|---|---|
| 初期 | 対応環境が限定的 | 代替画像が必要な場面があった |
| 対応拡大期 | 主要ブラウザで対応が進む | 採用しやすくなる |
| 現在 | 多くの環境で利用しやすい | WordPress画像運用にも使いやすい |
注意
現在でも、業務環境や古い端末を想定する場合は、表示確認を行うと安心です。
WordPressでのWebP対応
- WordPress 5.8でWebP画像の扱いがしやすくなった
- メディアライブラリでWebPを扱える
- アイキャッチや記事画像の軽量化に役立つ
WordPressでは、5.8でWebP画像のアップロードと利用が扱いやすくなりました。これにより、ブログ運用でもWebPをアイキャッチや本文画像に使いやすくなっています。
| WordPress運用 | WebPの使いどころ | 効果 |
|---|---|---|
| アイキャッチ | 一覧・SNSカード用画像 | 見た目を保ちながら軽量化 |
| 記事画像 | 図解や説明画像 | ページ読み込みを軽くする |
| メディア管理 | 形式を統一する | 運用しやすい |
| REST API | メディア登録に使う | 投稿自動化と相性が良い |
実用例
WebPの基本は、画像フォーマットWebPとはでご紹介しています。
KOPENGUINでのWebP運用
- アイキャッチは1200×800のWebPを基本にする
- 上部1/3に大きなタイトルを置く
- 下部2/3に本文イメージを置く
KOPENGUIN.COMの運用では、アイキャッチをWebP形式に統一すると、軽量化と管理の両面で扱いやすくなります。本文画像は必要な場合だけ追加し、画像数を増やしすぎない方針が安定します。
| 運用ルール | 内容 | 目的 |
|---|---|---|
| 形式 | WebP | 軽量化 |
| サイズ | 1200×800 | 一覧とSNSカードに対応 |
| タイトル配置 | 上部1/3 | スマホ一覧でも読める |
| 本文イメージ | 下部2/3 | 内容を視覚的に伝える |
| ペンギン | 記事ごとに役割を変える | ワンパターン化を防ぐ |
補足
WordPress REST APIでWebP画像を登録する流れは、WordPress REST APIとはも参考になります。
公式情報・参考ページ
- Google公式のWebP資料を確認する
- WordPress 5.8のWebP対応情報を確認する
- WebPの基本と運用記事を合わせて確認する
| 公式ページ | 確認できる内容 |
|---|---|
| Google WebP | WebPの特徴、圧縮、透過、アニメーション |
| WebP Compression Techniques | WebP圧縮の技術的背景 |
| WordPress 5.8 adds WebP support | WordPress 5.8でのWebP対応 |
| WordPress REST API：Media | メディア登録API |