画像ファイルを小さく保ちながら、可逆・非可逆の両圧縮、透明度（アルファチャンネル）、アニメーション表示に対応します。同等画質で JPEG 比 25〜35%、PNG 比 26% のサイズ削減が見込めます。
技術用語
378
.webp
ドット ウェッピー
体験区分：触った
推奨読者レベル：Level 2-3
何をしてくれるか
どこで出会うか
Lighthouse（ライトハウス）のパフォーマンス診断で「次世代フォーマットを使用してください」と表示されたとき、候補として名前が出ます。AI が生成した PNG を `.webp` に変換する場面でも登場します。
イメージ
開発フローでの位置
画像を用意する
フォーマットを変換する
HTML に組み込む
Lighthouse で確認する
2026.04·needs_review
「PNG を `.webp` に変換したら Lighthouse のスコアが 10 点上がりました。」
.webpの見方
379
この用語の見どころ
1
役割
Web 向けに画像を圧縮する軽量フォーマットです。
2
うれしさ
JPEG・PNG より小さく、表示速度と転送コストが改善されます。
3
注意点
IE 11 は非対応でしたが、IE 11 自体がサポート終了済みです。
4
どこで役立つか
ブログや EC サイトの画像最適化と Lighthouse 改善に有効です。
5
はじめに
主要ブラウザは 2020 年以降対応済みと知れば導入の障壁はありません。
6
深掘り先
Lighthouse、HTML の `<picture>` 要素、SVG
非エンジニアのつまずき
- 名前を見ても画像ファイルとは分からず、初見では何の拡張子か掴めません。
- LLM に「この形式にすると軽くなる」と言われても、仕組みが分からず不安です。
- AI に任せて変換すると、たまに画像が劣化して困ることがあります。
私のコメント
- 第一印象:PNG や JPEG で重くなる悩みを相談した時に紹介された印象です。
- 良い点:画質を保ったままかなり容量を削減でき、表示が軽くなります。
- ダメな点:圧縮の仕方で劣化し、AI 任せの変換だと壊れてしまうこともあります。
- 誰向けか:画像をたくさん載せる Web サイトを作る人に向いています。
関連用語
備考
IE 11 は `.webp` 非対応だったが、Microsoft による IE 11 サポートは 2022-06-15 に終了済み。
F-104·term_tool
バイブコーディング図鑑