かつて、モバイルの注目の画像がすべてマングルを通過したように見える WordPress テーマを出荷しました。 顔を伸ばし、ロゴを押しつぶした。 原因は CSS ファイルの 3 文字でした。 height: 240px 隣に座っている width: 100%。 およそ1.56:1 の比率を生じた375 ピクセルの電話で、画像は16:9 - 1.78:1 であった。 紙の上では大きな違いではない。 人間の顔では非常に明白である。
アスペクト比は、単純すぎて誤解を招くと感じられるものの 1 つであるため、誰も再確認しません。 1 つの部門です。 それでも、ビデオのエクスポート、間違った場所でトリミングされる OpenGraph プレビュー、黒いバーのサムネイル、27 インチのモニターでは見栄えの良いヒーロー画像を静かに台無しにし、携帯電話ではひどいものにします。 数学は些細なことですが、丸めミスのコストはそうではありません。
私が造る Toolz.dev そして、私はこの計算を常に行っています - プラグイン& #39; の管理画面の画像のサイズを設定し、Reels形式のビデオをエクスポートし、OpenGraph画像が実際にどうあるべきかを考え出すために、を構築しました アスペクト比計算 1 つのフィールドでそれを行い、その機能を示す。 比率と 1 つの次元を指定すると、もう一方の次元が得られます。 サイズを指定すると、比率に縮小され、その比率が何と呼ばれるかがわかります。
tl;dr: アスペクト比は幅を高さで割ったもので、コロンで 2 つの数字として記述されます。 不足している高さを見つけるには:
width × (ratioHeight ÷ ratioWidth)。 欠落している幅を見つけるには:height × (ratioWidth ÷ ratioHeight).ある大きさから比を得るには、両方の数をそれらの最大公約数で割る - 1920 と 1080 は GCD が 120 であることを共有し、これは 16:9 となる。 the アスペクト比計算 ブラウザで 3 つすべてを実行します。16:9、9:16、1:1、4:3、3:2、21:9、1.91:1、2.39:1 のプリセットを使用します。
アスペクト比とは何ですか?
アスペクト比は、画像と #39; s の幅とその高さの比例関係です。これは、コロンで区切られた 2 つの数値 (16:9、4:3、1:1) として書かれており、その説明は次のとおりです 形、サイズではありません。
その区別がゲーム全体です。 1280 × 720、1920 × 1080、および 3840 × 2160 は、1 つのアスペクト比を持つ 3 つの異なる解像度です。これらは 3 つのサイズで同じ形状であるため、歪みやトリミングなしで他のサイズにスケールします。一方、1920 × 1080 と 1920 × 1200 は、幅がほぼ同じで、高さが 120 ピクセル異なり、基本的に異なる形状です。1 つは 16:9、もう 1 つは 16:10 で、一方用に設計されたコンテンツを他方用に構築されたコンテナに入れることは、レターボックスまたはトリミングを意味します。
比率は、幅 ÷ 高さを最小の値で表したものです。 1920 ÷ 1080 = 1.777…、そして分数 1920/1080 は 16/9 に減少します。 どちらも同じ事実である 2 つの方法があります。小数点の形は比較が簡単です (1.78 は 1.5 よりも広いのですか? 明らかに)、コロンの形の方が言いやすいです。
本当に必要な3つの計算
欠損次元を解く
形状と片面を知っています これは実際にもっとも一般的なケースです " 16:9 の画像が必要で 私の容器は1280 ピクセルの幅 - 高さはどれくらいですか "
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
そして別の方向に：
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
計算機で、プリセットを選択するか、比率を入力し、知っている寸法を入力し、もう一方は空白のままにして、[計算] をクリックします。 空のフィールドに埋めて、その下に算術を示します。
サイズを比率に縮小する
サイズがあり、その形状を知りたい場合 - 通常、2 つのアセットが一致していることを確認するか、クライアントと #39; の謎の寸法エクスポートが実際に何であるかを調べます。
この方法は、最大の一般的な除数です。 両方の次元を均等に分割する最大の数を見つけ、両方をそれで割ります。 1920 と 1080 の場合、その数は 120: 1920 ÷ 120 = 16、1080 ÷ 120 = 9 です。 比率 16:9。
実際のサイズではよくあるので、ここで答えが興味深いものになります。 でないよ マーケティングに適した比率に減らす。 3440 × 1440 ウルトラワイド モニターは 43:18 に減少します。 2560 × 1080 1 は 64:27 に減少します。どちらも "21:9" として販売されており、実際にはそうではありません。 - 21:9 は 3360 × 1440 になります。ラベルは、16:9 の隣で整然と聞こえるものに小数点 (2.39:1 と 2.37:1) を四捨五入したものです。計算ツールは真の縮小比率と小数点を与えるため、スペック シートからではなく現実からサイズを決定できます。
スケーリングとフィッティング
同じアイデアの 2 つのバリエーション。 スケーリング 両方の次元に同じ係数を掛けます。これにより、定義上、比率が維持されます。1920 × 1080 の 50% スケールは 960 × 540 ですが、それでも 16:9 です。 フィッティング ソース サイズを、歪みのない境界ボックス内に収縮させる。 boxWidth ÷ sourceWidth あんど boxHeight ÷ sourceHeight それによってスケールします。 1200 × 1200 の箱に収められた 4000 × 3000 の写真は、1200 × 900 になります。 これはまさに CSS です object-fit: contain 最大寸法のサイズ変更を要求したときに、イメージ CDN が行うこととまったく同じです。
アスペクト比計算の主な機能
10 個のプリセット。実際に使用されている場所のラベルが付いています
標準ビデオとほとんどのディスプレイは 16:9 です。 9:16 リール、ショートパンツ、TikTok、ストーリー。 Square Social Post と Avatar の場合は 1:1。 古いディスプレイと iPad の場合は 4:3。 デジタル一眼レフ撮影は 3:2 で、35mm フィルム。 2:3 ポートレート プリント。 8×10 プリントの場合は 5:4。 21:9 UltraWide の場合。1.91:1 OpenGraph リンクプレビュー画像の場合 2.39:1 アナモフィック ワイドスクリーン用。 プリセットをカーソルにすると、その目的を示します。これは、Instagram がどのインスタが必要かを思い出そうとするときの数よりも重要です。
すべての答えの下にある公式
結果パネルには、正確な算術 - が表示されます 1280 × (9 ÷ 16) = 720。 一部は確認できるようにするため、一部はスプレッドシートまたはスクリプトに持ち上げることができます。 CSS ファイルまたは Tailwind 構成にディメンションをハードコードする場合は、その番号がどこから来たのかを確認できるはずです。
縮小比、小数点以下、名前
すべての結果は、3 つの表現すべてを報告します。つまり、整数比 (16:9)、小数点以下の形式 (1.778:1)、1 つある場合は共通の名前です。 10 進数は、比較するものです。名前は、デザイン ブリーフに入力したものです。
メガピクセルと総ピクセル数
すべての結果にはピクセル数がメガピクセル単位で含まれますこれは画像のサイズを変更しているときに実際にメモリ使用量とファイルサイズを予測する数値です - 4000 × 3000 の写真は12 MPで、その寸法を2 倍にすると48 MPに4 倍になり、2 倍にはなりません レスポンシブ画像セットを生成している場合、その二次関係は頭の中に留めておくべきものですサイズ調整が終わったら、 画像のサイズ変更 あんど 画像圧縮 ブラウザで実際の作業を行います。
ライブ シェイプ プレビュー
結果パネルの長方形、あなたが今計算した比率に描かれています それは装飾的に聞こえますが、そうではありません - あなたが16:9 を意味したときに9:16 を入力したことをキャッチする最速の方法は、広いものを期待したときに背の高い箱を見ることです。
クライアント側、オフライン、サインアップなし
ブラウザでの単純な JavaScript 算術演算。 何も送信されず、何もログに記録されず、ページはネットワークをオフにして動作し続けます。
どのアスペクト比を使用すればよいですか?
| 割り合い | 小数 | 使用される場所 | 典型的なピクセルサイズ |
|---|---|---|---|
| 16:9 | 1.778 | YouTube、HD/4K ビデオ、ほとんどのモニター、テレビ | 1920 × 1080、3840 × 2160 |
| 9時16分 | 0.563 | Instagram リール、TikTok、YouTube ショート、ストーリー | 1080×1920 |
| 1:1 | 1.0 | Instagram フィードの投稿、アバター、製品のサムネイル | 1080×1080 |
| 4時5分 | 0.8 | Instagram ポートレート フィードの投稿 (最大フィード フットプリント) | 1080 × 1350 |
| 1.91:1 | 1.91 | OpenGraph / Twitter カード リンク プレビュー | 1200×630 |
| 4:3 | 1.333 | iPad、古いモニター、多くのカメラ センサー | 2048×1536 |
| 3:2 | 1.5 | DSLR とミラーレスの静止画、35mm フィルム、写真プリント | 6000×4000 |
| 21:9 (実際には ~2.37–2.39:1) | ~2.38 | ウルトラワイド モニター、シネマティック クロップ | 3440 × 1440 |
| 2.39:1 | 2.39 | アナモルフィック ワイドスクリーン シネマ | 4096×1716 |
2 つの実用的なメモ。 1200 × 630 OpenGraph サイズは 40:21 に減少し、10 進数は 1.905 - 誰もがそう呼ぶほど 1.91:1 に近く、Facebook、LinkedIn、X のサイズがすべてクリーンにレンダリングされることで結果を確認します グラフのプレビューを開く ツールを出荷する前にツールを作成します。プレビュー画像が、誰もクリックしないリンクで最も目立つバグであるためです。 4:5 は、特に Instagram にとって知っておく価値があります。1:1 よりもフィード内の垂直スペースを占めるため、注意が必要です。
よくある使用例
歪みのないレスポンシブ画像のサイズ設定
カード グリッドを作成していて、デザインでは 384 ピクセルのコンテナ幅で 16:9 のサムネイルが必要です。 計算: 384 × 9 ÷ 16 = 216。 これで、両方の CSS の具体的なサイズができました aspect-ratio: 16 / 9 宣言とあなたのイメージのエクスポート、そして彼らは互いに同意します 現代のCSSは、これが以前よりも簡単になります - aspect-ratio CSS では比率を直接取得し、ブラウザに算術処理を許可しますが、アセット自体のピクセル寸法も必要です。
特定のプラットフォームのビデオのエクスポート
16:9 を撮影し、9:16 の垂直カットが必要です。高さは 1920 のままなので、幅は 1920 × 9 × 16 = 1080 です。これがエクスポート サイズです。数字がよく知られている理由は、1080 × 1920 は軸を交換した単純に 1920 × 1080 であることです。これは、" 垂直ビデオ" の意味です。
計算機があなたのためにできないことの 1 つ: H.264 には、均等な寸法が必要です。 数学が奇数で着地した場合、奇数面を 1 ピクセル下に丸めて丸めないと、エンコーダはその仕事を拒否します。
謎の資産とは何かを解明する
クライアントは1440 × 1800 でアセットを送信し、なぜホームページ上でひどくトリミングするのか尋ねます それを減らす: 1440と1800 のGCDは360 で、4:5 を与えます あなたのホームページのスロットは16:9 です その2 つの図形はトリミングなしで両方を満たすことができません - 今、あなたは何かがオフであるという漠然とした感覚ではなく、具体的な答えと下す決定を持っています。
一連のアセットが一貫していることを確認する
ローンチ前に、すべてのヒーロー イメージのディメンションを比率モードで実行します。 30 のうちの 1 つが 1.6:1 として戻ってきたのに、残りが 1.778:1 である場合、ライブ サイトでは微妙に間違っているように見えるアセットが見つかり、ユーザーが実行する前にそれを見つけました。
知っておく価値のあるテクニカル
丸め。 ほとんどの比率の計算はピクセル全体に着地しません。 1000 の幅で16:9 は562.5 の高さを与えます。 計算機は最も近いピクセル全体に丸められるので、563 - 1.7778:1 ではなく1.7762:1 の形状、1 パーセントの約10 分の1 の差、そして目に見えない形を追いかけないでください。 一貫して丸められていることに気付いてください ダウン 要素を積み重ねる場合、画像セット全体で、前の結果ではなく、ソース ディメンションから丸めて表示されるドリフトが蓄積される可能性があります。
ピクセルの縦横比と表示縦横比。 放送ビデオでは、これらは異なる場合があります: 古いDV映像は720 × 480 ピクセルを保存したが、各ピクセルを正方形にしないことによって、それらを4:3 として表示しました。今日あなたが触れることはほとんど何もありません。これはすべて正方形のピクセルです。しかし、レガシー映像を扱っていて、数学が合計を拒否する場合、これが理由です。
aspect-ratio CSSで。 2021年から書くことができます aspect-ratio: 16 / 9 1 つの次元が流動的である間、ブラウザーが形状を保持します。 使ってください。 以前は必要だったパディング トップ パーセンテージのハックのクラス全体が削除されます。これは、テストしたことのない幅でレイアウトが正しくなることを意味します。 画像ファイルは実際のピクセル数でなければならないので、アセット エクスポートの計算機が必要です。
トリミングはスケーリングではありません。 ソースとターゲットの比率が異なる場合は、それらの間でサイズを変更することはできません - トリミング、レターボックス、または歪みを行う必要があります。意図的に選択します。 object-fit: cover クロップ (そして通常、写真に必要なものです) contain レターボックス (通常はロゴに必要なもの) と fill 歪曲します (ほとんどあなたが望むものではありません。この記事の上部にある私の顔が壊れた原因はほとんどありません)。
フェイク
幅と高さから縦横比を計算するにはどうすればよいですか?
両方の数値を最大公約数で割ります。 1920 × 1080 の場合、GCD は 120 であるため、比率は 16:9 に減少します。 この電卓を Ratio モードに切り替え、両方の次元に入力すると、削減して比率を指定します。
幅 1280 ピクセルの 16:9 の画像にはどの高さが必要ですか?
幅に 9 を掛け、16 で割ります: 1280 × 9 ÷ 16 = 720。 つまり、幅 16:9 の画像 1280 ピクセルの高さは 720 ピクセルです。 16:9 のプリセットと 1280 の幅を入力して確認します。
アスペクト比と解像度の違いは何ですか?
アスペクト比は形状 - 高さに対する幅の割合です。解像度は実際のピクセル数です。 1280 × 720 と 1920 × 1080 は同じ 16:9 アスペクト比の異なる解像度であるため、歪みやトリミングがなくても一方が他方に向かってスケーリングします。
ソーシャル メディアにどのアスペクト比を使用すればよいですか?
Instagramのフィード投稿には1:1 または4:5、Reels、Stories、TikTok、YouTube Shortsには9:16、標準のYouTubeビデオには16:9、1.91:1 を使用します オープングラフ facebook、linkedin、x で画像をプレビューします。このツールのプリセットにはこれらすべてが含まれています。
サイズ変更された画像が引き伸ばされたように見えるのはなぜですか?
新しい幅と高さは元の比率と一致しないため、画像は 1 つの軸に沿って押しつぶされます。両方の数値を手で入力するのではなく、元の比率を使用してターゲット幅からターゲット高さを計算します。これはまさに、solve-for-missing-side モードの目的です。
21:9 とはどういう意味ですか?
これは、ウルトラワイド ディスプレイのマーケティング ラベルです。 3440 × 1440 モニターの実際の比率は 43:18、およそ 2.39:1、2560 × 1080 のパネルは 64:27 です。 どちらも製品リストで「21:9」に丸められます。 正確なピクセル寸法が必要な場合は、ラベルではなく、実際のパネル解像度から計算してください。
結果が整数ではない場合、アスペクト比を維持するにはどうすればよいですか?
電卓は最も近いピクセル全体に丸められ、最大でも 0.5 ピクセルのドリフトが発生します。実際には見えません。ビデオ エンコーダはより厳格です。H.264 では偶数次元が必要なため、エンコーダがサイズを拒否した場合、奇数辺を 1 ピクセル切り下げます。
この電卓はオフラインで動作しますか?
はい。 すべての計算は、ブラウザで実行されている単純な JavaScript 算術演算です。 サーバーにディメンションは送信されず、何もログに記録されず、ページがロードされると、インターネット接続なしでツールが動作し続けます。
関連ツール
- 画像のサイズ変更- ブラウザで、計算したばかりの寸法を適用します
- 画像圧縮ー図形が正しいらファイルを縮小します
- パーセンテージ計算- ジョブの半分のパーセントごとのスケールに対して
- グラフのプレビューを開く- リンクを発送する前に、1.91:1 の画像を確認してください
- フォーマット変換ー ウェブP そして、今サイズ設定したアセットの AVIF
さらに読む: 画像圧縮の完全なガイド あんど Web に不可欠な画像ツール。
