1 枚の画像としてInstagramに投稿されたパノラマは、フィード内で細いストライプに変わります。 3つまたは4つのスライドにカットされ、カルーセルが画面いっぱいに表示されるように投稿された同じパノラマで、スワイプはカメラをパンしているかのように画像上を移動します。 効果は説明が簡単で、少し間違えやすいです。1ピクセルずれたスライド、または残りよりも狭い最後のスライド、そしてスワイプがジャンプします。
このガイドでは、シームレスなカルーセルがどのように機能するか、特定のパノラマに必要なスライドの数、実際のピクセル数での切断演算がどのように見えるか、および使用方法について説明します カルーセルスクロールジェネレータ toolz でブラウザでスライスを実行します。
tl;dr: シームレスカルーセルは、1 つの広い画像が正確にそれらのエッジを共有する等しいスライドにカットされ、順番に投稿されるので、スワイプして写真をスクロールします スライドカウントは、パノラマ& #39; sのアスペクト比をスライドで割ったものです& #39; sのアスペクト比: 3:1 のパノラマは、3 つの正方形のスライドまたは4 つの肖像画 (4:5) スライドです カルーセル スクロール ジェネレータ そのカウントを示唆し、正確にその多くのスライドに画像をトリミング& #39; 幅の価値、全体のピクセル境界上のカット、およびエクスポート1080 ピクセル幅のスライドは、JPEG、PNGまたはWebPとして番号付きジップでクライアント側を実行し、何もアップロードされていない、無料、サインアップなし。
シームレスなInstagramカルーセルとは何ですか?
シームレスカルーセルは、スライドが1 つの画像の連続した部分であるカルーセルポストです.1 つの写真から次の写真にステップする代わりに、視聴者がスワイプし、絵はギャップを越えて続きます.風景写真家はパノラマに、デザイナーは長いイラストに、ブランドはタイムラインやいくつかのフレームにまたがる製品ラインナップにそれを使用します。
カルーセルがストリップにスライドを並べて表示し、投稿内のすべてのスライドが同じサイズであるため機能します。スライド 1 が元のピクセル列 1,200 で終了し、スライド 2 が列 1,200 で開始される場合、結合は目に見えません。スライド 2 が列 1,198 または 1,203 で開始される場合、画像のスライバーは繰り返されるか消えて、まっすぐな地平線または目に見えるステップとして表示される建物の端で消えます。
2 つのプラットフォームルールが他のすべてを形作ります この記事の執筆時点で、Instagramは1 つのカルーセルで最大20 のスライドを受け入れ、投稿内のすべてのスライドは最初のもののアスペクト比を共有します; 別の形状のスライドは一致するようにトリミングされます プラットフォームはこれらの詳細を時々変更するため、固定仕様ではなく現在の動作として扱います。
どのスライド形状を選択する必要がありますか?
肖像画4:5 は、Instagramのフィードが表示され、電話で最も画面を取る最も高い形状であるため、通常の選択です 正方形と風景は、組成がそれらに合ったときにそこにあります。
発電機は3 つのカルーセル形状を提供し、それぞれが1080 px幅でエクスポートされます:
| スライド形状 | 出力サイズ | 比率 (幅/高さ) | スライドすると 3:1 のパノラマが表示されます | スライドすると 4:1 のパノラマが表示されます |
|---|---|---|---|---|
| ポートレート (デフォルト) | 1080 x 1350 | 0.8 | 4です | 5です |
| 広場 | 1080 x 1080 | 1.0 | 3つです | 4です |
| 風景 | 1080 x 566 | 1.91 | 2です | 2です |
表のスライド数は次のセクションで取り上げた 1 つの区分からのものです 注目すべきパターンは 狭いスライドは同じ幅をカバーするためにより多くのものが必要ということです 縦のスライドはスライドあたりのパノラマの高さが一番高く、これが通常風景写真を大きく感じさせるものですが、より多くのスワイプが必要です 縦のスライドはパノラマを少ない短いフレームで表示し、スカイラインなどの非常に広く浅い画像に合います。
パノラマには何枚のスライドが必要ですか?
パノラマと #39; のアスペクト比をスライドと #39; のアスペクト比で割って、最も近いスライド全体に丸めます。
slides = round( (image width / image height) / (slide width / slide height) )
縦スライドでの 3:1 パノラマの場合: 3 / 0.8 = 3.75、4 に丸められます。 正方形スライド: 3 / 1 = 3。 横スライド: 3 / 1.908 = 1.57、2 に丸められます。
6000 x 1500 画像などの 4:1 パノラマの場合: 4 / 0.8 = 5 枚の縦スライド、4 / 1 = 4 枚の正方形のスライド、および 4 / 1.908 = 2.1 の横スライド 2 枚。
ザ・ パノラマからカルーセルツールへ 画像を追加するとすぐにこの計算を実行し、1 と 10 の間で答えをクランプし、 " 4 などの線で Slides スライダーを設定します。 " 4 は画像と一致します& #39; s プロポーションに最も近いです。 " スライダー自体を 2 から 10 に移動すると、提案は選択をオーバーライドするのをやめます。新しい画像を追加したり、別のスライド形状を選択したりすると、提案が戻ります。
カウントが完全に分割されることはめったにないので、何かが与える必要があります パノラマの上下から少しだけスライドを増やすように切り捨てる 左右からスライドを減らすように切り捨てる 発電機は、切断する前に中央に1 回そのトリムを作成するため、すべてのスライドが同じサイズになる理由です。
ツールは縫い目なしでスライドをどのように切断しますか?
これは 3 つのステップで機能し、それぞれが特定の種類の継ぎ目を停止するために存在します。
ステップ1: ストリップを切り取ります. スライドは一緒に、その比率がスライド比とスライド数を掛けた1 つの長いストリップを形成します。 1080 x 4 / 1350 = 3.2 である4 つの肖像画のスライドの場合 ツールは、正確にその比率で画像の最大の中心領域を取ります。 画像がストリップよりも広い場合、側面はトリミングされます。; 背が高い場合は、上部と下部がトリミングされます。
ステップ 2: ストリップをピクセル全体の列に分割します。 ストリップの幅は丸められ 画素数全体を指し スライドカウントで割ります 余った画素は 先頭のスライドに1つずつ配られます 3枚のスライドの3,199pxのストリップは 1,067+1,066+1,066 になります 列は連続していますから 各スライドは前のスライドが終わった後の ピクセルから正確に開始されます 列は2 回カウントされず スキップされることはありません。
ステップ 3: 各スライドを出力サイズにスケールします。 各列は、ブラウザ' を使用して、ポートレートの完全なプリセット サイズ (1080 x 1350) でキャンバス上に描画されます。 s キャンバス drawImage で定義された操作 WHATWG HTML 標準、 高品質 画像 スムージング で.
各スライドを丸めて& #39; s 位置を独立して丸めてみませんか?なぜなら、分数境界がドリフトするからです。ストリップが幅 3,201 px で、4 つのスライドがそれぞれ 800.25 px として計算される場合、各開始と幅を丸めるだけで、1 つのスライドと #39; s 右エッジをピクセルで次のスライドを過ぎて配置できます。 #39; s 左エッジ。先頭スライドに余りを広げることで、すべての境界が整数に保たれ、すべてのスライドが 1 つのソース ピクセル内に収まります。 1,067 対 1,066 の場合、その 1 つの余分なソース ピクセルによって出力の水平スケールが 0.1% 未満変化しますが、これは表示されません。
実際のピクセル数を使用した実際の例
4000 x 1333 のパノラマ、アスペクト比 3.0008 を取得し、縦スライドを選択します。
提案されたカウント。 3.0008 / 0.8 = 3.751、4 つのスライドに丸められます。
4 枚のスライド用のストリップ。 ストリップ比は 3.2 で、画像比 3.0008 はそれより小さいため、画像はストリップよりも比較的高くなります。ツールは 4000 px の幅を完全に保ち、高さをトリミングします: 4000 / 3.2 = 1,250 px。これにより、上から約 41.5 px、下から 41.5 px の 83 px が削除されます。
スライドが. 4000 / 4 = それぞれ 1,000 px に余りがないため、1000 x 1250 の 4 つのスライスがそれぞれ 1.08 ずつ 1080 x 1350 にスケールアップされます。
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
代わりに 3 枚のスライドを選択します. スライダーを3 にドラッグすると、ストリップ比は2.4 に下がります 今、画像はストリップよりも広いので、ツールはフル1,333 pxの高さを維持し、幅をトリムします:1,333 x 2.4 = 3,199.2 px、3,199 に丸められます 約400 pxが各側から3 つに分割され、つまり1,067 + 1,066 + 1,066 pxなので、最初のスライドは1 つの残りのピクセルを取得します。
押しすぎ. 6 枚のスライドで ストリップ比は0.8 x 6 = 4.8 となり 画像よりずっと広くなります ジェネレーターは警告を示します 画像' s比が ストリップ比の75% を下回ると 0.8 x 6 x 0.75 = 3.6 となり 3.0は3.6 未満になります そのため ページにはこう書かれています " この画像はその形状で6 枚のスライドを 収めるには十分な幅ではないので 各スライドは上下に強く切り取られます " 5 枚のスライドで しきい値は3.0 となり 画像はクリアするだけ。
2 つ目の例はぴったり合うパノラマを示しています 6000 x 1500 の画像は4:1 です 縦スライドでは暗示は4 / 0.8 = 5、ストリップ比は5 x 0.8 = 4.0、何もトリミングされていません: 1200 x 1500の5 つのスライス、それぞれ0.9 から1080 x 1350 に縮小された正方形のスライドに切り替えて、暗示は4、やはりトリムなし: 1500 x 1500の4 つのスライス、1080 x 1080 にスケーリングされます。
カルーセルを段階的に作る方法は?
- パノラマを追加します. を開きます Instagram カルーセルスプリッター そして画像をドロップするか、クリックして閲覧するか、クリップボードから画像を貼り付けます。ブラウザがデコードできる画像はどれでも機能します。これは実際には PNG、JPEG、WebP、GIF、AVIF を意味します。
- スライドの形を選びます. ポートレート4:5 がデフォルトです。 pickerの下のメモは、シェイプが何のためのものかを改めて表示します。
- スライドカウントを確認します. 提案を受け入れるか、スライダーを移動します。 preview ストリップはすぐに再描画され、ヘッダーには出力、たとえば " 4 x 1080x1350" が表示されます。
- フォーマットを選択してダウンロードします. " を押します。4 つすべてを zip" としてダウンロードします。セット全体に対して、または "Slide 1"、"Slide 2" を使用します。単一のスライドを保存するボタン。
ファイルには、元のファイル名から、ゼロパッドの番号で名前が付けられます: harbor.jpg なる harbor-01.jpeg、 harbor-02.jpeg などなど、内部 harbor-carousel.zip。 padding は、任意のファイルマネージャでスライドをスワイプ順に保持し、電話ですべて選択すると重要になります。 zip ライブラリは、zip ボタンを押したときにのみ読み込まれるため、ページ自体は明るいままになります。
スライドを番号順にInstagramにアップロードする 単一のカルーセル投稿 順序を外して投稿することは、正しいスライドのセットが壊れて見える最も一般的な方法です。
JPEG、PNG、WebPをエクスポートする必要がありますか?
JPEGはデフォルトであり、写真のための正しい選択です InstagramはとにかくJPEGとしてアップロードを再エンコードするため、ロスレスファイルはより大きなアップロードを購入し、最後に何も表示されません JPEG圧縮はで定義されています ITU-T 勧告 T.81と、ジェネレーターは 0.92 の品質でエンコードします。
PNG はロスレスであり、によって指定されます W3C PNG 勧告、およびイラスト、図表、またはテキストを含むパノラマに適しており、ハードエッジの周りの JPEG アーティファクトが Instagram's 独自の圧縮の前に表示されます。
WebP は、同様の品質で最小のファイルを提供し、非可逆エンコーディングにも 0.92 を使用します。これは、Web サイト ギャラリーなど、Instagram 以外の場所に向かうスライドにとって賢明な選択です。
その後、スライドを別の形式で作成する必要がある場合、またはスライドのフォルダーを一括変換する必要がある場合は、次のガイドを参照してください 画像フォーマット変換 JPG、PNG、WebP の間で何が変わるのか、またそれぞれの変更にいつ価値があるのかについて説明します。
分割すると画質が下がりますか?
切断はできません;スケーリングが可能です。各スライドはフル解像度でソースから取得され、幅 1080 px にスケーリングされます。
スライスが 1080 px より広い場合、各スライスが 1200 px である 6000 x 1500 の例のように、スライドは縮小され、目に見える詳細が失われます。スライスが 1080 px より狭い場合、スライドは拡大され、より柔らかく見えます。4 つの縦スライド内の 4000 x 1333 画像は 1000 px のスライスを与え、穏やかな 1.08 倍の拡大です。 5 つのスライドに分割された 2000 px 幅の画像は、400 px のスライスを与え、2.7 倍に拡大され、携帯電話では柔らかく見えます。
算術から経験則が続きます: 鮮明なスライドの場合、ソースはスライドごとに少なくとも1080 pxの幅である必要があるため、4 つのスライドで4,320 px、5 で5,400 px パノラマがそれより小さい場合、スライドの数が少なくなるとシャープに見えます。 拡大しても詳細を追加できない理由については、上のガイドを参照してください 品質を損なうことなく画像をリサイズします、ダウンスケーリング、アップスケーリング、リサンプリングを歩きます。
目に見える縫い目の原因は何ですか?また、どのように修正しますか?
ほとんどの縫い目は 5 つの原因のいずれかから生じ、発電機は最初の 2 つを除去します。
| 症状 | 考えられる原因 | 修正 |
|---|---|---|
| 接合部で薄いストリップが繰り返されたり、欠けたりします | 分数スライスの境界は独立して丸められます | ジェネレーターと同様に、全ピクセル スライシングを使用します |
| 最後のスライドは伸びたり短く切ったりしているように見えます | 1 つのスライドにダンプされた残りのピクセル | 残りは先頭のスライドに広げます |
| スライドアウトします | 間違った順序でアップロードされました | ファイル番号順、01 を先に投稿します |
| 1 つのスライドは他のスライドと異なる方法で切り取られました | 1 つの投稿で混合アスペクト比 | すべてのスライドを同じ形状にエクスポートします |
| 被験者は顔や看板の真ん中を切り裂きます | スライド境界がこの主題に着地します | 境界が移動するようにスライド数を変更します |
最後の行は、技術的な1 つではなく、構成の問題です.4 スライドで、境界は、ストリップの25% 、50% と75% に座る; 3 スライドで、33% と67% で、person& #39; sの顔が接合部に正確に着陸した場合、1 つのスライドは、通常、どこか無害なカットを移動します.結合部上の顔とテキストはスワイプを生き残るが、ビューアが単一のスライドで停止するたびにぎこちなく見える。
ツールの限界は?
スライダーは 2 枚から 10 枚のスライドで実行されます。 Instagram ではさらに多くのスライドが許可されていますが、10 枚を過ぎると、一般的なパノラマは各スライドに実際の詳細を与えるのに十分な幅を持たなくなり、各スライドは写真として読むのをやめる狭いストリップになります。
クロップは常に中央に配置されます。パノラマの重要な部分が上端または下端の近くにあり、選択したカウントが高さをトリミングする場合は、カウントを変更するか、最初にソースをトリミングします ソーシャルメディア イメージクロッパー、焦点を選択できます。
入力は、ブラウザが画像として識別し、デコードできるファイルでなければなりません。画像ではないファイルは、その名前を付けたメッセージで拒否され、破損した画像またはブラウザが読み取れない形式の画像は " を取得します。その画像は読み取れませんでした。 " iPhone からの HEIC 写真は、ほとんどのブラウザでデコードされないため、最初に変換します。
サイト上のすべてのツールと同様に、ダウンロードは 1 日の使用制限にカウントされます。透かしやアカウントは必要ありません。
パノラマはどこにでもアップロードされていますか?
いいえ 画像はブラウザのHTMLキャンバスでデコード、トリミング、スライス、エンコードされ、zipはローカルで組み立てられます サーバーに送信されるもの、保存またはログに記録されるものは何もなく、ページがロードされると切断されたネットワークで動作し続けることは、まだ公開されていない未公開の製品ショットやクライアント作業にとって重要です。
カルーセル投稿の関連ツール
スクロール ジェネレーターは、ソーシャル投稿用に構築された他のいくつかの画像ツールと並行して配置されており、それらはすべてクライアント側です。
ザ・ ソーシャルメディア イメージクロッパー 9 点の焦点グリッドを使用して、1 つの画像を 15 のプラットフォーム サイズにトリミングします。ザ マットジェネレータ 正方形または肖像画のマットに非正方形の画像を置くので、全体像はフィードを生き残る、それはカルーセルの前に小さい完全なパノラマを示すカバーポストに合うカバーポストに合っています フォトカードジェネレータ テンプレートから引用カードとニュース スタイルのグラフィックを構築します ウォーターマーカー 投稿する前に、隅またはタイルにロゴまたは署名の透かしを追加します。セット内のすべてのツールが にリストされています ソーシャルイメージツールハブ。
