画像アスペクト比一括判定 — GCD 比 + 1080p / 4K / iPhone / TikTok 規格マッチ

解像度・比率の確認に使う画像には未公開の素材が含まれる

アスペクト比を確認したくなる場面は、SNS や配信プラットフォームへの投稿前、動画プロジェクトの素材を揃えるとき、デザインカンプやモックアップの寸法を確認するときなどです。これらの場面では、確認対象の画像そのものが未公開の素材であることが多くあります。

発売前のプロダクト写真、まだ公開していない広告クリエイティブ、クライアントから受け取った素材、社内資料のスクリーンショット ——これらを「比率を確認するだけ」の目的で外部サービスにアップロードすると、確認が終わった後もサーバーにデータが残るリスクがあります。

オンラインの画像情報サービスにアップロードする必要はない

アスペクト比は画像のピクセル寸法から算術的に計算できる情報です。サーバー側での処理が必要なわけではなく、ブラウザが画像を読み込んだ時点でピクセル数は確定します。それにもかかわらず、「画像情報を調べる」サービスの多くがファイルをアップロードさせるモデルを取っているのは、単純に実装コストの問題です。

アップロードを必要とするサービスでは、送信されたファイルが運営者のサーバーに到達します。「確認だけ」という軽微な目的でも、データの移動は起きています。アスペクト比確認のために未公開素材をサーバーに送るトレードオフは、避けられるなら避けるべきです。

img.naturalWidth / naturalHeight によるゼロバイト解析

このツールは \<img> 要素の naturalWidth と naturalHeight プロパティを使って画像の実寸法を取得します。FileReader で読み込んだバイナリを ObjectURL に変換し、\<img> タグに src として渡すと、ブラウザの画像デコーダがピクセル数を確定します。この時点で幅・高さが取得でき、GCD 計算でアスペクト比を算出します。

画像のピクセルデータはブラウザの内部メモリに展開されますが、外部ネットワークへは一切送信されません。EXIF 方位補正も Chrome / Firefox では自動で適用されます。アスペクト比の計算、最近接プリセットの照合、CSV 生成 ——すべてがブラウザ内 JavaScript で完結します。DevTools の Network タブを開いた状態で操作しても、ページ読み込み後のリクエストはゼロです。

アスペクト比確認後の共有前チェック

アスペクト比を確認した後、画像を共有・投稿する前にもう一手間かけることを推奨します。EXIF / GPS メタデータが含まれていれば image-exif-strip や exif-gps-strip で除去する、個人の顔や住所が映り込んでいれば image-pixelate でぼかす、解像度が投稿先の規定を超えていれば image-resize で縮小する ——アスペクト比の確認は「共有前チェック」の最初の一歩として位置づけると、後工程がスムーズになります。

naturalWidth / naturalHeight が見ているもの — pixel と EXIF Orientation のズレ

HTMLImageElement.naturalWidth と naturalHeight は、画像ファイルがデコードされたあとのピクセルバッファの寸法を返します。JPEG / PNG / WebP / AVIF どのフォーマットでも、ヘッダーに記録された純粋なピクセル次元です。一方、JPEG ファイルには EXIF の Orientation タグ (0x0112) が含まれることがあり、これは「撮影時のカメラの向きと、ピクセルデータの向きのズレ」を 1-8 の値で表します。

Chrome 81+ / Firefox 77+ / Safari 13.1+ は image-orientation: from-image を CSS のデフォルトとしており、naturalWidth / Height は EXIF Orientation を反映した「表示時の寸法」を返します。つまり、ピクセルバッファが 4032 × 3024 でも Orientation が「右に 90°回転」だった場合、naturalWidth = 3024 / naturalHeight = 4032 として報告されます。一方、古いブラウザや特定の SVG / WebP では Orientation を無視する実装もあり、寸法計算で食い違いが起きることがあります。本ツールは現代ブラウザの挙動を前提としているため、iPhone の縦撮影写真でも正しく 9:16 等の縦長アスペクト比として判定されます。

配信プラットフォームのアスペクト比規定一覧

主要配信プラットフォームの推奨アスペクト比を整理すると、Instagram フィード投稿は 1:1 (正方形) / 4:5 (縦長、上限) / 1.91:1 (横長、上限)、Instagram ストーリーズ・リールは 9:16 (1080×1920 px 推奨)、TikTok は 9:16 (1080×1920 px)、YouTube Shorts は 9:16 (1080×1920 px)、X (Twitter) のタイムライン投稿は 16:9 (1200×675 px) 推奨で 2:1 も対応、YouTube サムネイルは 16:9 (1280×720 px 以上)。

落とし穴として、Instagram は 4:5 の縦長を超える比率を投稿すると上下が自動クロップされます。TikTok / リールで 9:16 以外の比率 (例: 1:1 の正方形) で投稿すると、上下に黒帯または背景ぼかしが入って画面の有効領域が狭くなり、視聴維持率が下がる傾向があります。EC サイトでは Amazon が 1:1 (正方形、最低 1000 × 1000 px)、Shopify が 1:1 推奨ですが 4:5 も許容、楽天市場が個別店舗ごとの規定です。本ツールの「最近接プリセット」機能は、16:9 などの代表的な比率に加えて、これら配信プラットフォーム別の規定もテーブルに含めているため、「この画像はどのプラットフォーム向けに最適か」を一目で判定できます。比率が合わない画像は image-crop でプラットフォーム規定の比率に切り出すと、自動クロップによる意図しないトリミングを回避できます。