より速いウェブサイトのために画像を準備する
写真とページの画像を、レイアウトが実際に使う幅のWebPにします。トップページが重く、画像がまだカメラのフル解像度のとき、いつもの手順です。
- 速い
- 100%プライベート
- 常に無料
- どのブラウザでも
このページのどこにでも画像を置けます
JPG、PNG、WebP、GIF、SVG、HEIC、AVIF。写真はこの端末に残ります。
使うとき
ここでの初期値はWebPです。写真では多くの場合JPGより小さく、画面部品の透明も残せます。今のブラウザはどれもWebPを表示します。
CMS、メールマガジン、取引先がまだWebPを受け取らないときは、JPGのままにします。描いたとおり残すロゴは、PNGのままにします。
ページ速度が目的なら、幅を小さくすることは形式と同じくらい重要です。4000pxのWebPでも、バイト数はまだ多いです。
JSONの整形や、トークンを公開サイトに貼らずに確認したいなら、 ToolBuddyを使います。そちらもブラウザに残ります。
手順
- ページに置く画像を置きます。
- 縞が見えない限り、ダウンロードするときWebPのまま、品質は0.8前後にします。
- 最大幅は1600前後にします。Retina画面で1200 CSSピクセルとして表示する画像は、2400にします。
- WebPをダウンロードし、テーマやCDNにある元のファイルと差し替えます。
ヒント
- メインの写真には、大きなWebPを1枚使います。写真のPNGスクリーンショットは、必要以上に重くなります。
- 商品の一覧では、幅を揃えるとキャッシュとレイアウトが安定します。
- 相手がプレビューを開けないときは、コピーをJPGにします。サイトにはWebPを残します。
関連
質問
まだ代わりのJPGが必要ですか？
2026年の公開サイトでは、ほとんど不要です。テストできない非常に古いアプリ内ブラウザに合わせるなら、JPGを残します。
WebPでWordPressのメディアライブラリは壊れますか？
今のWordPressはWebPを受け付けます。古いプラグインがそのファイルを拒むなら、その1枚だけJPGに戻します。
このサイトのCDNで処理されますか？
処理されません。変換はこのブラウザの中で行われます。ファイルを見ることはありません。