数値・単位・ビット
画像の幅を変えたい。縦横比と端数はどうする？
使うツール
画像の横幅だけを指定したいのに、高さも必須と言われる。元の縦横比を保つつもりで計算したら、高さに小数が出てしまう。よくある作業ですが、比率の答えと、実際の画像ファイルへ指定できる寸法は同じとは限りません。比率・縦横比ツールでまず数学的な値を求め、その後で整数の画素数や枠への収め方を決めると、写真がつぶれたり、意図せず切れたりする理由を説明しやすくなります。
1920×1080を、16:9へ整理する
1920 : 1080 = 16 : 9比の簡約を選び、幅1920と高さ1080を別々の入力欄へ入れます。結果の16:9は、横16に対して縦9という形の関係です。これだけでは、画面に何pxで表示するかは決まりません。同じ比率でも、320×180と1920×1080では画素数が違います。比率が同じことを、画質や情報量が同じことと混同しないでください。
縦長の写真なら、幅と高さを逆にしないことも大切です。1080×1920の比率は9:16です。16:9のまま縦の寸法を入れれば、計算自体が成功しても横長の形を求めてしまいます。ツールの入力順は幅:高さとしてそろえ、画像の向きや回転後の寸法を確認してから計算します。
横幅を決めて、もう片方を計算する
ratio = 16:9
width = 320
height = 320 × 9 ÷ 16 = 180片側寸法は、比率を使って計算できます。ただし現在の比率ツールの片側寸法モードには、比率表記を入力欄へ直接入れられない制約があります。ここでは高精度電卓で320*9/16を計算する手順を使います。高さ180が得られ、180*16/9で幅320へ戻ります。画面にない「既知の辺」の選択操作は必要ありません。往復で同じ寸法が出ることを確認すると、幅と高さの取り違えを見つけられます。
計算欄は画像を読み込んで寸法を調べるものではありません。元の比率は利用者が指定します。『いつも動画は16:9』と決め付けず、素材の実寸を確認してください。正方形のアイコンや縦長の動画へ16:9を当てはめても、ツールにはその指定が誤りかどうか判断できません。入力した比率どおりに計算できることと、素材に適した比率であることは別です。
幅321では、高さが整数にならない
321 × 9 ÷ 16 = 180.5625
floor → 180
nearest → 181
ceil → 181高精度電卓へ321*9/16を入れると、丸め前の高さは180.5625です。画像ファイルの画素数として整数が必要なら、利用先で切り捨て、四捨五入、切り上げを明示して決めます。この電卓の有効桁数設定を、画像の整数画素への丸めと混同しないでください。181へ丸めると厳密な16:9から少しずれます。丸め後の値から逆算して元の幅へ必ず戻るとは考えず、最初の比率と寸法を残します。
ぴったり16:9の整数寸法にしたいなら、幅を16の倍数、高さを9の同じ倍数にする方法があります。320×180の次なら336×189です。ただし、掲載先の最大幅が321なら336は収まりません。比率を完全に保つ条件と、枠の上限へ収める条件が両立するかを先に判断し、必要なら余白や切り抜きで調整します。
枠に収めることと、枠を埋めることは違う
width 300 → height 168.75
height 200 → width 355.555…横幅300へ合わせると高さ168.75なので、300×200の枠には上下の余白ができます。高さ200へ合わせると幅は約355.56なので、枠を埋めるには左右を切ることになります。幅300、高さ200をそのまま画像へ強制すれば、元の16:9から3:2へ変形します。比率計算の結果が意図した見え方と合わないときは、計算ミスより、余白・切抜き・変形のどれを許すかが未決定である場合があります。
ツールは画像を変形・切抜きしません。寸法の見積もりに使い、実際の画像処理やCSSの表示は別に確認します。ブラウザーのaspect-ratioも比率を指定する仕組みですが、実際のサイズは幅・高さやレイアウトの制約と合わせて決まります。計算した数値だけで実画面の見え方を保証せず、人物の顔や文字など、切れて困る部分がないかを画像そのもので確認してください。
数値と一緒に、丸め方と用途を伝える
制作依頼で『高さ181』だけを渡すと、元が16:9なのか、枠いっぱいに伸ばすのかが伝わりません。『元は16:9、幅321、計算高さ180.5625を四捨五入して181、切抜きなし』まで書けば、意図を再確認できます。表示用のCSS pxと、書き出した画像の画素数が異なる場合も、それぞれの値を区別して伝えます。
寸法が決まったら、元の比率、変更後の幅と高さ、丸め規則を一組で残します。比率だけの確認ならサンプルの小さな数値で十分です。実画像をアップロードせず数値だけで計算できるため、公開前の素材や社内画像を外部へ送らずに、サイズの相談を進められます。