画像サイズの比率計算方法

数字が嫌いな人が数字が嫌いな人向けに書きました。
なにかしら参考になれば幸いです。

この記事は2020年に書いたのですが、何故か不明だが最近(2022年)になってこの記事にちょいちょいアクセスがあるので、大幅に見直し・改善をしました。

主な変更点

    • 文が冗長だったのを修正
    • 計算方法の種類を追加

種類を増やしたのもあって結果的に文字数は増えてしまったが、クオリティは改善したと思います。

この記事の目的

    • 画像サイズの比率計算方法を知る
    • なぜそういう計算・数値になるのか仕組みを理解する
    • これら二つを、数字が嫌いすぎるんだわ、という人向けに説明する

最大の目的は、仕組みを理解することです。
サイズを知るだけなら計算してくれるサイトはあります。その方が早いです。
でも、結局なぜそうなってるかがわからないと、応用できなくて困ることがあります。そういう部分をカバーするために記事を書きました。

あと自分自身が数字嫌いなため、そういう人の参考になればと。

最後にこの記事を書くために参考にしたサイトへのリンクも貼っております。

この記事を読む上での注意点

    • この記事は、数字が嫌いだがなぜその数になるのかわからないのは気持ち悪いという面倒な人間が調べた事のまとめです。
    • 数字が嫌いすぎる人にも伝わるようにと書いたため、説明がくどいですがご了承ください。
    • デジタルイラストのキャンバスサイズを前提に書いている部分があります。適度に読み替えてください。
    • 完璧な解答解説ではありません。理解の手助け程度にしてください(重要な文言)記述内容に間違いがあったらすみません。許してください()

目次

 

画像サイズの比率計算方法


まず最初に計算方法から。以下の二つを書きます。

    • すでに決まった比率から画像サイズを決める方法
    • 画像サイズから比率を割り出す方法

これがベストかはわかりませんが、理解しやすい方法だとは思います。

すでに決まった比率から画像サイズを決める

例 16:9

【一番早い方法】

16 と 9 に適当に同じ数を掛けて、大体欲しい大きさにする。

両方に100掛けて 1600 × 900
両方に200掛けて 3200 × 1800

など。
サイズは大体でいいから 16:9 の比率を絶対に守りたい場合、これで良いです。

このように同じ数で掛けたり割ったりする限り比率は崩れません。
この方法は他のどの比率にも応用できます。

 

【これと決めたサイズを 16:9 に近づける方法】

方法①

メリット: わかりやすい。

デメリット: サイズにより掛ける数が変わるため、その都度2回計算しないといけない。

    1. 長い辺か短い辺どちらかのサイズ(数)を決める
    2. その数が長い辺だったら 16、短い辺だったら 9 で割る
    3. 割って出た数を、比のもう片方に掛ける
長い辺が 1280 で 16:9 に近い画像サイズにしたい場合

1280 ÷ 16 = 80
80 × 9 = 720

サイズは 1280 × 720

短い辺が 1280 で 16:9 に近い画像サイズにしたい場合

1280 ÷ 9 = 142 (142.222…なので四捨五入して142とする)
142 × 16 = 2272

サイズは 2272 × 1280
(どちらにしろ 16:9 に近い数値、でしか無いので 2280 × 1280 や、2300 × 1280 等にしても構いません)

 

方法②

メリット: 掛ける数を覚えておくかリストでも作っておけば、計算が1回で済む

デメリット: たぶん、方法①よりわかりづらい

    1. 長い辺か短い辺どちらかのサイズ(数)を決める
    2. その数が長い辺だったら 0.5625、短い辺だったら 1.8 を掛ける

 

上記の計算の前に 16:9 がどういう関係性なのか調べておきます。
16 ÷ 9 と 9 ÷ 16 を計算します。

16 ÷ 9 = 1.777… (四捨五入して1.8)

9 ÷ 16 = 0.5625

そうしておいたら長い辺か短い辺どちらかのサイズを決めます。

長い辺が 1280 で 16:9 に近い画像サイズにしたい場合

長い辺に 0.5625 を掛ける

1280 × 0.5625 = 720

サイズは 1280 × 720

短い辺が 1280 で 16:9 に近い画像サイズにしたい場合

短い辺に 1.8 を掛ける

1280 × 1.8 = 2304

サイズは 2304 × 1280
(どちらにしろ 16:9 に近い数値、でしか無いので 2300 × 1280 等にしても構いません)

 

例 1:1.618 (黄金比率)

【一番早い方法】

1と 1.618 に適当に同じ数を掛けて、大体欲しい大きさにする。
黄金比率でも同じです。
先程 例 16:9 の【一番早い方法】この方法は他のどの比率にも応用できます と言ったとおりです。

 

【これと決めたサイズを 1:1.618 に近づける方法】

短い辺が 1280 で 1:1.618 の画像サイズにしたい場合

1280 × 1.618 = 2071.04 (四捨五入して2071)

サイズは 1280 × 2071

長い辺が 1280 で 1:1.618 比率の画像サイズにしたい場合

1280 ÷ 1.618 = 791.10… (四捨五入して791)

サイズは 791 × 1280

 

画像サイズから(簡素化された)比率を割り出す

例 1000 × 1400 サイズ ( 1000:1400 )

簡素化された比を知るには、各数値を最大公約数で割ります。

(最大公約数は素因数分解などで調べることができますが、そこまでせんでも、て感じなので最大公約数を計算してくれるサイト等を使ったほうが良いです)

最大公約数(2つの数)|約数・倍数の計算|計算サイト

1000 と 1400 の最大公約数は 200

1000 ÷ 200 = 5
1400 ÷ 200 = 7

1000:1400 の比率を簡素化した数値は 5:7

です。これを応用すれば自分がよく使ってるキャンバスサイズの比率を出して、その同じ比率かつ違うサイズのキャンバスサイズを決定することもできます。
5:7 で短い辺が 3600 としてサイズを決める場合、先程の決まった比率からの計算方法を使って

3600 ÷ 5 = 720
720 × 7 = 5040

サイズは 3600 × 5040

と出来ます (5 と 7 の関係性から計算するのでも、もちろん構いません)。

ただし!!公約数が無い数は簡素化できません。
たとえば素数はその数字と 1 でしか割れないので、簡素化できません。
しかし素数はほとんど奇数なので、偶数であれば多かれ少なかれ簡素化できるはずです。
決めたサイズや計算したいサイズが簡素化できなかった場合、調整して偶数にすると良いかもしれません。それで近い比率を知ることができます。

 

なぜそういう計算・数値になるのか


ここから以下、なぜそうなるのか、を詳しく説明します。
解説とか偉そうな言葉を使ってますが、なるべくわかりやすく書こうとした結果ですので許してください(許しを請いすぎだろ)

もうやめろ、というくらい丁寧に書いたので、それはもう理解しとるわと思う場合は適当に流し読みしつつ進めてください。

 

比率とは


二つ以上の数値を比べた時の割合。

二つ以上のもののバランスを表した数字、とも言えるはず。

そして同じ数で掛けたり割ったりする限りバランスは変わりません。
どういうことか。

例。スーパーで、ポテトチップス1袋とチョコレート3つのお菓子の詰め合わせが売っています。
今日だけ、お菓子の詰め合わせを買うと2倍になります!というセールがあったので買いました。

そしたらポテトチップス2袋とチョコレート6個になりますよね。

バランスが変わらないとは単純にそういうことです。
(どういうセールやねんというツッコミは無しです)

この性質を使って、実際の数値が大きかったり小数点が入っていても、そのバランスをより簡単に分かりやすく表すこともできます。
(※数値によって、割り切れなければ簡単にできないとかいう場合もあります)

それがまさに画像サイズです。

16:9 はつまりは長い辺が、短い辺の約1.8倍ある画像サイズです。
4:3 は長い辺が、短い辺の約1.3倍ある画像サイズです。

1.8 : 1 とか 1.3 : 1 より、ぱっと見わかりやすいですね。

簡単に表すことで、その数値を増やしたり減らしたり、ということも楽にできるようになります。

注意するのは
16:9 でいえば 、短い辺の約1.8倍であって、長い辺の約1.8倍ではない。
ポテトチップスが6袋でチョコレート2個ではない。
ということ。
そりゃそうじゃん、という話ですが。
その対象となるモノと数がどう対応しているのか?
これを間違えないことが重要です。

とにかく二つ以上のもののバランスを表した数字です。それが一番端的な理解方法だと思います。

もっと数学的な説明をしてくれているサイトもありますので、リンクしておきます。学校の数学に沿った説明ですが、丁寧でわかりやすいです。

割合との違いや比ならではの特徴をしっかり覚えよう!比の性質【基礎編】| 中学受験ナビ

 

すでに決まった比率から画像サイズを決める【解説】


【16:9 一番早い方法】の解説

16 と 9 に適当に同じ数を掛けて、大体欲しい大きさにする。

両方に100掛けて 1600 × 900
両方に200掛けて 3200 × 1800

など。

この方法は、16 と 9 に同じ数を掛けるので決してバランスが変わりません。なので一番確実です。まあとにかくそのままな計算です。

このバランスはお菓子や人口じゃないのでややイメージしづらいですが
長い辺が短い辺の〇〇倍ある
ということです。

比率とは、の項目の繰り返しになりますが
16:9 は長い辺が、短い辺の約1.8倍ある画像サイズということです。

 

【これと決めたサイズを 16:9 に近づける方法】の解説

方法①

これは回りくどくなりますが、16:9 に同じ数を掛けて欲しい大きさにするというシステムを応用した計算です。

先に一辺の長さを決めるので、その一辺が元の 16 または 9 にいくつ掛けた数なのかわかれば、もう一辺にも同じ数を掛けてサイズを決められます。

まず長い辺か短い辺どちらかのサイズを決める。

長い辺が 1280 で 16:9 に近い画像サイズにしたい場合
1280 ÷ 16 = 80
80 × 9 = 720

なので、サイズは 1280 × 720

短い辺が 1280 で 16:9 に近い画像サイズにしたい場合
1280 ÷ 9 = 142 (142.222…なので四捨五入して142とする)
142 × 16 = 2272

なので、サイズは 2272 × 1280

上記の計算で、長い辺が 1280 で 16:9 にする場合を例として説明します。
↓↓↓

今回は長い辺を 1280 のサイズにしたい。つまり 16 の側 が 1280 です。

16 側が 1280 とすると、1280 が 16 にいくつを掛けた数なのか?がわかれば、その数を 9 にも掛けることができる。
16 にいくつを掛けた数か、言い換えれば 16 が何個あれば 1280 になるのか?
なので 1280 を 16 個に分ける。

1280 ÷ 16 = 80

で、80でしたと。
つまり、9に掛ける数は 80 とわかりました。

80 × 9 = 720

だから長い辺が 1280 で 16:9 の画像サイズは

1280 × 720

となります。

 

方法②

16 ÷ 9 = 1.777… (四捨五入して約1.8)

9 ÷ 16 = 0.5625

長い辺が 1280 で 16:9 に近い画像サイズにしたい場合
1280 × 0.5625 = 720

なので、サイズは 1280 × 720

短い辺が 1280 で 16:9 に近い画像サイズにしたい場合
1280 × 1.8 = 2304

なので、サイズは 2304 × 1280

この計算では、16:9 において長い辺が短い辺の何倍か?を調べて、それを使ってサイズを割り出しています。

16:9 は長い辺が短い辺の約1.8倍の画像であることはもう書きましたが、片方しか分からないと困るので両方の数値の関係性を出してから計算をした、という流れです。

16 と 9 の関係性

16 は 9 の約1.8倍です。( 16 ÷ 9 = 1.777… なので)

しつこいですが、16:9 は長い辺が、短い辺の約1.8倍ある画像サイズ
ということです。

16 × 9 px でも 3200 × 1800 px でも同じです。
( 9 × 1.8 = 16.2 )
( 1800 × 1.8 = 3240 )

 

9 は 16 の 0.5625倍です。(9 ÷ 16 = 0.5625 なので)
0.何倍 というのがわかりづらければ、56.25 % と考えてもいいです。

16 × 9 px でも 3200 × 1800 px でも同じです。
( 16 × 0.5625 = 9 )
( 3200 × 0.5625 = 1800 )

16:9 は、短い辺が、長い辺の 0.5626倍 (56.25%) ある画像サイズ
とも言えるという事です。

 

この関係性を使って

長い辺が 1280 で 16:9 に近い画像サイズにしたい場合
1280 × 0.5625 = 720
→サイズは 1280 × 720

短い辺が 1280 で 16:9 に近い画像サイズにしたい場合
1280 × 1.8 = 2304
→サイズは 2304 × 1280
(16:9 に近い数値、でしか無いので 2300 × 1280 等にしてもOK)

と計算する訳です。

 

余談 自分に合った方法でどうぞ

1280 × 720 は 16:9 ですが、2272 × 1280 はぴったり 16:9 ではありません。
1280 ÷ 9 が 142.222… となりますが、このように最初に割った時に割り切れない数値を使う場合は、ぴったり 16:9 ではなくそれに近い比、となります。

例えばこれ、と決めたサイズになるべく近い数値でぴったり16:9にする方法※もありますが、そんな厳密なサイズが必要な場面も無いと思うので、このどちらかの方法で対応できるかと思います。

(※長い辺なら下四桁が16の倍数となる整数、短い辺なら各位の数の和が9の倍数となる整数を使えば、決めたサイズに最も近いぴったり 16:9 のサイズを決めることができます)

 

最後に、短い辺が 1280 の場合ですが、どちらの計算方法を使うかにより若干サイズが変わっています。
これは元の 16 や 1280 が 9 では割り切れない数字なのでこうなってしまいます。

そういうのは嫌だから【一番早い方法】で比率が崩れないようにするか、決めたサイズになるべく近い数値でぴったり 16:9 にする方法を使ってみるかどうするか、自分の好きなものを選べばよいと思います。

 

【ちなみに黄金比率の場合】

黄金比率は 1:1.618 なので
1280 × 1.618 = 2071.04 (約2071)
または
1280 ÷ 1.618 = 791.10… (約791)
と計算して 1280 × 2071 または 791 × 1280
とできます。

なんでこうなるか、なんで 1:1.618 の 1 は使わないのかってそれは 1 だからです。
1 で掛けても割っても 1 ですから。

だから 1 に対応する数がいくつか決まれば、その数が 1.618 に掛ける数になるので、1280 なら、1280 を 1.618 に掛ければいいだけ
1280 × 1.618 = 2071.04 (約2071)

サイズは1280 × 2071
ということです。

これは短い辺が 1280 だったらという話で
長い辺が 1280 ならこんどは 1.618側が 1280 になる。
てことは 1.618 が何個あれば 1280 になるのか?
1280 ÷ 1.618 = 791.10… (約791)

そして短い辺は 1 だから 791 は変わらず
サイズは791 × 1280
になります。

 

画像サイズから(簡素化された)比率を割り出す【解説】


例 1000 × 1400 サイズ ( 1000:1400 )

1000 と 1400 の最大公約数=200

1000 ÷ 200 = 5
1400 ÷ 200 = 7

1000 × 1400 ( 1000:1400) の比率を簡素化した数値は 5:7

このやり方は、比の各数値をその最大公約数で割る、言ってみればそれだけです。

最大公約数は、複数の整数に共通する約数で一番大きい数のことです。
約数は整数を割り切れる整数。

簡素化できた比率を他のサイズにも適用したい場合、比率から画像サイズを決定する、で説明した方法で計算する。

これは本当に文章どおりなので、計算サイトの力を借りながら計算すれば問題ないと思います。

最大公約数(2つの数)|約数・倍数の計算|計算サイト

 

もしこの最大公約数も自力で探そう、などと思うと泥沼化するかと。
色々なやり方はあるようだが、何にしても生きて帰って来られないかもしれない()

スイスイ割り切れる数ならいいですが、数値が大きくてスイスイ割り切れない場合は死ぬ。10の位までなら全然いいと思いますけどね。それ以上は死。

約数を漏れなく簡単に見つける方法|小学生でも素因数分解ができると便利!|数学FUN

このサイトに書いてある方法がわかりやすいですが、正直こればかりは計算システムを使ったほうがいいな、と自分で計算してみて思いました。死(何回死ぬんや)

(素因数分解は自然数を素数で割り続けて(答えが1になるまでやる)、割るのに使った素数を積のかたちにすること。
素数は自然数のなかで、その数自体と 1 でしか割り切れない数。
2, 3, 5, 7, 11, 13, 17, 19, 23… 等)

 

そんなわけなので最後に通しの計算をもう一度書いて終わりにしたいと思います。

1000 と 1400 の最大公約数を計算サイトでババンと出していただくと、最大公約数は200。

1000 ÷ 200 = 5
1400 ÷ 200 = 7

1000 × 1400 ( 1000:1400) の比率を簡素化した数値は 5:7。

これで簡素化した比率が出たので、この比率を他のサイズにも適用したい場合、たとえば短い辺が 3600 で 5:7 のサイズを計算する場合

3600 ÷ 5 = 720
720 × 7 = 5040
3600 × 5040

このようにして数値を出せるわけです。自分で。

そして一応もう一度書きますが

公約数が無い数は簡素化できません。
たとえば素数はその数字と 1 でしか割れないので、簡素化できません。
しかし素数はほとんど奇数なので、偶数であれば多かれ少なかれ簡素化できるはずです。
決めたサイズや計算したいサイズが簡素化できなかった場合、調整して偶数にすると良いかもしれません。それで近い比率を知ることができます。

 

以上です。お疲れ様でした。

こういう事が、計算サイトを使えば一発で出来るということなんですが
実際に仕組みがわかっていれば、気持ち悪さが減るし(重要)
もし計算サイトで出せない数値があっても、自分で計算できるかもしれん。できんかもしれん。
自分がよく使ってるキャンバスサイズの比率を出せるのはけっこう便利だと思うんですが。
まあ、頭の体操にはなりましたよね(永眠)

今回考えた基本の計算方法、あと解答もたぶん間違ってないと思いますが、
計算方法の間違い、計算ミスなどあったらすみません。

考え方の参考になれば幸いです。

 

参考にしたサイト


色々わかりやすく書いてくれている人たちに感謝です。ありがとうございます。
何回も言ってるとおり、間違いがあれば儂の勘違いのせいです。すみません。

規格と計算サイト

計算のやり方についてのサイト

投稿者: Ugo

Eager for the world of other sun.