画像のリサイズ: ピクセル・縦横比・DPI

ピクセル、縦横のサイズ、ファイルサイズ

デジタル画像はピクセルの格子です。4000 × 3000 のようなサイズは横と縦のピクセル数を表し、掛け合わせるとピクセルの総数になります。この例では1,200万ピクセル（12メガピクセル）です。リサイズはこの格子を新しい格子に置き換え、新しいピクセルをそれぞれ元のピクセルから計算します。これをリサンプリングといいます。

ピクセル数は辺の長さの2乗に比例して増えます。幅と高さを半分にすると、ピクセル数は4分の1になります。そのため、ファイルを小さくするには縦横のサイズを縮めるのが最も効果的なことが多いのですが、形式、品質設定、細部の量も影響します。画像を表示・編集するとき、プログラムは画像を非圧縮のピクセルにデコードします。1ピクセルあたり通常4バイトなので、1,200万ピクセルの写真は、ファイルがどれほど小さくても約 48 MB のメモリを必要とします。

縦横比を保つか、先にトリミングする

縦横比とは、幅と高さの比率のことです。4000 × 3000 は 4:3、1920 × 1080 は 16:9 です。縦横比を保つ場合は一方の辺を決めればもう一方も決まるため、4000 × 3000 の写真を幅1,200ピクセルにリサイズすると 1200 × 900 になります。両方の辺を自由に設定すると、比率の異なる画像は引き伸ばされたり押しつぶされたりして、円は楕円になります。

形の異なる正確なサイズにゆがみなく合わせるには、先に目的の縦横比にトリミングしてから、リサイズします。縦向きと横向きの写真をまとめて処理する場合、幅を固定すると縦向きの画像は縦に長くなります。3000 × 4000 の写真を幅1,200ピクセルにすると 1200 × 1600 になります。

画像を縮小・拡大するとき

画像を縮小するときは、新しいピクセルのそれぞれが元の複数のピクセルを要約したものになるのが理想です。近くの少数のピクセルだけを参照する高速な方法では、大きく縮小すると細部が抜け落ち、布地や細い線、文字に、ギザギザの輪郭やちらつく模様（エイリアシングやモアレ）が現れます。より良いリサンプリングでは、より多くの元のピクセルが考慮されます。LeedyBox の画像リサイズは半分ずつ段階的に縮小し、各段階で隣り合うピクセルを平均するため、ブラウザの拡大縮小処理でもより滑らかな結果が得られます。大きく縮小した画像は少しぼやけて見えることがありますが、LeedyBox はシャープ処理を行いません。

拡大では新しいピクセルを周囲のピクセルから推定するため、輪郭はぼやけたりブロック状になったりし、新しい細部は現れません。専用のアップスケーリングソフトはもっともらしく見える細部を加えられますが、それは生成されたものであり、復元されたものではありません。大きな画像が必要な場合は、できるだけ元の大きな画像に戻りましょう。

DPI・PPI と印刷サイズ

DPI（dots per inch）、より正確には PPI（pixels per inch）は、一部の画像ファイルに保存されている数値です。印刷ソフトやレイアウトソフトに、ピクセルをどれくらいの大きさで印刷するかを伝えるもので、ピクセル自体は変わりません。印刷サイズ（インチ）= ピクセル数 ÷ PPI（センチメートルにするには 2.54 を掛けます）。

DPI の値だけを変えると印刷サイズは変わりますが、ピクセルは同じままなので、画面上の見た目はまったく変わりません。鮮明に印刷するには十分なピクセル数が必要です。300 PPI で 6 × 4インチのプリントを作るには 1800 × 1200 ピクセルが必要です。近くで見る写真には 300 PPI 前後がよく推奨されますが、離れて見る大きなプリントではそれより低くても構いません。LeedyBox は元の画像の DPI 値を保持しないため、印刷サイズは印刷するときに設定してください。

ウェブページと画面に合ったサイズの選び方

ウェブページで重要なのは、画像が表示される幅です。レイアウトは CSS ピクセルで測られ、高密度の画面では CSS ピクセル1つにつき縦横それぞれ2つ以上のデバイスピクセルが使われます。そのため、幅 600 CSS ピクセルで表示する画像を「2×」のディスプレイで十分に鮮明に見せるには約1,200ピクセルが必要ですが、同じ場所に4,000ピクセルの写真を置くと通信量とメモリが無駄になります。

ブラウザの開発者ツールなどを使って、レイアウト内で最も大きく表示されるときの幅を測りましょう。srcset 属性と sizes 属性を使えば、同じ画像を 600、1200、1800 ピクセルなど複数の幅で用意でき、ブラウザが画面に合ったものをダウンロードします。アップロードフォームやショップ、SNS が特定のサイズを指定している場合は、そうした要件はサービスによって異なり、変更されることもあるため、最新のドキュメントを確認してください。

形式の選び方と LeedyBox での一括リサイズ

リサイズしたら、内容に応じて形式を選びます。写真は通常、JPG か WebP にすると最も小さくなります。スクリーンショット、ロゴ、透過のある画像には、PNG か、透過にも対応する WebP が適しています。JPG は透過を保存できないため透明な部分は白になり、PNG で保存した写真は元の JPG より大きくなることがあります。詳しくは JPG・PNG・WebP・AVIF の比較をご覧ください。

LeedyBox の画像リサイズは、たくさんの画像をアップロードせずに、ブラウザ内でまとめてリサイズします。

• ピクセルかパーセント（1〜400%）を選びます。「縦横比を維持」をオンにすると、各画像がそれぞれの縦横比を保ちます。
• 目標より小さい画像は、そのオプションをオフにしない限り拡大されません。
• 「元の形式のまま」を選ぶと、JPG、PNG、WebP は同じ形式で、GIF、BMP、AVIF は PNG で保存されます。JPG と WebP は、変更しない限り品質 90 で保存されます。
• カメラが記録した向きが適用され、メタデータはコピーされません。結果が2つ以上ある場合は ZIP ファイルでダウンロードできます。

ファイルをさらに小さくするには、画像圧縮を使い、画像圧縮設定の解説をお読みください。

よくある質問