用語
画像のリサイズ
画像のリサイズは、画像全体の内容を見える状態に保ちながら、ピクセル寸法を大きくまたは小さくする処理です。
リサイズと切り抜きの違い
どちらも画像の寸法を変えますが、内容への作用は大きく異なります。
リサイズは画像全体を拡大または縮小します。元画像にある要素は、大きさが変わってもすべて残ります。1,920×1,080のスクリーンショットを960×540へリサイズすると、同じ内容が縦横半分の寸法へ収まります。何も除かれず、すべてが同じ比率で小さくなります。
切り抜きは画像の一部を除きます。残った内容は元の大きさと解像度を保ちます。1,920×1,080のスクリーンショットを960×540へ切り抜くと、元画像の4分の1だけが、細部を保ったまま表示されます。
目的に合わせて選びます。画像全体を異なる寸法で使いたい場合、たとえばサムネイル、小さい埋め込み、特定の画面サイズ向けの画像にはリサイズが適しています。特定の領域だけへ焦点を当て、それ以外を捨てるなら切り抜きを使います。
スクリーンショットでは、どちらもよく使います。リサイズはギャラリー用のサムネイルやWebへ埋め込む小さい画像を作ります。切り抜きは特定のUI要素、エラーメッセージ、注目する領域だけを取り出します。
リサイズを使う場面
- Webの最適化: 大きなスクリーンショットをページのレイアウトへ合わせ、読み込み時間を減らします。2倍のRetina画像である2,880×1,800の画像を1,440×900 CSSピクセルで表示し、高DPI画面には高解像度ファイルを配信できます
- サムネイルとプレビュー: ギャラリー、ファイルブラウザ、SNSのプレビューでは小さい画像が必要です。元の撮影画像からリサイズして生成します
- メールとメッセージ: 多くのメールクライアントやチャットサービスにはサイズ上限があります。スクリーンショットを上限へ収めると、ダウンロードする添付ファイルではなく本文内に表示しやすくなります
- レスポンシブ画像の一式: 現在のWebサイトでは、端末ごとに異なる大きさの画像を配信できます。1枚のスクリーンショットから幅400px、800px、1,200pxなど複数の画像を作ります
- 印刷準備: 印刷するスクリーンショットには、指定したDPIにおけるピクセル寸法が必要です。要件へ合わせて寸法を調整します
実用的なのは、元の撮影画像をマスターとして保管し、すべての書き出しサイズをその1つから生成する方法です。再サンプリングを繰り返さず、サムネイル、ブログへの埋め込み、高DPI版の内容をそろえられます。
リサイズが画質に与える影響
縮小は通常、問題が起こりにくい処理です。ピクセルをまとめるため、存在しない情報を作るのではなく、元の情報を集約して鮮明さを保ちます。幅1,920ピクセルのスクリーンショットを幅960ピクセルへ縮小すると、新しい大きさでも整った見た目になります。
画質が落ちやすいのは拡大です。ソフトウェアが元画像にはなかったピクセルを作る必要があります。この補間処理の結果は、方法と拡大率によって、わずかに柔らかく見えるものから明らかなぼやけまで変わります。
スクリーンショットでは、拡大の影響が特に目立ちます。文字、アイコン、UIの境界は、鋭い1ピクセルの線で構成されます。補間によって輪郭が柔らかくなり、文字がぼやけ、アイコンを判別しにくくなります。大きな画像が必要なら、既存の画像を拡大するより、目的の解像度で撮り直すほうがきれいです。
補間方法も影響します。ニアレストネイバー法は硬いピクセルの輪郭を保ちますが、整数以外の倍率ではブロック状に見えます。多くの内容ではLanczos法が鮮明な結果を作ります。バイリニア法とバイキュービック法は滑らかですが、スクリーンショットにある鋭い輪郭をぼかしがちです。
よくある失敗
- 撮り直さず拡大する: 元の寸法を超えて拡大すると、必ず画質が落ちます。大きな画像が必要なら、小さい画像を拡大せず、正しい解像度で撮り直してください
- 縦横比を固定しない: 幅と高さを別々に変えると、円が楕円に、正方形が長方形になります。意図的に変形させる場合を除き、必ずアスペクト比を固定します
- 内容に合わない補間方法を使う: 文字の鋭いスクリーンショットへバイキュービック法の平滑化を使うと、ぼやけます。UIにはニアレストネイバー法またはLanczos法、写真にはバイキュービック法など、内容に合わせて選びます
- リサイズ前に圧縮する: 先に圧縮すると不要なピクセルを処理し、圧縮ノイズを目立たせる場合があります。最終寸法へリサイズしてから圧縮してください
よくある質問
リサイズと切り抜きの違いは?
リサイズは、すべての内容を見える状態に保ち、画像全体のピクセル寸法を大きくまたは小さくします。切り抜きは、特定の領域へ焦点を当てるため画像の一部を除きます。リサイズは拡大・縮小、切り抜きは削除です。
画像をリサイズすると画質が落ちますか?
縮小はピクセルをまとめる処理なので、一般に画質を保ちやすい方法です。拡大では、補間によって新しいピクセルを作る必要があり、ぼやけやノイズが生じます。
スクリーンショットのリサイズに適した補間方法は?
鋭い文字やUI要素を含むスクリーンショットには、ニアレストネイバー法またはLanczos法を使います。バイリニア法やバイキュービック法は写真に向きますが、インターフェースの硬い輪郭をぼかす場合があります。
リサイズと圧縮はどちらを先に行いますか?
リサイズを先に行います。大きな画像を圧縮してからリサイズすると、あとで捨てるピクセルまで処理することになります。目的の寸法へ変えてから小さい画像を圧縮するほうが効率的です。
アスペクト比を変えずにリサイズできますか?
はい。幅と高さを同じ比率で拡大または縮小します。多くのツールには「縦横比を固定」などの設定があり、自動で比率を保てます。片方の寸法だけを変えると画像がゆがみます。
出典
- レスポンシブ画像 — MDN