風景写真をインスタグラムの投稿にアップロードしたり、背の高い電話写真をLinkedInのリンク画像としてアップロードしたり、スクリーンショットをXにアップロードしたりすると、プラットフォームは静かにその部分の人々が見るいくつかの固定された形の1 つに画像に適合し、適合しないものをトリミングし、中央から外側にトリミングします 被写体が中央にある場合は、それが機能します 被写体がフレームの上部近くの顔、左側の製品、または下部に沿った見出しである場合、プラットフォームはそれを切り取ります。
修正は、画像を自分で切り取り、フィードが望む正確な形状に切り取り、どの部分が生き残るかを選択することです このガイドでは、メインプラットフォームが表示するサイズとアスペクト比、クロップの形状、焦点の選択方法、トリミングが品質とファイルサイズに与える影響、そして人々を捕まえるソフトでスケールアップされた結果を回避する方法について取り上げています 作業例では、無料を使用しています ソーシャルメディア 画像 クロッパー toolz では、クライアント側でジョブ全体を実行します。
tl;dr: ソーシャルメディア用の画像をトリミングするには、プラットフォームと配置のターゲットアスペクト比 (たとえば、Instagramのポートレート投稿の場合は1080 x 1350、リンクプレビューの場合は1200 x 630、Xの投稿画像の場合は1600 x 900) を選択し、写真の内側に収まるその形状の最大の領域を取り、重要な部分に固定してから、正確なピクセルサイズに拡大縮小します。 4:5 にトリミングされた4032 x 3024 の電話写真は、その領域の60% を維持します; 16:9 にトリミングされた75% を維持します ソーシャルメディア イメージクロッパー これは、9 点の焦点グリッドを使用してブラウザのキャンバス上で実行します。無料で、サインアップもアップロードもありません。
ソーシャルメディアのイメージクロッパーは何をしますか?
ソーシャルメディアの画像クロッパーは、プラットフォームが表示するアスペクト比に写真をカットし、そのプラットフォーム& #39; sのピクセルサイズにスケーリングするため、プラットフォームにはトリミングするものは何も残っていないため、2 つの別々の操作が発生し、それらを離しておくのに役立ちます:
- 作物. 目的の形状を持つ 長方形を原文の内側に選びます 外側のピクセルは捨てられます 内側のピクセルは手付かずです。
- スケール. その長方形を 1080 x 1350 などのターゲット寸法にサイズ変更します。画像はリサンプリングされるため、ここで品質が変化する可能性があります。
一般的な画像エディターは両方を実行できますが、比率を見つけ、手でボックスを描画し、出力サイズを記憶させます。専用のクロッパーはサイズを把握し、有効な最大のボックスを自動的に描画し、ワンクリックで移動できます。 Toolz バージョンでは、ダウンロード前にトリミングのコスト、つまり元の領域がどれだけ残っているか、結果が縮小されたか拡大されたかもわかります。
主なプラットフォームはどの画像サイズを使用していますか?
各ネットワークはフィード画像を小さなアスペクト比のセットでレンダリングし、それ以外のものは最も近いものにフィットします 表にはクロッパーに組み込まれている15 のターゲットサイズがリストされており、各プラットフォームが再トリミングせずに現在表示しているプラットフォームはこれらを随時改訂するため、永続的な仕様ではなく現在のガイダンスとして扱います。
| プラットフォーム | 配置 | ピクセルサイズ | アスペクト比 | 使用される場所 |
|---|---|---|---|---|
| Instagram の | スクエアポスト | 1080 x 1080 | 1:1 | 古典的なフィードポスト |
| Instagram の | ポートレート ポスト | 1080 x 1350 | 4時5分 | フィードが許可する最も高い、ほとんどの画面スペース |
| Instagram の | 風景 ポスト | 1080 x 566 | 1.91:1 | フィードが受け入れる幅が最も広い |
| Instagram の | ストーリー または リール | 1080 x 1920 | 9時16分 | 全画面;テキストを上下 250 px から離してください |
| 糸 | スクエアポスト | 1080 x 1080 | 1:1 | タイムラインに切り取られずに表示されます |
| 糸 | ポートレート ポスト | 1080 x 1350 | 4時5分 | トリミングせずに表示する最も高いスレッド |
| ブルースキー | フィード画像 | 1200 x 630 | 1.90:1 | ワイド画像は 1.91:1 に向かって引っ張られます |
| ブルースキー | 正方形 イメージ | 1080 x 1080 | 1:1 | 切り取られていません |
| X を | 投稿画像 | 1600 x 900 | 16:9 | タップなしで完全に表示されます |
| X を | サマリーカード | 1200 x 628 | 1.91:1 | 大型リンク プレビューカード |
| フェイス | フィードポスト | 1200 x 630 | 1.90:1 | Open Graphサイズも |
| リンクイン | フィードポスト | 1200 x 627 | 1.91:1 | LinkedIn フィード 標準 |
| YouTube を | サムネイル | 1280 x 720 | 16:9 | HD プレーヤーの幅は最小 1280 です |
| ピンタレスト | 標準ピン | 1000 x 1500 | 2時3分 | 高いピンはランクが下げられています |
| Open Graph | リンクプレビュー | 1200 x 630 | 1.90:1 | デフォルトカードほとんどのサイトとチャットアプリはレンダリングします |
2 つのことが際立っています。 "1.91:1" ファミリ (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) は、丸めが少し異なる1 つの形状であり、Web上のほぼすべてのリンクプレビューの形状にさかのぼります Open Graph プロトコルを定義する og:image タグサイトはプレビュー画像を提供するために使用します そして、背の高い形式は異なります: Instagramとスレッドは4:5 で停止し、Pinterestは2:3 に行き、Storiesは9:16 を使用します 1 つのクロップはそれらのすべてにサービスを提供しません。
Web ページのプレビュー イメージも設定している場合は、 Open Graph プレビューツール 1200 x 630 画像が共有されるとどのように見えるかを示します。
クロップ長方形はどのように計算されますか?
トリミングは、元の画像の内側に収まるターゲット形状の最大の長方形です。画像がターゲット形状よりも広い場合、トリミングは完全な高さを保ち、側面をトリミングします。高い場合、トリミングは完全な幅を保ち、上部と下部をトリミングします。
数字では、幅 W と高さ H のソースとターゲット比 R (幅を高さで割ったもの) に対して、:
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
作業例 1: Instagram のポートレート投稿への 4032 x 3024 の電話写真。
- ソース比: 4032 / 3024 = 1.333。目標比率: 1080 / 1350 = 0.8。
- 供給源はより広いため、作物は 3024 px の高さを維持します。
- 作物幅: 3024 x 0.8 = 2419.2 px.
- 保存面積: 2419.2 / 4032 = 0.60 なので、写真の 60% が残り、40% が側面からトリミングされます。
- 次に、作物は約 2419 x 3024 から 1080 x 1350 までスケールダウンされます。
作業例 2: 同じ写真を X 投稿画像に投稿します。
- 目標比率: 1600 / 900 = 1.778。ソース比率 1.333 は小さいため、クロップは 4032 px の幅全体を維持します。
- 作物の高さ: 4032 / 1.778 = 2268 px.
- 保存面積: 2268 / 3024 = 0.75、つまり 75% が生き残り、高さから 756 px がトリミングされます。
作業例 3: 同じ写真を Pinterest ピンに移動します。
- 目標比率: 1000 / 1500 = 0.667。作物幅: 3024 x 0.667 = 2016 px.
- 保管面積: 2016 / 4032 = 50%。写真の半分が消えます。
これらのパーセンテージは、ツールが " Keeping 60% of the original" として報告するものであり、コミットする前に読む価値があります。フレームの半分を保持するクロップは、フォーマット ステップではなく、構成の決定です。
画像のどの部分を残すかをどのように選択しますか?
被写体を保持する焦点を選択し、トリミングされる軸に沿ってのみ重要であることを覚えておいてください。 cropper's 9 点グリッドは、各軸に 0、0.5、または 1 の焦点を設定し、作物を左端、中央または右端に水平に固定し、上部、中央、または下部に垂直に固定します。
位置はこのように加工され、次にクランプされ、クロップが画像から決して実行されないようにします:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
作業例1 では、側面のみがトリミングされているため、水平方向の選択のみが何かを変更します:
| アンカーコラム | クロップx | 写真の列を保持しました |
|---|---|---|
| 左 | 0です | 0から2419まで |
| センター | 806.4 | 806から3226まで |
| 右 | 1612.8 | 1613から4032まで |
上、中、下の行は、完全な高さがすでに保持されているため、その作物について同じ結果を与えます。クリックしても何もしないように見える場合は便利なチェックです。作物は一方向にのみ自由に移動できます。
作業例 4: LinkedIn 画像としての携帯電話のポートレート写真。 3024 x 4032 の写真を1200 x 627 (比率1.914) に切り取ったものは、全幅を保ち、ストリップ3024 / 1.914 = 1580 pxの高さを維持します。つまり、1580 / 4032 = 39% の写真です。デフォルトのセンターアンカーを使用すると、ストリップは y = 1226 から y = 2806 まで伸びます。これは、典型的な頭と肩の肖像画では、顔ではなく胸です。上中心をクリックすると、ストリップは y = 0 から 1580 に移動し、頭が維持されます。このケースが焦点グリッドが存在する理由です。センタリングは合理的なデフォルトであり、ほとんどの肖像画では間違った答えがバナーに変わります。
アンカーをピッキングするためのいくつかの経験則:
- 人物: 通常、顔はフレームの上 3 分の 1 に位置するため、最上列。
- グラフィックに焼き付けられた見出しまたはキャプション: テキストが置かれている行または列。
- 製品と中心外の主題: 一致するコーナーまたは側面。
- 対称的なシーンと中央のロゴ: 中央に残します。
トリミングは画質を低下させるのでしょうか?
トリミングだけでは品質が低下しませんが、スケーリング ステップにより品質が低下する可能性があります。フレームの外側のピクセルを破棄すると、残りのピクセルは元の状態のままになります。ターゲット サイズへのサイズ変更により、結果が改善または低下する可能性があります。
スケールダウンすることは安全であり、いくつかのソースピクセルが各出力ピクセルに平均化されるため、写真がより鮮明に見えることがよくあります。 cropper は、canvas' s の高い平滑化品質設定を使用して描画します drawImage で定義されたメソッド WHATWG HTML キャンバス 指定。 scaling up cannot add detail that was never captured.出力は大きくなるがシャープにはならず、エッジは柔らかく見える。
作業例 5: アップスケールされたスクリーンショット. X 投稿画像用に切り取られた 800 x 600 スクリーンショットは、800 px の幅全体と 450 px の高さのストリップ、面積の 75% を維持します。その 800 x 450 領域は、各方向のサイズの 2 倍である 1600 x 900 に拡大されます。ツールはプレビューの下にそう言います: "Upscaled - ソースはターゲットよりも小さいため、柔らかく見えます。 "
簡単なテストは、トリミング幅とターゲット幅を比較することです。トリミングがターゲットよりも広い場合、画像はダウンスケールされ、正常に見えます。狭い場合は拡大されています。写真の場合、電話カメラにはほとんどの場合、スペアにピクセルがあります。スクリーンショット、他の投稿から保存された古い画像や写真は通常のスケールアップ ケースであり、実際に修正できるのはより大きなソースだけです。
PNG、JPEG、WebP をエクスポートする必要がありますか?
写真用の JPEG、スクリーンショット用の PNG、ハードエッジ付きのテキストとグラフィックス、最小のファイルが必要で保存先がそれを受け入れていることがわかっている場合の WebP をエクスポートします。 cropper はロスレスであるためデフォルトで PNG になり、3 つすべてを提供します。
| フォーマット | 圧縮 | に最適 | 注意してください |
|---|---|---|---|
| png | で指定されているように、ロスレス W3C PNG 規格 | スクリーンショット、UI、テキスト、ロゴ、透明度 | 写真用の大きなファイル |
| jpeg | ロッシー、メソッドイン ITU-T T.81 | 写真 | 鋭いテキストおよびラインの周りのHalos; 透明物無し |
| ウェブP | で説明されている損失またはロスレス Google's WebP ドキュメント | 同様の品質の最小ファイル | いくつかの古いツールでは開くことができません |
JPEG と WebP のエクスポートでは、キャンバス エンコーダーで 0.92 の品質設定が使用されており、これは十分に高いため、写真では圧縮アーティファクトが見えにくくなります。 ダウンロードしたファイルの名前は、元のファイルにプリセットを加えたものにちなんで付けられています team.jpg JPEG が保存する Instagram のポートレート投稿用にトリミングされました team-ig-portrait.jpeg。
ほとんどのプラットフォームは、とにかくアップロードしたものを再エンコードするため、写真のロスレスPNGは、一度投稿されたPNGとして存続しません。主にアップロードサイズを追加します。より深くフォーマットを選択するには、 画像フォーマット コンバータ ガイド より多くのユースケースでそれらを比較します。
ステップバイステップ: ツールで画像をトリミングします
ザ・ ソーシャルメディア用の画像クロッパー 4 つのステップがあり、プレビュー キャンバスはファイルを生成するキャンバスと同じであるため、承認するのはダウンロードしたものになります。
- 画像を追加. ファイルをドロップするか、クリックして1 つを選択するか、Cmd+VまたはCtrl+Vでクリップボードから画像を貼り付けます。 pasteリスナーはページ全体にあるため、クリップボードにコピーされたスクリーンショットは最初に保存されずにまっすぐに入ります。 drop zoneはPNG、JPEG、WebP、GIFまたはAVIF、またはブラウザがデコードできるものを受け入れます。
- ターゲットサイズを選択します. 「ターゲット サイズ」メニューは、15 個のプリセットをプラットフォームごとにグループ化し、それぞれにピクセル サイズと比率でラベルを付け、サイズが使用される場所に 1 行のメモを表示します。デフォルトは、Instagram のポートレート投稿です。
- 保持するものを選択します. Keep グリッドの 9 つのポイントのいずれかをクリックします。プレビューはすぐに再描画されます。
- 数字を確認してダウンロードします. プレビューの下で、保持されたパーセンテージ、クロップ寸法、および結果がダウンスケールまたはアップスケールされるかどうかを記載する行を読みます。 PNG、JPEG、または WebP を選択して「ダウンロード」をクリックします。
ブラウザタブ内のHTMLキャンバス上ですべてが実行されます 画像はアップロード、保存、またはログに記録されず、ページはネットワークをオフにして動作し続けます サイト上のすべてのツールと同様に、ダウンロード手順では毎日の使用制限がチェックされます。
どのようなエラーに遭遇する可能性がありますか?
ほとんどの問題はファイル形式またはソースのサイズから発生します。メッセージは具体的です。
- " そのファイルは画像ではありません。 " ファイル' s タイプは で始まりません
image/、例えばPDFやビデオ。 というメッセージでファイル名が付けられている。 - " その画像は読み取れませんでした。 破損しているか、このブラウザがデコードしない形式である可能性があります。 " ファイルは画像であると主張していますが、ブラウザはそれをデコードできません 一般的なケースは、HEICサポートなしでブラウザ内のiPhone HEIC写真です.JPGに最初に変換します 画像フォーマットコンバータ。
- " Upscaled - ソースはターゲットより小さいので、柔らかく見えます。 " エラーではなく、警告です。 がある場合は、より大きなオリジナルを使用してください。
- フォーカルグリッドは何もしていないようです。 トリミングは 1 つの軸に沿ってのみトリミングされるため、その軸に沿ったアンカーのみがトリミングを動かします。
- 1 日の制限に達しました. 無料の1日あたりの使用手当が使われています。
もう1 つの効果は知る価値があります 出力はキャンバスピクセルから再エンコードされるため、ダウンロードされたファイルにはEXIFメタデータはありません: カメラ設定、キャプチャ日付、またはGPS位置情報はありません 公開投稿された写真の場合、通常はプライバシーの利益になります EXIF リムーバー ガイド そのメタデータに何が含まれているのか、そして写真を共有する際にそれがなぜ重要なのかについて説明します。
背景に切り抜く、サイズを変更する、またはフィットしますか?
トリミングは、画像を固定された形状にするための 3 つの方法のうちの 1 つであり、適切な方法は、画像を失う余裕があるかどうかによって異なります。
| 近づく | 何が起こるか | いつ使うか | ツール |
|---|---|---|---|
| 比率に対する作物 | エッジをトリミングし、形状を正確に保ちます | 主題はフレームの一部であり、エッジは行くことができます | ソーシャルメディア 画像 クロッパー |
| マットにフィット | 画像全体を色付きまたはぼやけた背景に縮小します | アートワークや集合写真など、何もカットすることはできません | マットジェネレータ |
| サイズ変更のみ | ピクセルの寸法を変更し、元の比率を維持します | 比率はすでに正しいか、プラットフォームは任意の形状を受け入れます | 画像のサイズ変更 |
| スライドに分割します | 連続したカルーセルスライドに広い画像をカットします | 1 つの投稿には広すぎるパノラマ | カルーセルスクロールジェネレータ |
問題が形状ではなくファイル サイズである場合、 画像のサイズ変更ガイド 歪みなく変化する寸法をカバーします。切り取られた画像が公開されており、あなたの名前を伝える必要がある場合、 ウォーターマーカー フレーム全体の隅またはタイルにロゴまたは署名を追加します。 にライフを投稿するための画像ツールのフルセット ソーシャルメディアツールハブ。
アップロードする前にトリミングする理由は何ですか?
プラットフォームの切り抜きは、被写体を見ることができないソフトウェアによって決定されるからです すべてのフィードは固定比率でレンダリングされ、他の形状のアップロードは、通常は長い次元の両側から均等にトリミングすることによって自動的にフィットします 一部のプラットフォーム、その中にはBlueskyは、タイムラインに表示されている場合にのみその切り抜きを適用するため、完全な画像は存在しますが、ほとんどの人はそれを見ません。
トリミングはまず3 つの決定をあなたに返します: フレームのどの部分が見えるか、正確な表示サイズで結果がどれほど鮮明であるか、そしてファイルがどれほど大きいか 1 つの画像につき数秒かかり、それは人々が気にする画像、つまりポートレート、製品ショット、およびエッジに近いテキストを含むグラフィックスの正確にとって最も重要です、それらの場合 画像をプラットフォームのサイズに切り取ります 主題に焦点を当て、無料でサインアップせず、ファイルをアップロードできるため、フィードを変更する理由はありません。
