PitaTools Guide
Web掲載画像をリサイズ・圧縮・形式変換する実務手順
掲載枠の寸法を決め、画像のリサイズ、圧縮、WebP等への形式変換、画質と容量の検算を行う順番を解説します。
Free tool
画像リサイズを今すぐ使う
縦横比を保ちながら画像の幅・高さを変更。登録不要で、入力内容はブラウザ内だけで処理します。
表示枠と高密度画面用の必要寸法を決める
最初にCSS上の表示幅と高さ、トリミングの有無、必要な縦横比を決めます。高密度画面用に2倍画像を用意する場合も、元画像より大きく引き伸ばして細部が増えるわけではありません。
画面のPPIは端末比較の指標で、Web画像へ固定DPI値を書き込めば表示が鮮明になるものではありません。ブラウザでは実ピクセル数、CSS寸法、端末の倍率を分けて考えます。
寸法を先に整え、次に圧縮と形式を比較する
画像リサイズで最大表示寸法に合わせてから圧縮すると、不要な画素を保持したまま品質だけを落とす状況を避けられます。文字入り画像は縮小後に100%表示し、細線や小さい文字が読めるか確認します。
JPEG、PNG、WebPでは得意な画像が異なります。写真、透明背景、図版を同じ設定で一括変換せず、候補形式を同じ見た目の条件で保存して容量を比較します。
実ページで見た目・容量・代替テキストを確認する
完成画像は単体プレビューだけでなく、実際のカードや記事幅へ配置して確認します。PCとスマートフォンで拡大、ぼやけ、レイアウトずれがなく、ネットワーク上の取得容量が想定内かを見ます。
画像内だけに重要な説明を閉じ込めず、本文または適切な代替テキストでも内容を伝えます。装飾画像は空のaltにし、リンク画像ではリンク先の目的が分かる文言を使います。
参考資料
- web.dev - Responsive images
表示寸法と端末密度に応じた画像配信を確認する公式学習資料です。
- W3C WAI - Images Tutorial
画像の目的に応じた代替テキストを選ぶためのW3C資料です。