画像の最適化

画像の最適化は、見た目の品質を目立って落とさずにファイルサイズを減らし、配信方法を改善する処理です。ページの読み込みを速くし、通信量を抑えられます。

Related workflow terms: 画像圧縮.

最適化が重要な理由

画像は、Webページ内で最も容量の大きい素材になりがちです。最適化されていない画像は読み込みを遅くし、通信コストを増やし、検索での評価にも影響する可能性があります。Googleはページ速度をランキングの判断材料の1つとしており、画像が読み込み時間の大部分を占めることもあります。

ドキュメント用のスクリーンショット、製品画面、マーケティング素材などを大量に作る場合は、影響が積み重なります。ナレッジベースへ最適化されていないPNGを100枚埋め込むと、不要なデータが数百MB増えることがあります。同じ内容を適切に最適化すれば、読み込みが速くなり、配信コストが下がり、読者も使いやすくなります。

最適化の目的は、単にファイルを小さくすることではありません。内容に合う画像を、合う形式と大きさで、できるだけ効率よく届けることです。

最適化の手法

• 形式の選択： 内容に適した形式を選びます。文字入りのスクリーンショットにはPNGまたは可逆WebP、写真には非可逆WebPまたはAVIFを使います。幅広い互換性が必要ならJPGを代替形式にできます
• 圧縮： 可逆または非可逆圧縮でファイルを小さくします。可逆圧縮は画質に影響せず、重複したデータを減らします。非可逆圧縮は、人の目では気付きにくいデータを取り除きます
• リサイズ： 実際に表示する寸法で画像を配信します。幅3,000ピクセルのスクリーンショットを800ピクセルで表示するなら、使わないデータまで送ることになります。目的の表示サイズへ合わせてください
• メタデータの削除： 表示に不要でファイルサイズを増やすEXIF、カラープロファイルなどを除きます。画像1枚あたり数KB減る場合があります。ただし、正しい色表示に必要なプロファイルは残してください
• 遅延読み込み： 画面外の画像は、利用者が近くまでスクロールしてから読み込みます。画像自体を変えず、最初の読み込み時間を短くできます
• レスポンシブ画像： srcsetとsizes属性を使い、画面の大きさと解像度に合う画像を配信します

スクリーンショットの最適化

スクリーンショットには、最適化方法に影響する特徴があります。広い単色領域、鋭い文字、正確なUIの輪郭を含むことが多く、見た目を保つには非可逆形式より可逆形式が向いています。

最も効果的な方法は、初めから合う寸法と形式で撮影することです。出力形式、ビューポートサイズ、デバイスピクセル比を撮影前に指定できるツールなら、あとからリサイズや変換をする必要がありません。

一括処理では、自動化した工程で数百枚の画像を一度に圧縮、変換、リサイズできます。手作業を増やさず、出力全体を扱いやすい大きさに保てます。

スクリーンショットを多く使う場合は、可逆形式の元画像を1つ保管し、ブログ、ドキュメント、SNS向けに小さい配信用画像を生成する方法が安定します。きれいな元画像を残しながら、公開ページを軽くできます。

よくある失敗

• 縮小ではなく拡大する： 小さい画像を拡大すると、補間でぼやけたピクセルを持つ大きなファイルになります。必要な最大サイズで撮影し、そこから縮小してください
• 文字の多いスクリーンショットを非可逆圧縮する： JPGなどの非可逆形式では、文字や鋭い輪郭にノイズが入り、読みにくくなります。読ませる文字がある場合は可逆圧縮を使います
• 一度だけ最適化して終える： 新しい内容は継続して追加されます。自動処理がなければ、最適化されていない画像が少しずつ増えます。撮影と公開の工程に最適化を組み込んでください
• 表示寸法を考慮しない： 幅800ピクセルで表示する画像に4,000ピクセルのスクリーンショットを使うと、通信量が無駄になります。表示環境へ合わせてリサイズし、画面ごとに異なるサイズをレスポンシブ画像で配信します