Web 向け書き出し：サイズ、形式、品質

書き出しで最初に決めるべきなのは形式ではなく表示サイズです。3000 px のデザイン稿をそのまま書き出して CSS で縮小すると、転送量もデコード負担も無駄になります。先にドキュメントを表示寸法へ縮小し、その状態で書き出してください。

形式の使い分けは単純です。透明が必要な平坦なアートワークは PNG、写真は JPEG、両者の中間を狙うなら WebP や AVIF が小さくなります。PNG は無劣化なので品質スライダーはなく、調整できるのは寸法と色深度だけです。PhotoPSD エディター ではドキュメントの縮小、統合、PNG / JPEG / WebP への書き出しを同じ画面で行えます。PSD → PNG の手順 では統合の部分を、形式の比較 では符号化の差を扱います。

書き出し後に拡大・縮小すると再サンプリングが一段増え、細い線や文字が甘くなります。@2x のような高密度版を作るときも、元のドキュメントから目的の寸法で書き出す方が素直です。