画像のアスペクト比とは？計算方法と比率を維持したリサイズ方法を解説
画像をWebサイトやSNS、動画のサムネイルなどに使用するとき、「画像が横に伸びた」「縦に潰れた」「指定サイズに合わせたら見た目がおかしくなった」という経験はないでしょうか。
画像の形が崩れてしまう主な原因は、元画像のアスペクト比を維持せずに横幅や高さを変更していることです。
この記事では、画像のアスペクト比の意味や計算方法、縦横比を維持したまま画像をリサイズする方法を分かりやすく解説します。
画像サイズをすぐに計算したい場合は、以下のツールを利用してください。
画像アスペクト比・リサイズ計算ツール
元画像の横幅と高さを入力するだけで、アスペクト比の確認や、比率を維持したリサイズ後のサイズを計算できます。
アスペクト比とは
アスペクト比とは、画像や画面における横幅と高さの比率のことです。
一般的には、次のように「横：縦」の形式で表します。
- 16:9
- 4:3
- 3:2
- 1:1
- 9:16
例えば、横幅1920px、高さ1080pxの画像は「16:9」です。
横幅と高さのピクセル数が異なっていても、比率が同じであれば同じアスペクト比になります。
| 画像サイズ | アスペクト比 |
|---|---|
| 1920×1080px | 16:9 |
| 1280×720px | 16:9 |
| 3840×2160px | 16:9 |
| 1024×768px | 4:3 |
| 1080×1080px | 1:1 |
1920×1080pxと1280×720pxは画像サイズこそ異なりますが、どちらも横幅と高さの関係が16:9なので、同じ形の画像です。
画像サイズとアスペクト比の違い
画像サイズとアスペクト比は、似ているようで意味が異なります。
画像サイズは、画像を構成する横方向と縦方向のピクセル数です。
例えば、以下のように表します。
1920×1080px
一方のアスペクト比は、横幅と高さの関係を簡単な比率にしたものです。
16:9
つまり、画像サイズは画像の細かさや大きさを示し、アスペクト比は画像の形を示します。
同じ16:9でも、640×360pxより1920×1080pxの方が多くのピクセルを持っています。そのため、同じ大きさで表示した場合は、一般的に1920×1080pxの方が細部まで表現できます。
ただし、画像を拡大したときの見え方は、元画像の品質や圧縮率などによっても変わります。
アスペクト比の計算方法
アスペクト比は、画像の横幅と高さをそれぞれ最大公約数で割ることで求められます。
例えば、1920×1080pxの画像を計算してみます。
1920と1080の最大公約数は120です。
1920 ÷ 120 = 16
1080 ÷ 120 = 9したがって、1920×1080pxのアスペクト比は次のようになります。
16:91024×768pxの場合、最大公約数は256です。
1024 ÷ 256 = 4
768 ÷ 256 = 3そのため、アスペクト比は4:3です。
数字が大きい画像や、一般的な比率に当てはまらない画像を手作業で計算するのは少し面倒です。その場合は、画像アスペクト比計算ツールを利用すると簡単に確認できます。
よく使われる画像のアスペクト比
画像の用途によって、よく使われるアスペクト比は異なります。
16:9
16:9は、動画やテレビ、PCモニターなどで広く使われている横長のアスペクト比です。
代表的な画像サイズには、次のようなものがあります。
- 1280×720px
- 1920×1080px
- 2560×1440px
- 3840×2160px
YouTube動画や動画サムネイル、Webサイトの横長画像などにも適しています。
DeviceXplorerのツール用サムネイルも、基本的には16:9で統一すると一覧表示した際の見た目を揃えやすくなります。
4:3
4:3は、以前のテレビやPCモニター、コンパクトデジタルカメラなどでよく使われてきた比率です。
代表的な画像サイズは以下のとおりです。
- 800×600px
- 1024×768px
- 1600×1200px
16:9よりも正方形に近いため、縦方向の情報を多く見せやすい特徴があります。
3:2
3:2は、一眼レフカメラやミラーレスカメラなどでよく使われるアスペクト比です。
代表的な画像サイズには、次のようなものがあります。
- 6000×4000px
- 3000×2000px
- 1500×1000px
写真をL判などで印刷する場合にも比較的使いやすい比率です。
1:1
1:1は、横幅と高さが同じ正方形のアスペクト比です。
代表的な画像サイズは以下のとおりです。
- 500×500px
- 1080×1080px
- 2000×2000px
SNSの投稿画像やプロフィール画像、商品画像などでよく使用されます。
9:16
9:16は、16:9を縦向きにしたアスペクト比です。
代表的な画像サイズには、次のようなものがあります。
- 720×1280px
- 1080×1920px
- 1440×2560px
スマートフォン向けの縦型動画や、ショート動画、ストーリーズなどで利用されます。
アスペクト比を維持したリサイズとは
画像のリサイズとは、画像の横幅や高さを変更することです。
このとき、元画像と同じアスペクト比を維持して横幅と高さを変更すれば、画像の形は崩れません。
例えば、1920×1080pxの画像を横幅960pxに縮小する場合、高さも半分の540pxにします。
1920×1080px
↓
960×540pxどちらもアスペクト比は16:9です。
一方、横幅だけを960pxに変更し、高さを1080pxのままにすると、画像が縦長に引き伸ばされてしまいます。
1920×1080px
↓
960×1080pxこのような変形を防ぐには、横幅を変更した割合に合わせて、高さも同じ割合で変更する必要があります。
横幅から高さを計算する方法
元画像の横幅・高さと、変更後の横幅が分かっている場合は、次の式で変更後の高さを求められます。
変更後の高さ
＝ 元画像の高さ × 変更後の横幅 ÷ 元画像の横幅例えば、1920×1080pxの画像を横幅1200pxに変更する場合は、次のように計算します。
1080 × 1200 ÷ 1920
＝ 675したがって、リサイズ後の画像サイズは1200×675pxです。
高さから横幅を計算する方法
変更後の高さが決まっている場合は、次の式で横幅を求められます。
変更後の横幅
＝ 元画像の横幅 × 変更後の高さ ÷ 元画像の高さ1920×1080pxの画像を高さ800pxに変更する場合は、次のようになります。
1920 × 800 ÷ 1080
＝ 約1422.22画像サイズには通常、整数のピクセル数を使用するため、用途に応じて1422pxなどに丸めます。
端数を丸めると、元のアスペクト比と完全には一致しない場合がありますが、1px程度の差であれば見た目への影響はほとんどありません。
リサイズとトリミングの違い
リサイズとトリミングは、どちらも画像サイズを調整する方法ですが、処理内容が異なります。
リサイズ
リサイズは、画像全体を拡大または縮小する処理です。
アスペクト比を維持してリサイズすれば、元画像の内容を残したままサイズを変更できます。
ただし、元画像と異なるアスペクト比に合わせる場合は、上下または左右に余白が発生することがあります。
トリミング
トリミングは、画像の一部を切り取る処理です。
例えば、3:2の写真を16:9に変更する場合、上下の一部を切り取ることで16:9の画像にできます。
余白を作らず指定の比率に合わせられますが、画像の端にある被写体や情報が切れてしまう可能性があります。
変形
横幅と高さをそれぞれ独立して変更し、指定サイズへ無理に合わせる方法です。
画像全体を残せる一方で、人物や物体が横長・縦長に変形してしまいます。特別な意図がない限り、基本的には避けた方がよいでしょう。
元画像と異なるアスペクト比に変更する方法
元画像と異なるアスペクト比へ変更する場合、主に次の3つの方法があります。
画像の一部を切り取る
画像をトリミングして、必要な比率に合わせます。
余白を作らずに表示できますが、元画像の一部が失われます。
余白を追加する
元画像全体を残し、上下または左右に余白を追加して指定の比率に合わせます。
画像の内容を切り取りたくない場合に適していますが、余白部分が目立つことがあります。
背景を拡張する
画像編集ソフトや生成AIなどを使って、元画像の外側に背景を追加します。
自然に処理できれば画像全体を残しながら比率を変更できますが、背景の生成結果によっては不自然に見える場合があります。
アスペクト比を維持するメリット
アスペクト比を維持して画像をリサイズする主なメリットは、画像の変形を防げることです。
人物の顔や製品写真などは、わずかに縦横比が変わっただけでも不自然に見えることがあります。
また、Webサイト内の画像を共通の比率で揃えることで、記事一覧や関連コンテンツの見た目を整えやすくなります。
特に、以下のような画像はアスペクト比を統一するのがおすすめです。
- 記事のアイキャッチ画像
- ツールページのサムネイル
- 商品レビューの一覧画像
- 関連記事カード
- YouTubeのサムネイル
- SNSへ投稿する告知画像
同じ用途の画像を16:9や1:1などに統一すると、サイト全体にまとまりが生まれます。
画像を拡大すると画質が悪くなる理由
アスペクト比を維持していても、小さな画像を大きく拡大すると、画像がぼやけたり輪郭が粗く見えたりする場合があります。
これは、元画像に存在しないピクセルを補いながら拡大する必要があるためです。
例えば、横幅640pxの画像を1920pxまで拡大すると、横方向のピクセル数は3倍になります。しかし、元画像が持つ情報量そのものが3倍になるわけではありません。
そのため、画像をリサイズする際は、基本的に次の使い方が適しています。
- 大きな画像を小さくする
- 元画像と同程度のサイズで使用する
- 大幅な拡大を避ける
高解像度化機能やAIアップスケーリングを使うことで見た目を改善できる場合もありますが、元画像に写っていない細部を完全に復元できるとは限りません。
Webサイト用画像をリサイズするときの注意点
Webサイトで使用する画像は、大きければ大きいほどよいわけではありません。
表示サイズに対して画像サイズが極端に大きいと、ファイル容量が増え、ページの読み込みが遅くなる可能性があります。
例えば、記事内で横幅800px程度にしか表示しない画像に、6000pxを超える元画像をそのまま使用する必要性は高くありません。
Webサイト用に画像を用意するときは、以下を確認しましょう。
- 表示する場所に合ったアスペクト比になっているか
- 必要以上に大きな画像サイズになっていないか
- 画像が変形していないか
- 重要な文字や被写体が切れていないか
- スマートフォンでも見やすいか
- ファイル容量が大きすぎないか
画像のサイズだけでなく、JPEG、PNG、WebPなどのファイル形式や圧縮率も表示速度に影響します。
よくある質問
アスペクト比と縦横比は同じですか？
基本的には同じ意味です。
アスペクト比、縦横比、画面比率などの表現が使われますが、いずれも横幅と高さの関係を示します。
1920×1080のアスペクト比はいくつですか？
1920×1080pxのアスペクト比は16:9です。
1920と1080をそれぞれ最大公約数の120で割ると、16と9になります。
1280×720と1920×1080は同じ比率ですか？
どちらも16:9なので、同じアスペクト比です。
画像サイズは異なりますが、画像の形は同じです。
アスペクト比を維持せずにリサイズするとどうなりますか？
画像が横に引き伸ばされたり、縦に潰れたりします。
人物や製品などの形も変わってしまうため、通常はアスペクト比を維持してリサイズします。
16:9の画像を正方形にできますか？
可能です。
ただし、16:9と1:1では形が異なるため、左右を切り取る、上下に余白を追加する、背景を拡張するといった処理が必要です。
画像サイズに小数は使えますか？
画像のピクセル数は通常、整数で指定します。
計算結果に小数が出た場合は、四捨五入などで整数へ丸めて使用します。
スマートフォンの画像にも使えますか？
使えます。
画像の横幅と高さが分かれば、スマートフォンで撮影した写真やスクリーンショットのアスペクト比も計算できます。
動画のアスペクト比も同じ方法で計算できますか？
動画も横幅と高さの解像度から同じ方法で計算できます。
例えば、1920×1080の動画は16:9、1080×1920の縦型動画は9:16です。
まとめ
アスペクト比とは、画像の横幅と高さの関係を示す比率です。
画像をリサイズするときは、元画像のアスペクト比を維持することで、画像が横に伸びたり縦に潰れたりするのを防げます。
横幅または高さの一方を変更する場合は、もう一方も同じ割合で変更しましょう。
計算を手作業で行うのが面倒な場合は、画像アスペクト比・リサイズ計算ツールを使用すると、元画像の比率や変更後の画像サイズをすぐに確認できます。
画像アスペクト比・リサイズ計算ツール
元画像の横幅と高さを入力するだけで、アスペクト比の確認や、比率を維持したリサイズ後のサイズを計算できます。