画像と写真 · ソーシャル イメージ リサイザー
アスペクト比の計算: 写真を 1:1、4:5、9:16、または 16:9 にトリミングする方法
· 仕組み
画像のサイズ変更 アスペクト比 キャンバス
比率に応じたトリミングは算術的です。写真の比率をターゲットと比較し、どの寸法を縮小する必要があるかを判断し、トリミングする場所を選択します。この投稿では、公式、実際の例、および丸めトラップを示します。
決して収まらない写真 — 3:2 のカメラショットが何かを失わずに正方形や 9:16 のストーリーにならない理由
6000×4000 のカメラ写真は 3:2、つまり幅が高さの 1.5 倍になります。正方形の商品カード、4:5 のフィード ポートレート、9:16 のストーリーはその形状を持ちません。トリミングせずにサイズを変更すると、被写体が歪んだり、境界線が追加されたりします。トリミングにより、どの部分を残すかについて編集上の選択が行われます。特にラベル、文字盤、またはロゴが端に近い場合は、オリジナルを保持し、その部分を慎重に選択してください。
単一の数値としての比率 - 幅を高さで割って、4:5 が 0.8、16:9 が約 1.78 になるようにし、ソースとターゲットを比較します。
アスペクト比は、幅を高さで割ったものとして表します。ソースの場合、6000/4000 = 1.5。 4:5 の場合は 4/5 = 0.8 です。 16:9 の場合、約 1.7778 です。これらの数値を比較すると、ターゲットに対して幅または高さが過剰かどうかがすぐにわかります。この比率は、要求されたエクスポート ピクセルとは無関係です。800×1000 と 1600×2000 はどちらも 4:5 ですが、後者のピクセル数は 4 倍です。
どちら側をカットするか - ソースがターゲットより広い場合は、幅をトリミングします。高い場合は作物の高さ。新しい次元の公式
ソースの幅/ソースの高さがターゲット比率 r を超える場合は、完全な高さを保持し、クロップ幅 = 高さ × r を設定します。水平方向の側面をカットします。ソースが狭い場合は、幅を保持し、トリミングの高さ = width/r を設定します。上下をカットします。これらの数式は、引き伸ばさずに既存の画像内に収まる最大のトリミングを選択します。 ToolAcre はカバー フレームを計算し、オフセットをクランプし、drawImage を呼び出してそのイメージを宛先キャンバスにマップします。必要に応じて、トリミングとサイズ変更が同時に行われます。
オフセットの選択 – クロップを中央に配置するか、被写体に向かって移動するか。カットアウェイ距離の分数で表されます。
中央に切り取る場合は、各辺から削除された距離を 2 で割ります。 3200px にトリミングされた 6000px 幅の写真には 2800px の余分な幅があるため、x=1400 で中央に配置されます。左側近くの被写体を保護するには、小さい x を使用します。 x はゼロと完全なカットアウェイ距離の間になければなりません。オフセットを 0 (左/上) から 1 (右/下) までの小数として考えると、複数のエクスポート サイズにわたって同じフレーミングのアイデアを再利用するのに役立ちます。
実際の例: 1 枚の 6000 × 4000 の写真を 4 つの比率に - 1:1、4:5、9:16、16:9 の長方形を段階的にトリミング
6000×4000 から、中央の 1:1 クロップは x=1000 で 4000×4000 になります。 4:5 クロップは、x=1400 で 3200×4000 です。 9:16 クロップは、x=1875 で約 2250×4000 になります。 16:9 クロップでは、代わりに 6000px 幅全体を使用し、高さは 3375px を使用し、数学的中心はソース y=312.5 になります。エクスポート サイズは、切り取られた各四角形を拡大縮小できます。これらの操作のいずれも、コンテンツの欠落を引き起こすものではありません。除外された側面は新しいイメージには存在しません。
丸め、小数オフセット、および整数サイズのエクスポート キャンバス
エクスポート キャンバスのサイズは整数ピクセルですが、drawImage はスケールされたソースを分数座標で配置できます。 16:9 の例では、625 のソース行が除外され、理論上の中心開始は y=312.5 になります。ソース行全体のみを切り取るツールでは、312 または 313 を選択する必要があります。代わりに、ToolAcre はスケーリングされたカバー フレームを中央に配置し、キャンバスに端の部分をサンプリングさせます。エクスポート キャンバスには選択されたアスペクト比が設定されますが、境界ピクセルが補間される場合があります。すでにエクスポートされた画像を繰り返し編集すると、リサンプリングや非可逆エンコードが複雑になります。各配置はマスターから開始します。
これでカバーされないもの - プラットフォームの現在のピクセル寸法は変更されます。数値についてはプラットフォーム独自のガイダンスを確認してください
この計算では、プラットフォームの現在のピクセル寸法、オーバーレイされたコントロールの安全ゾーン、優先圧縮設定はわかりません。これらの要件は比率とは無関係に変化します。また、トリミングでは、カメラが写真を撮影したときに切り取られた被写体を復元したり、低解像度のオリジナルのディテールを向上したりすることはできません。何百ものアセットを作成する前に出力先の現在のガイダンスを確認し、数学的に正しいフレームが適切な構成であると仮定するのではなく、エクスポートされた各プレビューを検査します。
要点: 仕様が変わっても演算は固定されます。Social Image Resizer が演算を適用し、ブラウザーで選択した比率にトリミングします。
ソーシャルメディアの仕様が変わっても、比率は固定された演算になります。 Social Image Resizer は、ソース画像をローカルに保ちながら、ブラウザ内でトリミングとキャンバスのスケーリングを実行します。 1:1、4:5、9:16、または 16:9 を選択し、重要な部分に向かってクロップを移動し、エクスポートを並べて比較します。適切な計算により、何が適合するかがわかり、視聴者に何を見せるかを決定します。