grid_on 画像グリッド分割ツール star

仕組み

このツールは写真をHTMLキャンバスに読み込み、選択した行数と列数に基づいてそのキャンバスをN×Mのグリッドに分割し、キャンバス領域抽出を使って各セルを個別の画像として切り出します — サーバーがピクセルを目にすることは一切ありません。生成された各タイルは、元の切り抜き領域と同じ解像度の個別のPNGファイルとしてダウンロードできます。そのため、3000×3000pxの画像を3×3グリッドに分割すると、1000×1000pxのタイルが9枚生成されます。

このツールが主に想定している用途であるInstagramのマルチ投稿グリッドは、Instagramがプロフィールグリッド上で複数のタイルにまたがる単一の「パズル」投稿をネイティブにサポートしたことが一度もないために生まれたものです。この効果を再現するため、クリエイターは1枚の横長画像を個別の正方形タイルにあらかじめ手作業で分割し、それぞれを別々の投稿としてアップロードする必要がありました。Instagramのプロフィールグリッドは新しい投稿が先に表示され、左から右、上から下の順に読まれるため、タイルは通常の読み順とは逆の順序でアップロードしなければなりません — 右下のタイルから始めて後ろ向きに進み、各行の中では右から左、下の行を上の行より先に投稿します。こうすることで、9つの投稿がすべて揃った時点で、新しい投稿が先に表示される仕組みによって左から右、上から下の正しい画像として再構成されます。

例: 3×3グリッドの場合、タイル1(画像の左上)は最後に投稿する必要があり、タイル9(画像の右下)は最初に投稿する必要があります。画像の読み順どおりにアップロードすると、プロフィール上でバラバラになった、鏡写しのように見えるグリッドになってしまいます — この手法における最も多い失敗です。

知っておくべきこと

• アスペクト比が重要です: 正方形(1:1)のソース画像はInstagram向けにきれいな正方形タイルに分割されます。正方形でない写真は正方形でないタイルになり、ポスターには問題ありませんが、先に画像を正方形にパディングしない限り、Instagram自体の正方形サムネイルクロップによって切り取られてしまいます。
• 可逆な切り抜き: 各タイルは元のビットマップからフル解像度で抽出され、PNGとして書き出されるため、分割そのものによる圧縮アーティファクトは発生しません。その後の画質劣化があるとすれば、それはアップロード時に各プラットフォームが再圧縮することによるものです。
• アップロード順序がすべての鍵です: 分割自体は単純です。グリッドを正しく見せられるかどうかは、タイルを読み順とは逆(右下から)に投稿することに完全にかかっています。
• Instagram専用ではありません: 同じN×M分割は、1枚の大きなポスターを複数の用紙にまたがって印刷する場合や、1枚の画像を規則的なタイルグリッドに分割する必要があるその他のプロジェクトにも使えます。