WebP は、同じ見た目のままファイルサイズを小さくできる画像形式です。JPEG より2〜3割小さくなることが多く、ページの重さの大半が画像である以上、効果がそのまま表示速度に出ます。

形式の選び分け

• 写真 … WebP。なければ JPEG
• 透過が必要な画像 … WebP。なければ PNG
• ロゴ・アイコン・図 … SVG。拡大しても荒れず、ファイルも小さい
• アニメーション … WebP か動画。GIFは重くなります

ロゴを PNG で置いているサイトは多いですが、SVG にすると高解像度の画面でもぼやけず、サイズも小さくなります。元のデータがベクターで作られているなら、書き出し直す価値があります。

対応状況

WebP は現在使われているブラウザではほぼ対応しています。特別な切り替えを用意しなくても問題になることは少なくなりました。

さらに小さくできる AVIF という形式もあります。主要なブラウザで表示できますが、作るのに時間がかかる、対応していない編集ソフトがある、といった事情があるため、まずは WebP で足ります。

og:image に指定する画像は、SNS側が読めない形式だと表示されません。共有用の画像は PNG か JPEG にしておくのが安全です。

WordPressでの入れ方

• アップロード時に自動でWebPも作るプラグインを使う
• CDN側で自動変換する
• 書き出しの段階でWebPにしておく

プラグインを使うと運用が楽ですが、生成したファイルがサーバーに溜まります。容量の上限が近いサーバーでは、そこも見ておいてください。

形式より先に効くこと

形式を変える前に、大きさを見てください。4000px の写真を 600px の枠で表示している状態では、WebP にしても重いままです。

1. 表示する大きさに合わせて縮小する
2. WebP で書き出す
3. 画面外の画像は遅延読み込みにする（ファーストビューは除く）
4. width と height を書く（レイアウトのずれを防げます）

この順番でやると、ほとんどのサイトは目に見えて軽くなります。

当社では構築時に画像の書き出しと指定をまとめて整えています。画像が重いサイトの改善だけのご依頼にも対応しています。