WordPress本体、テーマ、プラグイン、画像処理ライブラリが受け付ける形式を確認します。元画像を保管し、少数のサンプルをアップロードしてサムネイルやレスポンシブ画像を確認してください。事前変換してもCMSによる再処理を防げるとは限りません。
WordPressの画像形式を選ぶ
ライブラリには複数形式を併用できます。編集用の元画像を保存し、用途ごとに配信形式を決めます。
使い方
1
インストール環境とプラグインが受け付ける形式を確認します。
2
写真・ロゴ・スクリーンショットのサンプルで出力を比較します。
3
アップロードしてサムネイルとレスポンシブ画像を確認します。
4
元画像を保管し、段階的に公開します。
よくある間違い
- すべての画像に同じ品質を使う。
- 結果を確認する前に元画像を削除する。
- バイト数が小さいだけで画質や検索順位が良くなると考える。
WordPressで公開する前に
JPEG / PNG
JPEGは写真やJPG指定の用途に適しています。非可逆圧縮で透過は保持できず、透明部分は白い背景で出力されます。 PNGは文字、スクリーンショット、明瞭な輪郭、透過に適しています。PNGが可逆で符号化するのはCanvasが描画したピクセルデータです。ブラウザの復号、色変換、ビット深度処理で元のピクセルが変わることがあり、プロファイルやメタデータも異なる場合があります。
WebP / AVIF
WebP形式はWeb配信と透過に利用でき、アニメーションも格納できます。ただし、このツールはアニメーション入力から1フレームの静止画を書き出します。アニメーションは保持されません。このツールはブラウザのエンコーダーに品質値を渡します。品質設定100でも可逆WebP出力は保証されません。ダウンロードして結果を確認してください。 AVIFは元画像とエンコーダーによって高い圧縮効率を得られる場合があります。読み込みと書き出しは別のブラウザ機能です。利用できない出力形式はこのツールで書き出せません。
画像の配信方法
幅と高さ、またはCSSのaspect-ratioで表示領域を確保します。必要に応じてレスポンシブ画像を使い、主画像は早く、それより下の画像は遅延読み込みを検討します。公開後にモバイルで測定してください。形式変更だけでLCP・CLS・INPの改善は保証されません。
画像形式を比較
JPEG・PNG・WebP・AVIFを内容、透過、互換性、編集用途から比較します。