まず実際の表示幅を確認
900px幅で表示する場所に5000px画像を置いても、画面に見える情報が5倍になるわけではありません。ブラウザは大きなファイルを取得して縮小表示します。
高密度ディスプレイには余裕を持たせる
高密度画面では1CSSピクセルを複数の物理ピクセルで表すため、重要な画像は表示幅より大きめに用意できます。ただし原寸最大を維持する必要はありません。
写真とUIキャプチャは基準が違う
写真は非可逆圧縮に強いことが多い一方、コードや表、小さな文字を含む画像は圧縮跡が可読性を下げることがあります。
数字より作業手順を決める
表示サイズ確認→リサイズ→形式選択→圧縮→実画面確認の順にすると、画像ごとに固定値を覚えなくても安定して最適化できます。