メインコンテンツへスキップ
ImageSize

ガイド

3 つのツールは役割がはっきり分かれています。構図の作り直しはコンバーター、アイコンはフォージ、純粋なサイズ削減は一括圧縮です。以下は実際に使う順番に沿って、各手順の既定値と変更方法を示します。最後にトラブルシューティングを置きました。

3 つともブラウザ内でローカルに動作し、アップロード先もアカウントもありません。画像を読み込んだ後はオフラインでも動き続けます。

サイズ一覧

画像を読み込む

3 つの入口、結果は同じ

3 つの方法で、結果は同じです:

  • ドラッグ — コンバーターはページのどこに落としても受け付けます(現在の画像を置き換え)。一括圧縮は結果が既にある場合は追加します。フォージはアップロード領域に落とす必要があります。
  • ファイルを選ぶ — アップロード領域をクリックするとファイル選択が開きます。
  • 貼り付け — スクリーンショットの後で ⌘/Ctrl + V。ディスクに保存する手間すら省けます。

形式について: コンバーターとフォージは JPG / PNG / WebP / AVIF / GIF を受け付けます(GIF は最初のフレームのみで、アニメーションは保持されません)。一括圧縮は JPG / PNG / WebP / AVIF を受け付け、アニメーション GIF と SVG は理由を添えて除外します。

サイズについて: 長辺が目標を下回らないようにしてください。コンバーターとフォージは 4096px を超える画像を生成前に 4096px へ縮小します。この手順はメモリを抑えるだけで出力には影響しません。最大の仕様でも YouTube チャンネルバナー(2560 × 1440) だからです。一括圧縮は 1 ファイル 50.00 MB、1 バッチ 60 を上限とします。

よくある落とし穴: ホームページで画像をドラッグすると、その画像を抱えたままコンバーターへ移動します。受け渡しは同じタブのメモリ経由です。再読み込みや新しいタブでは失われるので、選び直してください。

切り抜くか収めるか

端を切るか、周りに余白を足すか

これは結果が目に見えて変わる唯一の選択です。どちらのモードが優れているわけではなく、必要なもの次第です。

切り抜き(cover)
結果
枠を満たし、余分は切られる
向いている用途
スクリーンショット、ポスター、中央に被写体がある写真
注意
端の情報が失われる。どちら側かはフォーカルポイントが決める
背景
使用しない
内側に収める(contain)
結果
画像全体が見え、周囲に背景
向いている用途
グラフ、文字を含むデザイン、全体を見せる必要があるもの
注意
余白が増える。画像に合う背景を選ぶ
背景
余白の色。既定は白

切り替えるとすべての結果が即座に再計算されます。押すボタンはありません。

フォーカルポイント

被写体が中央にないときの構図

フォーカルポイントは、どちら側を捨てるかを決めます。上なら上部を残し、下なら下部を残します。contain の場合は、余白がどちら側に寄るかを制御します。

効く場面: 縦長画像を 16:9 のサムネイルにする、横長画像を 9:16 のカバーにする、縦長写真を正方形の投稿にする。この 3 つでは、既定の中央だと切ってほしくない場所を切ってしまいがちです。

切り抜きダイアログ

手動選択と比率の固定

フォーカルポイントだけでは近づくのが精一杯です。特定の領域を正確に合わせるには切り抜きダイアログを使います。ここには独立した 2 つの概念があり、それを切り離しておくことが「わかりにくい」と感じさせない鍵です:

  • 選択ボックスは画面に固定され、ドラッグして残す領域を決めます。
  • 画像のズームはボックスの後ろの画像だけを変え、ボックス自体は動きません。

比率のチップは、11 個の仕様にある 8 種類の比率から作られています: 16:9(1280×720)、3:1(1500×500)、1:1(400×400)、9:16(1080×1920)、1:1.56(420×654)、40:21(1200×630)、4:1(1584×396)、2:3(1000×1500)。各チップにはその比率を持つ最初の仕様のピクセルサイズが表示され、チップが有効な間は四隅のハンドルが比例して拡縮します。

切り抜きは積み重なります。「切り抜きを適用」は毎回、元画像からではなく現在の画像から切り直します。取り消すにはソースバーの 「切り抜きを戻す」 を使います。フォージの切り抜きダイアログは 1:1 だけです。出力がすべて正方形だからです。

⌘ / Ctrl + Vクリップボードの画像を貼り付ける。3 つのワークベンチすべてで動作
ホイール / ピンチ画像を拡大縮小。選択範囲は動かない
スペース / 中ドラッグ画像を移動。右ドラッグでも可
+ / −1.25 倍刻みで拡大
0画像をウィンドウに合わせて戻す
四隅のハンドル比率を固定したまま比例拡縮。歪ませることはできない
Esc切り抜きダイアログ、プレビュー、開いているドロップダウンを閉じる
← / →プレビュー内で前 / 次の画像
Enter / Spaceカードからプレビューを開く

モバイルにはスペースキーがありません。1 本指でボックスをドラッグ、2 本指でピンチして画像を拡大・移動します。それ以外は同じように動きます。

形式と品質

JPEG と PNG の選び方

JPEG は写真とほとんどの内容に向き、透過が不要な場合にファイルを半分にします。品質の既定値は 92(範囲 40–100)です。80 を下回るとグラデーションや平坦な部分に縞が見え、95 を超えるとファイルだけが大きくなり見た目の向上はありません。

PNG は透過(動画に重ねる字幕帯、切り抜いたロゴ)や、文字を含む大きな平坦色の領域に向きます。透過をオンにすると自動で PNG に切り替わります。JPEG にはアルファチャンネルが一切ないためです。JPEG に戻すとトグルはオフになり、「透明として表示、白として書き出し」という状態にはなりません。

PNG は可逆なので、品質スライダーはグレーアウトします。これは想定どおりです。

書き出しと命名

単体ファイル、ZIP、ファイル名の規則

単体ダウンロードは各カードの右下、またはプレビュー内の「これだけをダウンロード」にあります。セット全体は結果ヘッダーの「ZIP をダウンロード」ボタンです。プレビューには 2 つのモードがあります。プラットフォーム表示は実際のプラットフォームの形(円形アバター、角丸カード、インターフェースの重なりを含む)で描画し、オリジナルは書き出したピクセルを 1:1 で表示します。

ファイル名は固定なので、そのままアセットライブラリに入ります: プラットフォーム-用途-幅x高さ.jpg、たとえば {sample}。アーカイブ名はローカル時刻付きの social-sizes-20261024-1208.zip です。

すべて不要なときは、ツールバー右の「サイズを書き出す」で必要なものだけにチェックを入れてください。生成するファイルを減らすと時間とキャンバスメモリを節約できます。

1 つのロゴから一式へ

1 つの素材から全サイズを

フォージは 1 枚の画像を 6 グループ・20 個のファイルに変えます: ブラウザタブ(favicon)、ナビゲーション用ロゴ、iPhone のホーム画面、Android / PWA、Chrome 拡張機能、そして円形アバターと小サイズ群です。サイズ、形式、ファイル名はすべて独自の発明ではなく各プラットフォームのドキュメントに従っています。

1024 × 1024 の正方形ロゴが推奨の素材です。正方形でなくても動きます。余白を付けて比例配置され、引き伸ばされることはありません。

4 つのコントロールの役割

  • 形状(正方形 / 角丸 / 円)は描く輪郭だけを変えます。iOS のホーム画面アイコンとマスカブルは常に全面塗りです。マスクはシステムが適用するので、自分で先に切ると二重の縁と黒く埋まった角になります。
  • インセット(0〜20%)は、実際にロゴを表すサイズ(favicon、ナビゲーション用ロゴ、PWA のメインアイコン)にだけ適用されます。アバターとタッチアイコンは全面のままです。そうしないと「画像が縮んだ」と受け取られます。マスカブルは最低 10% を保ちます。システムが保証するのは中央の 80% だけだからです。
  • 背景 / 透過: iOS はアルファを許さず、透過ピクセルは黒で埋められるため、apple-touch と PWA のサイズは不透明に固定され、透過トグルはそれらに対して何もしません。
  • アップスケールしないは元のピクセルをそのまま埋め込みます。素材が目標より小さいとき、ぼかしではなくピクセルの格子が残るので、小さなロゴの問題がすぐに見えます。

誤読されやすい 2 つの出力

favicon.ico は 16 / 32 / 48 の PNG を 1 ファイルに埋め込んだもので、ブラウザがその中から 1 つを選びます。3 つのファイルに分割しないでください。favicon.svg と logo.svg は、ビットマップを SVG に埋め込んだ過渡的な入れ物です。ビットマップが本物のベクターになることはないので、これらはファイル名と参照を正しく揃えるだけのものです。本番では、同じ名前でデザインに本物のベクターを書き出してもらってください。

設置する

ファイルは各プラットフォームの慣例名(favicon.ico、favicon-16x16.png、apple-touch-icon.png、android-chrome-512x512.png、android-chrome-maskable-512x512.png、icon-192.png)を使います。すべてサイトのルートに置いてください。ソースバーの「すべて ZIP でダウンロード」は、素材の寸法、切り抜き領域、描画パラメータ、ファイル一覧を記した README.txt を含む一式を icons-20261024-1208.zip としてまとめます。ページ下部のスニペットには、コピーして使える HTML の head と manifest.json のブロックがあります。

結果を判断するにはカードを見てください。各カードは実際の表示サイズでアイコンを描き、開くとピクセル単位まで拡大します。16px 版で輪郭が判別できないなら、マークをもっと単純にする必要があります。

まとめて小さくする

品質の段階と目標サイズ

一括圧縮がすることはちょうど 1 つです。似た画像の集合を、構図に触れずに小さくします。コンバーターと違い 切り抜きも比率の変更もしません。フォージと違い新しいファイル形式も作りません。

出力形式

スマート(既定)は JPEG の素材を JPEG のまま、PNG / WebP / AVIF の素材を WebP に変換します。WebP はアルファを保ち、通常 PNG の半分以下のサイズで、PNG から PNG への再エンコードはほとんど効果がないからです。JPEG / WebP / PNG を強制することもできます。ブラウザが WebP をエンコードできない場合は PNG に戻り、拡張子もそれに従い、ページ上部にその旨が表示されます。

品質と寸法

品質スライダーは 40–100、既定値は 80 です。隣の 3 つのプリセットは 轻压缩 90 / 推荐 80 / 高压缩 60 です。それより下げると目に見えるブロック状のノイズが出るため、下限が 40 になっています。

「長辺」は 縮小しない / 3840 / 2560 / 1920 / 1280 を選べ、縮小のみを行います。上限を下回る素材はそのまま残り、拡大補間されることはありません。PNG を選ぶと品質スライダーも目標サイズも効かなくなります。PNG は可逆なので、サイズで制御する意味がないからです。

目標サイズへの追い込み方

KB の上限が与えられると、まず品質の段階を下げていき(最大 6 段、30 まで)、次に寸法を 25% 刻みで縮めます(最大 3 回、320px を下回らない)。どちらも効かないときだけ、その行は「未達」と表示されます。成功したふりはしません。

結果が元より悪くなることはない

何も縮小されず、エンコード結果が大きくなった場合は、元のファイルをそのまま渡し「元画像を保持」と表示します。この規則により圧縮が差し引きの損失になることはありません。代わりに、何もしていないように見える行が出ます。

パラメータを変えても自動では再圧縮しない

品質・サイズ・形式を変えると通知が出るだけで、画面の結果はまだ古いパラメータのものです。確認して上部の再圧縮ボタンを押してください。バッチ × 複数回のエンコードは高コストで、スライダーを動かすたびに再計算するとメインスレッドが固まります。

命名と比較

出力名は元の名前に -min を足したもの(形式が変わった場合は拡張子も変わります)。バッチ内で重複したら -2、-3 を付けます。そうしないと後の ZIP エントリが前のものを上書きします。アーカイブは compressed-images-20261024-1208.zip です。行をクリックすると比較ライトボックスが開き、仕切りはピクセル単位でドラッグでき、← / → で画像を移動します。

再エンコードはピクセルだけを書くので、EXIF(カメラ、絞り、シャッター、GPS)は落ちます。通常はそれが望ましいのですが、EXIF で保管しているなら元画像を先にバックアップしてください。

限界

サイズ・枚数・寸法の上限

  • サーバーなし — アップロード先もアカウントもありません。プライバシーとオフライン利用が手に入ります。代償は 再読み込みですべて消える ことで、結果はこのタブにしか存在しません。
  • 4096px の縮小 — コンバーターとフォージは 4096 より長い辺を生成前に縮小します。目標より小さい画像は拡大されます。この手順でそれを救うことはできません。
  • キャンバスメモリ — モバイルで 11 サイズを一度に生成すると引っかかることがあります。選択を減らすと改善します。一括圧縮は 1 バッチ 60 枚、1 枚 50.00 MB が上限です。
  • 形式の制限 — アニメーション GIF を再エンコードするとアニメーションが失われ、SVG はベクターなのでラスタライズすれば必ず歪み、ブラウザは HEIC をデコードできません。一括圧縮は 3 つとも除外し、理由を表示します。
  • 透過は形式に縛られる — 透過した出力は PNG にしか存在しません。JPEG では透過部分が選んだ背景色で埋まります。

トラブルシューティング

結果がおかしいときはこの順に確認

出力がぼやける

素材が小さすぎます。幅 1080 の正方形投稿には少なくとも 1080px の素材幅が必要で、YouTube チャンネルバナー には 2560px 必要です。ソースバーの寸法を確認してください。目標を下回るものは確実に拡大補間されています。

重要な内容が切れた

cover の切り抜きは常に端を切ります。それは仕様であり不具合ではありません。contain に切り替えるか、切り抜きダイアログで目標比率を固定して必要な領域を合わせてください。

アバターが欠けて見える

アバターは円形に切り抜かれるので、四隅は決して表示されません。被写体は直径 80% の中央の円の内側に置いてください。プレビューのプラットフォーム表示で実際の円形の結果を確認できます。

書き出した PNG が想定よりずっと大きい

正常です。1080×1920 の画像を PNG にすると 3〜5 MB になることがあります。透過が不要なら JPEG を使ってください。同じ内容で通常 200〜500 KB です。

スマートフォンで大きな画像を読み込むとページが重い

モバイルブラウザはページあたりのキャンバスメモリに上限があります。ツールバー右の「サイズを書き出す」で選択を減らし、2〜3 個ずつ生成してください。目に見えて改善します。

一括圧縮で縮まない画像がある

2 つのケースです。素材がすでに強く圧縮されていて再エンコードが害になるだけか、「長辺」がオフで寸法が変わらずエンコード結果だけが大きくなったかです。どちらも元ファイルを渡し、その行を「元画像を保持」と表示します。

インストールしたアイコンの縁が黒い

iOS はアルファを許さないため、透過ピクセルが黒になります。ここでは apple-touch と PWA のサイズを不透明に固定していますが、素材が透過背景の暗いロゴなら、書き出す前にロゴの色に近い背景を設定してください。

圧縮パラメータを変えたのに何も起きない

一括圧縮は意図的にライブ再計算をしません。1 バッチが数十枚、それぞれ最大 9 回のエンコードになり得るからです。パラメータ変更は通知を出すだけで、「再圧縮」を押して確定します。単体画像のツールはライブで更新されます。

再読み込みで全部消えた

3 つのツールはいずれもアップロード先を持たないので、サーバー側のコピーはありません。画像はこのタブのメモリにあり、再読み込み・閉じる・新しいタブで消えます。必要なものは先にダウンロードしてください。


特定のサイズについてまだ疑問がありますか?サイズ一覧には、各項目の実際の表示ルール、重なり、最もよくある失敗が書かれています。コンバーター、アイコンフォージ、一括圧縮はいずれもすぐ使えます。