無料オンライン・画像アスペクト比変更ツール「ASPECT RATIO CHANGER」

その一枚は、届ける場所が変わるたび、新しい形に生まれ変わる。

画像をドロップすると解像度とアスペクト比を表示し、指定した比率へ「クロップ」「余白追加」「手動配置」の3つの方法で変換できるWebツールです。YouTubeのサムネイル（16:9）やInstagramの投稿（1:1・4:5）・ストーリーズ（9:16）など、用途に応じた比率へすぐに書き出せます。出力形式はPNG／JPEG／WebPから選べ、JPEG／WebPは画質調整も可能です。出力サイズも数値で直接指定でき、ファイルサイズの上限は50MBです。スマートフォンのブラウザからでも操作でき、日本語・英語表示にも対応しています。当スタジオが無料で公開しています。

「Aspect Ratio Changer」OPEN APP

動作環境：Windows／Mac・スマートフォン対応
（Chrome / Edge / Firefox 最新版。タブレットでの動作は未検証）

ASPECT RATIO CHANGER　説明書

画像をドロップすると解像度とアスペクト比を表示し、指定した比率に「クロップ」「余白追加」「手動」で変換できるWebツールです。

利用について

このツールはどなたでも自由にご利用いただけます。事前のご連絡やご許可は不要です。商用利用も問題ありません。

なお、本ツールのソースコード・デザイン・仕組みを無断で複製・転載・再配布することは禁止します。

免責事項

本ツールは現状のまま提供しており、動作の完全性や継続的な提供を保証するものではありません。本ツールの利用、または利用によって生じたいかなる損害についても、当方は責任を負いかねます。予告なく内容を変更・停止する場合があります。

対応ファイル形式

入力：JPEG / PNG / WebP / GIF / BMP / SVG / AVIF など、お使いのブラウザが画像として読み込める形式（読み込んだ画像のファイル形式は「元画像の情報」欄に表示されます）
- TIFF・ICOなど一部の形式は、ブラウザによっては読み込めない場合があります
- ファイルサイズ上限：50MB
出力：PNG / JPEG / WebP から選択可能（JPEG・WebPは書き出し時に画質を10〜100%で調整できます）

表示言語について

画面右上の「JA / EN」ボタンで、日本語・英語をワンクリックで切り替えられます。初期表示は日本語で、一度選んだ言語はブラウザに記憶され、次回訪問時も同じ言語で表示されます。以下の説明は日本語表示時の画面文言で記載しています。

使い方

1. 画像をドロップする

画面上部のドロップエリアに画像をドラッグ&ドロップするか、クリックしてファイルを選択します。画像をコピーした状態でCtrl+V（Macは⌘+V）を押して貼り付けることもできます。読み込むと、元画像の解像度・アスペクト比・ファイル形式・ファイル名が表示されます。

画像を読み込むとドロップエリアは「クリックまたはドロップで画像を変更」という小さな帯に畳まれます。別の画像に差し替えたい場合は、この帯に新しい画像をドロップするかクリックしてください。

2. 必要に応じて回転・反転・傾き補正・明るさ調整をする

スマートフォンなどで撮影した画像が横倒しになっている場合や、明るさ・コントラスト・彩度・色温度を微調整したい場合は、「画像補正」の見出しをクリックして欄を開きます（この欄は初期状態で畳まれています）。上部のスライダーで「明るさ」「コントラスト」（各50〜150%）、「彩度」（0〜200%）、「色温度」（0〜200%、100%より下げると寒色寄り・上げると暖色寄り）、「傾き補正」（-45°〜45°、水平線が傾いた写真の水平出しや、斜めの構図を意図的に作りたい場合に使用）を調整でき、いずれもデフォルトは0または100%（補正なし）です。下部のボタンでは「左に90°」「右に90°」で90度単位の回転、「左右反転」「上下反転」で鏡像反転ができます（組み合わせて使用可能）。「傾き補正」で画像を回転させると、はみ出す四隅は透明になり、そのままクロップ・余白・手動のどのモードでも変換できます（PNG以外や透過OFF時は背景色で自動的に塗りつぶされます）。「リセット」ボタンで回転・反転・傾き補正とすべての補正スライダーを一括で元に戻せます。ここでの調整は、以降のアスペクト比変換・プレビュー・ダウンロードすべてに反映されます。「元画像の情報」欄の解像度・アスペクト比の表示も、回転後の値に更新されます。別の画像に差し替えると、この欄の設定はすべて自動的にリセットされます。

3. 新しいアスペクト比を指定する

「新しいアスペクト比」欄に、半角スペース区切りで「幅高さ」を入力します（例: 16 9）。よく使う比率はプリセットボタン（1:1 / 4:3 / 3:4 / 3:2 / 2:3 / 4:5 / 16:9 / 9:16）からワンクリックで選べます。

4. 変換方法を選ぶ

モード	内容
クロップ	指定した比率になるよう、画像の中央を基準に不要な部分を切り取ります
余白を足す	元画像はそのままに、指定した比率になるよう上下または左右に余白を追加します
手動	拡大・縮小スライダーとドラッグ操作で、切り取る範囲（フレーム）の大きさと位置を自分で調整できます

「クロップ」モードのプレビューでは、元画像全体を表示したうえで、切り取られて消える部分を暗く表示します。どのくらいの範囲が切れるか一目で確認できます（暗くなっている部分はダウンロード画像には含まれません）。

プレビュー欄右上の「グリッドを表示」にチェックを入れると、実際に書き出される範囲の上に構図確認用のガイド線が重なって表示されます（デフォルトでON）。あくまで目安表示のためダウンロード画像には含まれません。チェックを外すといつでも非表示にできます。

グリッドの種類は「3分割」「2分割」の2種類から選べます（グリッドが表示されている間のみボタンが表示されます）。「3分割」は縦横2本ずつの三分割線＋中央の小さな十字マーク、「2分割」は縦横1本ずつ、中央を貫通するフルサイズの線でちょうど半分に区切ります。

背景色をカラーピッカーで指定できます（クロップ・余白・手動の3モード共通）。よく使う「白・黒・グレー」はスウォッチボタンからワンクリックで選べます。「透過」にチェックを入れると、背景を透明にしてPNGで書き出します。クロップモードでは通常この設定を意識する必要はありませんが、「傾き補正」で画像を回転させてクロップ枠の中に透明な四隅が入り込んだ場合に、そこをどう塗るか（背景色 or 透明のまま）を指定するのに使います。

「手動」モードでは、スライダーで50%〜300%の範囲で拡大・縮小できます。書き出される範囲を示すピンクの破線のフレームは常にプレビュー画面上の同じ場所に固定されており、拡大・縮小しても位置もサイズも変わりません。プレビュー上の画像をドラッグすると、フレームは動かずに画像の方が拡大・パンされます（スマートフォンの写真アプリの切り抜き機能と同じ操作感です）。大きくドラッグしてフレームから画像がはみ出すと、はみ出た部分には背景色（または透過設定なら透明）が見えるので、どのくらいズレているか常にひと目で確認できます。クロップモードと同様に、フレームの外側は暗く表示されます。ピンクの破線はダウンロードした画像には含まれません。拡大・縮小スライダーの右側の小さなリセットボタンで拡大率だけを100%に戻せます（位置はそのまま）。「大きさ・位置をリセット」ボタンはスライダー・位置ともに初期状態に戻します。「グリッドを表示」（クロップモードと共通の設定）は手動モードのプレビューにも同じように重なって表示されます。

プレビュー画像をクリックして選択状態にすると、矢印キー（↑↓←→）でも位置を微調整できます。Shiftキーを押しながらだと大きく移動します。ドラッグ操作が難しい環境でのご利用にお使いください。

ドラッグ中、画像の中心がフレームの中心に近づくと自動的にピタッと吸着し、紫色のガイド線が表示されます。数値を気にせず感覚的に中央揃えできます。また、縦長・横長など極端な比率の画像でも位置合わせしやすいよう、プレビューの表示サイズは画面の高さに応じて大きく表示されます。

5. 出力設定（ファイル名・形式）を指定する

「出力設定」欄で、ダウンロードするファイルの名前と形式を指定できます。

ファイル名：初期値は読み込んだ元画像のファイル名です。自由に書き換えられます（/ \ : * ? " < > | などファイル名に使えない記号は自動的に取り除かれます）
連番を付ける：チェックを入れると、その時点のファイル名欄の内容を基準名として_01が付き、以降は別の画像を読み込むたびに_02・_03…と自動的に番号が進みます（WEB記事用に同じ連番規則で複数枚を書き出したい場合向け）。チェックを外すと通常どおり、読み込んだ画像自身のファイル名がそのまま使われます
- 番号は内部で数えているのではなく、その都度ファイル名欄に実際に入っている数字を読み取って+1しています。そのため、画像を間違えて読み込んでしまい番号だけ手で直した場合でも、次の画像は手直し後の番号から正しく続きます（番号が飛んだりずれたりしません）
- チェックを入れ直すと、その時点のファイル名欄の内容を基準に番号が続きます（◯◯_05のような状態でチェックを入れ直すと_06から続きます）。数字が付いていない状態でチェックを入れると_01から始まります
出力形式：PNG / JPEG / WebP から選べます。JPEG・WebPを選ぶと画質スライダー（10〜100%、初期値85%）が表示され、ファイルサイズと画質のバランスを調整できます
JPEG・WebPは透明を保持できないため、「透過」にチェックが入っていても背景色（カラーピッカーで指定した色）で塗りつぶして書き出されます。その旨のメッセージが画面にも表示されます
出力サイズ：幅または高さの数値欄に直接ピクセル数を入力すると、アスペクト比を保ったままもう片方が自動計算され、その解像度でダウンロードされます。何も入力しなければ元画像の解像度に応じた自然なサイズのまま書き出されます。横の丸い矢印アイコンを押すと、指定をリセットして自然なサイズに戻せます
- 出力サイズは最大8000pxまでです（ブラウザが安定して扱える上限を考慮した制限）
- 元画像より大きいサイズを指定すると、画像を拡大することになるため画質が粗くなります。その場合は欄の下に案内メッセージが表示されます

6. プレビューを確認してダウンロード

画面下部にリアルタイムでプレビューが表示されます。出力サイズ・出力アスペクト比・出力形式を確認し、「画像をダウンロード」ボタンを押すと指定した形式でファイルが保存されます（ファイル名は「入力した名前-モード名.拡張子」、例：sample-crop.png）。

「透過」にチェックを入れてPNG形式で書き出す場合、背景が市松模様（透明）になり見えづらいため、出力される画像全体の外枠を薄いグレーの破線で表示します（この枠線もダウンロード画像には含まれません）。

動作環境・注意事項

推奨ブラウザ：Google Chrome / Microsoft Edge / Firefox 最新版
プライバシー：画像は一切サーバーに送信されません。すべてブラウザのメモリ内で処理されます
出力形式はPNG / JPEG / WebPから選べます

トラブルシューティング

症状	対処法
ドロップしても反応しない	画像ファイル（JPEG/PNG/WebPなど）以外はドロップできません。ファイル形式をご確認ください
「ファイルサイズが50MBの上限を超えています」と出る	50MB以下のファイルでお試しください
「画像を読み込めませんでした」と出る	ファイルが破損しているか、お使いのブラウザが対応していない形式の可能性があります。別の画像でお試しください
プレビューが更新されない	アスペクト比の入力欄が「幅高さ」の形式（半角スペース区切りの数値2つ）になっているかご確認ください
余白の色が反映されない	「透過」にチェックが入っていると背景色は無効になります。チェックを外してから色を指定してください
透過を有効にしたのに背景が塗りつぶされる	出力形式がJPEGまたはWebPの場合、透明を保持できないため常に背景色で塗りつぶされます。透過を保ちたい場合はPNGを選んでください
ダウンロードされない	ブラウザのダウンロード許可設定をご確認ください

更新履歴

公開前の開発期間中の変更点をまとめています。

v1.13（2026-09-07）

手動モードの拡大時（100%以上）の操作方式を、「フレームをドラッグで動かす」方式から「フレームは画面上の同じ場所に固定し、画像の方をドラッグでパン・ズームする」方式に変更（縮小時の操作方式に統一）。スマートフォンの写真アプリの切り抜き機能に近い操作感になった
この変更により、大きくドラッグしてもフレーム（ピンクの破線）が画面の外に出て見えなくなることがなくなった。画像がフレームからはみ出した部分は背景色（または透過）で表示されるため、どのくらいズレているか常にひと目で分かる
Codexによるコードレビューを実施し、指摘された不具合を修正。色温度スライダーの操作直後にモードを切り替えたり別の画像を読み込んだりすると、ごく短い時間差で古い描画が画面に残ってしまう可能性があった不具合など（実運用で気づかれる頻度は低いが、念のため対応）
手動モードで拡大率を上げた状態で色温度を使うと反映が重くなる不具合を修正（ユーザーの実機テストで発覚）。拡大率が上がるほど負荷が重くなる原因になっていた無駄な処理を解消した

v1.12（2026-09-07）

「画像補正」に「傾き補正」スライダーを追加（-45°〜45°、0.1°刻み）。水平線が傾いた写真の水平出しや、斜めの構図を意図的に作りたい場合に使用。クロップ・余白・手動の3モードすべてで、回転後の画像をそのまま変換できる
既存の90度単位の回転・左右反転・上下反転と組み合わせて使用可能。「リセット」ボタンは傾き補正も一括でリセットする対象に含めた
傾き補正と色温度を組み合わせた際、回転ではみ出す四隅（本来は透明・背景色になるべき部分）にも色温度の色被りが乗ってしまう不具合を修正
クロップモードにも「背景色」「透過」の設定を追加（これまでは余白・手動モードのみ）。傾き補正でクロップ枠の中に透明な四隅が入り込んだ場合に、そこを背景色で塗るか透明のままにするかを選べる
手動モードのプレビューで、フレーム内に入り込んだ透明な四隅が背景色で塗られず、常にチェッカー柄のままになっていた不具合を修正（書き出し結果自体は正しかったが、プレビュー上の見た目だけ実際の背景色と異なっていた）
手動モードの「拡大・縮小」スライダーに、その項目だけを100%に戻す小さいリセットボタンを追加（既存の「大きさ・位置をリセット」ボタンは位置も含めて一括で戻す用途のまま変更なし）

v1.11（2026-09-01）

Codexによるコードレビューで見つかった不具合・改善点への対応。

色温度の調整結果が、カスタム出力サイズ（数値指定）でリサイズした後は画像の一部にしか反映されない不具合を修正
「余白を足す」モードで、色温度スライダーの変更がプレビューに反映されない不具合を修正
無効なアスペクト比（例: 空欄や不正な形式）を入力した状態のままだと、直前の（別の画像の可能性もある）書き出し結果がダウンロードできてしまう不具合を修正。無効な入力の間はダウンロードボタンを無効化するようにした
出力サイズ欄を空にしても値が元に戻らず、実際の出力解像度が古い数値のまま残ってしまう不具合を修正
同じ画像ファイルを続けて選択しても、2回目以降は反応しない不具合を修正
複数の画像を続けて読み込んだ際、読み込みが完了する順序によっては古い画像の情報が新しい画像を上書きしてしまう競合状態を修正
アスペクト比欄に極端に大きい数値・無限大・0に近い極小値を入力した場合のガードを追加
出力サイズを数値指定していない場合でも、8000pxの上限が確実に適用されるよう修正（非常に大きい元画像を使った際に発生しうる不具合）
出力サイズ欄に上限を超える数値を入力したまま欄の外をクリックすると、実際の出力サイズと表示が食い違ったままになる不具合を修正
ブラウザの設定等でlocalStorageが使えない環境でも、ツール全体が起動できるようにフォールバックを追加
画像の書き出し自体に失敗した場合に、無反応にならずエラーメッセージを表示するよう修正
ドロップエリアと「画像補正」の折りたたみ見出しを、キーボード（Tab移動＋Enter/スペース）でも操作できるように対応
背景色のスウォッチ（白・黒・グレー）のラベルが、英語表示に切り替えても日本語のままだった不具合を修正
画像の読み込み処理を内部的に見直し、メモリ使用量を削減

v1.10（2026-08-26）

「画像補正」に色温度スライダーを追加（0〜200%、デフォルト100%＝補正なし。下げると寒色寄り、上げると暖色寄り）。明るさ・コントラスト・彩度と異なり、ブラウザのCSSフィルターでは色温度を正確に再現できないため、画素のR（赤）・B（青）チャンネルを直接増減させる方式で実装（カメラのホワイトバランス調整と同じ考え方）
「画像補正」ブロック内のスライダー類を上、回転・反転ボタンを下に配置し直した
アスペクト比のプリセットボタン（1:1〜9:16）をひと回り拡大
全スライダーに、つまみを掴んでいる間だけ光るリング演出を追加
グリッドガイドの初期選択を「3分割」から「2分割」に変更

v1.9（2026-08-26）

「回転・反転」カードを「画像補正」に改称し、明るさ・コントラスト・彩度の調整スライダーを追加（各50〜150%、彩度のみ0〜200%、デフォルト100%）。クロップ・余白・手動の全モードでプレビュー・書き出し両方に反映される
別の画像を読み込むと、回転・反転と同様に明るさ・コントラスト・彩度も自動的にリセットされる
「リセット」ボタンは回転・反転と明るさ・コントラスト・彩度の両方を一括でリセットする

v1.8（2026-08-25）

手動モードで100%以上に拡大したときの見え方を変更。これまでは拡大するほどプレビュー全体（画像＋はみ出し部分の余白）が縮小表示されていたが、変更後はプレビュー画像は常に同じ表示サイズを保ち、代わりに書き出し範囲を示すフレーム（ピンクの破線）の方が拡大率に応じて小さくなる。一般的な写真編集ソフトのクロップツールと同じ考え方で、フレームをドラッグして位置を調整する（100%未満に縮小したときの見え方は従来どおり、変更していません）

v1.7（2026-08-24）

グリッドガイドに「3分割」「2分割」の2種類を追加。「3分割」は従来どおりの三分割線＋中央十字マーク、「2分割」は縦横1本ずつのフルサイズ線で中央から半分に区切る表示。グリッド表示中のみ切り替えボタンが表示される（デフォルトは3分割）
グリッド線の描画方式を、画像に焼き込む方式からブラウザの表示要素として重ねる方式に変更。高解像度の写真をプレビュー欄の表示サイズに縮小する際、焼き込み方式だと1pxの線が縮小処理で消えてしまうことがあった（特に2分割の中央線で発生しやすかった）。表示要素として重ねることで、常に画面上で1pxの線として安定して見えるようにした
手動モードで解像度の高い写真を大きく拡大（目安として260%以上）すると、プレビュー画面が真っ白になる不具合を修正。プレビュー用の描画だけ内部的に上限サイズに抑えるようにした（ダウンロードされる画像の解像度・画質には一切影響しない）
回転してから反転すると、意図した方向と逆に反転してしまう不具合を修正。 90度・270度回転した状態で「左右反転」または「上下反転」を押すと、実際にはボタンの表示と逆の軸で反転していた（回転していない状態・180度回転時は問題なし）
連番機能で、画像を1枚も読み込んでいない状態で「連番を付ける」にチェックを入れると、最初の画像の実際のファイル名が無視されimage_01になってしまう不具合を修正。正しく元のファイル名を基準に_01が付くようにした
アスペクト比の入力形式の説明を、常時表示の文章からマウスオーバーのツールチップに変更した際、スマートフォンなど「ホバー」できない環境では説明を確認する手段がなくなっていた。誤った形式を入力してプレビューが更新されない場合に、その場でエラーメッセージを表示するよう変更（正しい形式に戻すと自動的に消える）。ホバーツールチップ自体は引き続き併用

v1.6（2026-08-24）

プレビューに「三分割グリッド＋中央十字線」の表示トグルを追加（クロップ・余白・手動の全モード対応、デフォルトON）。実際に書き出される範囲にちょうど重なるように表示され、構図確認用のガイドとしてダウンロード画像には含まれない。線の色は純白ではなく半透明のグレーにしてあり、白背景の余白と重なっても見えなくならないようにしている
アスペクト比のプリセットボタン（1:1〜9:16）を入力欄の右側へ移動し、常時表示していた入力形式の説明文を入力欄のツールチップ（マウスオーバー表示）に変更。入力欄の横幅も見直して縮小
出力サイズの行にあった「出力アスペクト比」表示を、出力サイズ欄のすぐ右に詰めて配置するよう調整

v1.5（2026-08-24）

出力設定に「連番を付ける」チェックボックスを追加。チェックを入れると、その時点のファイル名を基準名として_01から番号が付き、別の画像を読み込むたびに_02・_03…と自動で進む。WEB記事用に一連の写真を同じ命名規則で書き出したい場合を想定した機能
チェックを外すと、これまでどおり読み込んだ画像自身のファイル名がそのまま使われる（デフォルトはオフ）
番号は内部カウンタではなく、その都度ファイル名欄に実際に入っている数字を読み取って+1する方式。画像を間違えて読み込んで番号を手直しした場合でも、次の画像は手直し後の番号から正しく続く

v1.4（2026-08-24）

設定を保持したまま連続処理できるように変更。1枚ダウンロードした後、別の画像に差し替えても、新しいアスペクト比・プリセット選択・変換方法・出力形式（画質含む）・背景色・出力サイズ指定が引き継がれる。同じ設定で何枚も処理したいブログ記事用の連続作業を想定した変更
引き継がれるのは初回に画像を読み込んだ後の設定のみ。最初の1枚目を読み込んだ時点でのアスペクト比欄・出力サイズ欄の初期値設定（元画像の比率をそのまま初期値にする挙動）は従来どおり
回転・反転、手動モードの拡大率・位置は画像ごとに条件が異なるため、これまでどおり新しい画像を読み込むたびにリセットされる（引き継ぎの対象外）

v1.3（2026-08-24）

「回転・反転」機能を追加。90度単位の回転（左右）と、左右反転・上下反転が組み合わせて使用可能。スマートフォン撮影で横倒しになった画像などを、アスペクト比変換の前に向きを直せる
「回転・反転」欄は見出しクリックで開閉できる折りたたみ式（初期状態は畳んだまま）。使わない場合に画面を占有しない
回転・反転を行うと、「元画像の情報」欄の解像度・アスペクト比表示も回転後の値に更新される
回転・反転を変更すると、手動モードの拡大率・位置と出力サイズ指定は自然な状態にリセットされる（別の向きを基準にした値が引き継がれて不自然な結果になるのを防ぐため）

v1.2（2026-08-11）

フォントをSpace Mono／M PLUS 1 CodeからHelvetica Neue（Arial, sans-serifフォールバック）に統一（Multi Audio Checker・Studio Tone Generatorと同じ方向）。タイトルロゴ「ASPECT RATIO CHANGER」のみfont-weight 600でやや太めに残し、他は通常ウェイト

v1.1（2026-08-11）

ヘッダーに「更新」（ページ再読み込み）・「ヘルプ」（WordPress固定ページへのリンク）ボタンを追加（VIZ WAVEと同じ構成）
日本語表示時のフォントを「M PLUS 1 Code」に変更し、英語表示（Space Mono）と見た目のトーンを統一（Space Monoは日本語グリフを持たないため、従来はOS標準の等幅フォントにフォールバックしていた）
ドロップエリアの案内文（太字指定していた箇所）の意図しない太字表示を解消
WordPress埋め込みをやめたことに伴い、アプリ全体の横幅を720px→960pxに拡大し、プレビューの最大高さも60vh→75vhに拡大
モバイル幅でヘッダーの「更新」「ヘルプ」ボタンが折り返さず画面外にはみ出し、横スクロールが発生していた不具合を修正
フッターの表記をVIZ WAVEと同じ「レコーディング・ミックス・マスタリング — Red Iguana Studio」に変更し、https://red-iguana-studio.com/ へのリンクに（「すべての処理はブラウザ内で完結します」は冒頭の説明文と重複するため削除）

v1.0（2026-08-10）

基本機能

画像ドロップによる解像度・アスペクト比・ファイル形式の表示
アスペクト比の指定（スペース区切り入力・プリセットボタン：1:1 / 4:3 / 3:4 / 3:2 / 2:3 / 4:5 / 16:9 / 9:16）
クロップ / 余白を足す / 手動配置の3モードによる比率変換
余白追加・手動配置時の背景色指定（クイックスウォッチ対応）・透過PNG書き出し
手動モードのドラッグ操作・50〜300%の拡大縮小、画像中心とフレーム中心が近づいた際の自動スナップ・ガイド線表示
クロップ・手動モードとも、切り取られて消える範囲を元画像全体表示＋暗くする形でプレビュー

UI・操作性

日本語 / 英語のワンクリック切り替え（選択状態はブラウザに記憶）
画像読み込み後、ドロップエリアが小さな帯に折りたたまれ、そこから直接別の画像に差し替え可能
画像をコピーしてCtrl+V（Mac: ⌘+V）で貼り付けて読み込み可能
手動モードで、プレビュー画像を選択後に矢印キー（Shiftで大きく移動）で位置を微調整可能
ファイル読み込み失敗時（ファイル破損・非対応形式・50MB超過など）にエラーメッセージを表示

出力の柔軟化

出力形式をPNG / JPEG / WebPから選択可能（JPEG・WebPは画質スライダー10〜100%付き。透過非対応のため常に背景色で塗りつぶし）
ダウンロード時のファイル名を自由に編集可能
出力サイズ（幅・高さ）を直接数値指定可能。アスペクト比を保ったまま解像度を変更でき、最大8000pxまで対応。元画像より大きいサイズを指定した場合は画質が粗くなる旨を案内

デザイン

フォントをSpace Mono中心に統一し、太字を排して全箇所を通常ウェイトに変更
ダウンロードボタンを目立つグラデーションデザインに変更

Free Online Image Aspect Ratio Tool “ASPECT RATIO CHANGER”

Every time its destination changes, that one photo is reborn into a new shape.

Drop in an image and this tool shows its resolution and aspect ratio, then converts it to your target ratio using one of three methods: crop, add padding, or manual placement. Export it in seconds to fit YouTube thumbnails (16:9), Instagram posts (1:1/4:5), Stories (9:16), and more. Choose PNG, JPEG, or WebP output, with adjustable quality for JPEG/WebP, plus direct numeric control over output size. File size is capped at 50MB, it works fine from a smartphone browser, and the interface supports both Japanese and English. Freely offered by our studio.

ASPECT RATIO CHANGER Manual (English)

A web tool that shows an image’s resolution and aspect ratio when you drop it in, and converts it to a specified ratio via “Crop,” “Add Padding,” or “Manual” placement.

Usage

This tool is free for anyone to use. No prior notice or permission is required, and commercial use is fine.

Please do not copy, redistribute, or repost the tool’s source code, design, or mechanics without permission.

Disclaimer

This tool is provided “as is,” with no guarantee of complete functionality or continued availability. We are not liable for any damages arising from its use. Content may change or be discontinued without notice.

Supported File Formats

Input: JPEG / PNG / WebP / GIF / BMP / SVG / AVIF, and any other format your browser can decode as an image (the loaded file’s format is shown in the “Original Image Info” panel)
- Some formats, such as TIFF and ICO, may not load depending on your browser
- File size limit: 50MB
Output: Choose from PNG / JPEG / WebP (JPEG and WebP let you adjust quality from 10–100% on export)

Interface Language

Use the “JA / EN” toggle in the top-right corner to switch between Japanese and English with one click. The interface starts in Japanese; your choice is remembered in the browser and used again on your next visit.

How to Use

1. Drop an image

Drag and drop an image onto the drop area at the top of the page, or click it to choose a file. You can also copy an image and paste it with Ctrl+V (⌘+V on Mac). Once loaded, the original image’s resolution, aspect ratio, file format, and file name are displayed.

After an image loads, the drop area collapses into a small bar reading “Click or drop to change the image.” To swap in a different image, drop it onto — or click — that bar.

2. Rotate, flip, straighten, or adjust brightness if needed

If a photo taken on a phone or camera came out sideways, or you want to tweak its brightness, contrast, saturation, or color temperature, click the “Image Adjustments” heading to expand the panel (it starts collapsed). The sliders at the top adjust Brightness and Contrast (50–150% each), Saturation (0–200%), Color temp (0–200% — below 100% shifts cooler/bluer, above 100% shifts warmer), and Straighten (-45° to 45°, for leveling a tilted horizon or intentionally creating a diagonal composition), all defaulting to 0 or 100% (no change). Below that, “Rotate left 90°” and “Rotate right 90°” rotate in 90° steps, while “Flip horizontal” and “Flip vertical” mirror the image (these can be combined). Rotating with Straighten leaves the four corners transparent where the image no longer covers the frame — crop, pad, or manual mode all handle this automatically (filled with your background color unless you’re exporting PNG with transparency on). “Reset” restores rotation, flip, straighten, and every slider at once. Whatever you set here carries through to the aspect ratio conversion, preview, and download. The resolution and aspect ratio shown in the “Original Image Info” panel also update to reflect the rotated values. Loading a different image resets everything in this panel automatically.

3. Specify a new aspect ratio

In the “New Aspect Ratio” field, enter “width height” separated by a space (e.g. 16 9). Common ratios are available as one-click preset buttons (1:1 / 4:3 / 3:4 / 3:2 / 2:3 / 4:5 / 16:9 / 9:16).

4. Choose a conversion mode

Mode	Description
Crop	Trims the image around its center to fit the specified ratio
Add Padding	Keeps the original image intact and adds padding above/below or left/right to reach the specified ratio
Manual	Lets you adjust the size and position of the crop frame yourself with a zoom slider and drag

In “Crop” mode, the preview shows the entire original image with the portion that will be trimmed away dimmed, so you can see at a glance how much gets cut (the dimmed area is not included in the downloaded image).

Checking “Show grid” in the top-right of the preview panel overlays a composition guide over the exact area that will actually be exported (on by default). It’s a guide only — never included in the downloaded image — and you can uncheck it anytime to hide it.

Choose between two grid types with the buttons next to the checkbox (only shown while the grid is on): “Thirds” draws a rule-of-thirds grid (two vertical and two horizontal lines) plus a small crosshair at the center; “Center” draws just one full-length vertical line and one full-length horizontal line through the middle, splitting the frame exactly in half.

You can set the background color with a color picker (shared across Crop, Add padding, and Manual). Common colors — white, black, gray — are available as one-click swatches. Checking “Transparent” exports a PNG with a transparent background instead. Crop mode normally doesn’t need this, but it matters once Straighten rotates the image far enough that transparent corners end up inside the crop frame — this setting decides how those corners are filled.

In “Manual” mode, use the slider to zoom from 50% to 300%. The pink dashed frame marking what will actually be exported stays fixed at the same spot on the preview regardless of zoom — dragging the preview image pans and scales the image behind that fixed frame instead (the same feel as a phone photo app’s crop tool). Drag far enough that the image no longer fully covers the frame, and the gap shows the background color (or stays transparent, depending on your setting), so you can always tell at a glance how far you’ve moved. As with Crop mode, everything outside the frame is shown dimmed. The pink dashed line itself is not included in the downloaded image. The small reset button next to the scale slider resets just the zoom to 100% (position untouched); “Reset Size & Position” restores both the zoom and position to their defaults. “Show grid” (shared with Crop mode) overlays the same way on the Manual mode preview.

Click the preview image to select it, and you can then nudge its position with the arrow keys (↑↓←→) — hold Shift to move in larger steps. Handy if dragging is inconvenient on your device.

While dragging, the image snaps into place with a purple guide line whenever its center approaches the frame’s center, so you can center it by feel without watching numbers. The preview also scales up based on the window height, making it easier to position very tall or very wide images precisely.

5. Set output options (file name & format)

The “Output Settings” panel lets you set the downloaded file’s name and format.

File name: Defaults to the original image’s file name. Freely editable (characters not allowed in file names, such as / \ : * ? " < > |, are stripped automatically)
Add sequence number: Checking this takes whatever’s currently in the file name field as the base name and appends _01; loading another image then automatically advances it to _02, _03, and so on (handy for exporting a batch of images with a consistent numbering scheme for a blog post). Unchecking it goes back to using each loaded image’s own file name, as normal
- The number isn’t tracked internally — each time, it reads whatever number is actually sitting in the file name field and adds 1. So if you load the wrong image by mistake and manually fix the number, the next image correctly continues from your correction instead of skipping or drifting out of sync
- Re-checking the box continues from whatever’s in the field at that moment (e.g. re-checking on photo_05 continues at _06); checking it on text with no trailing number starts fresh at _01
Output format: Choose PNG / JPEG / WebP. Selecting JPEG or WebP reveals a quality slider (10–100%, default 85%) to balance file size against image quality
JPEG and WebP can’t preserve transparency, so even with “Transparent” checked, the image is filled with the background color (set via the color picker) on export. A message on screen notes this
Output size: Type a pixel value directly into the width or height field, and the other dimension is calculated automatically to keep the aspect ratio — the file downloads at that resolution. Leave both blank to export at the natural size determined by the source image. The circular arrow icon next to the fields resets to that natural size
- Output size is capped at 8000px (a limit chosen for what browsers can handle reliably)
- Specifying a size larger than the original image means upscaling, which will look softer. A notice appears below the fields in that case

6. Check the preview and download

A live preview appears at the bottom of the page. Check the output size, output aspect ratio, and output format, then click “Download Image” to save the file in the chosen format (named “your-file-name-mode.extension”, e.g. sample-crop.png).

When exporting a PNG with “Transparent” checked, the checkerboard transparency pattern can make the image hard to see, so a thin gray dashed border marks the full output frame (this border is not included in the downloaded image either).

Environment & Notes

Recommended browsers: Latest Google Chrome / Microsoft Edge / Firefox
Privacy: Images are never sent to a server — everything is processed in your browser’s memory
Output format can be chosen from PNG / JPEG / WebP

Troubleshooting

Symptom	Solution
Dropping a file does nothing	Only image files (JPEG/PNG/WebP, etc.) can be dropped. Check the file format
“File size exceeds the 50MB limit” appears	Try a file 50MB or smaller
“Could not load the image” appears	The file may be corrupted, or your browser may not support the format. Try a different image
The preview doesn’t update	Make sure the aspect ratio field is in “width height” format — two numbers separated by a single space
The padding color isn’t applied	The background color is disabled while “Transparent” is checked. Uncheck it before choosing a color
Transparency is on, but the background still gets filled in	If the output format is JPEG or WebP, transparency can’t be preserved and the background is always filled with the background color. Choose PNG to keep transparency
The file doesn’t download	Check your browser’s download permission settings

Changelog

Full version history is available in Japanese above. English notes cover only the 5 most recent releases (from v1.9 onward).

v1.13 (2026-09-07)

Changed how zoom works in Manual mode above 100%: instead of dragging the frame around a fixed image, the frame now stays fixed on screen and dragging pans/zooms the image behind it (matching how zooming below 100% already worked) — closer to how a phone photo app’s crop tool feels
This means the pink dashed frame can no longer be dragged off-screen and out of view; dragging the image far enough now just reveals the background color (or transparency) inside the frame instead, so it’s always obvious at a glance how far you’ve moved
Ran a Codex code review and fixed what it found, including a narrow timing issue where switching modes or loading a new image right after dragging the Color temp slider could briefly leave stale rendering on screen (unlikely to be noticed in normal use, fixed as a precaution)
Fixed Color temp getting sluggish in Manual mode at higher zoom levels (caught through real-device testing) by removing wasted work that scaled up with zoom

v1.12 (2026-09-07)

Added a Straighten slider to Image Adjustments (-45° to 45°, in 0.1° steps) for leveling a tilted horizon or intentionally creating a diagonal composition. Works in all three modes (Crop, Add padding, Manual)
Combines with the existing 90° rotate and flip buttons. The four corners left uncovered by a tilted rotation are transparent, and get filled with the background color automatically unless exporting as PNG with transparency on
“Reset” now restores Straighten to 0° along with rotation, flip, and the other sliders
Fixed the four corners left uncovered by Straighten (meant to stay transparent or show the background color) picking up the Color temp tint too, when both were used together
Added the Background color / Transparent controls to Crop mode too (previously only on Add padding and Manual) — sets how transparent corners inside the crop frame get filled after Straighten
Fixed Manual mode’s preview not filling transparent corners inside the frame with the background color (they stayed checkerboard) — the exported file itself was already correct, only the live preview looked wrong
Added a small reset button to Manual mode’s Scale slider that resets just the zoom to 100% (the existing “Reset Size & Position” button still resets both together)

v1.11 (2026-09-01)

Fixes and improvements found in a Codex code review.

Fixed Color temp only tinting part of the image when a custom (numeric) output size was applied
Fixed the “Add Padding” mode preview not reflecting Color temp slider changes
Fixed being able to download a stale export while the aspect ratio field held an invalid value; the download button is now disabled whenever the ratio input is invalid
Fixed clearing the output size field not resetting it to the natural size
Fixed selecting the same file twice in a row doing nothing the second time
Fixed a race condition where loading several images in quick succession could let an older image overwrite a newer one
Added guards against extreme or invalid values (e.g. infinity) in the aspect ratio field
Fixed the 8000px output size cap not being enforced when no custom size was set
Fixed the output size fields showing a stale number after typing a value above the limit; they now resync to the actual exported size on blur
Added a fallback so the tool still starts up in browsers/settings where localStorage is unavailable
Added an error message when image export itself fails, instead of doing nothing
The drop zone and the “Image Adjustments” collapsible header can now be operated by keyboard (Tab to focus, Enter/Space to activate)
Fixed the background-color swatch labels staying in Japanese even after switching to English
Changed how images are loaded internally to reduce memory use

v1.10 (2026-08-26)

Added a Color temp slider to Image Adjustments (0-200%, default 100% = no change; below 100% shifts cooler/bluer, above 100% shifts warmer), implemented by directly boosting/cutting the red and blue channels per pixel (the same idea as a camera’s white balance control)
Swapped the order of the two blocks inside “Image Adjustments” so the sliders sit above the rotate/flip buttons
Enlarged the aspect ratio preset buttons (1:1 through 9:16)
Added a glowing ring around the thumb while dragging any slider
Changed the default grid type from “Thirds” to “Center”

v1.9 (2026-08-26)

Renamed the “Rotate / Flip” card to “Image Adjustments” and added Brightness / Contrast / Saturation sliders (50-150% each, Saturation 0-200%, all default to 100%). Applies to both the preview and the exported image, in all three modes
Loading a new image now resets brightness/contrast/saturation automatically, same as rotation/flip
The “Reset” button now resets both rotation/flip and the color adjustment sliders together