画像リサイズ
画像を見ながら幅 × 高さを決め、縦横比はロックしたまま。
- すべて無料登録なし、回数制限なし、有料プランなし。
- アップロードなしファイルは自分の端末で処理され、サーバーには届きません。
- 結果に条件なし透かしなし、勝手な縮小なし、サイズ上限なし。
- 変更はすべて公開修正も新しい工具も、すべて更新履歴ページに書いています。
この画像リサイズツールでできること
画像をドロップすると、1 枚目がキャンバスに表示され、その上に破線の枠が重なります。この枠が結果です。幅か高さを入力すると、縦横比ロックがオン(既定)ならもう一方の数値が追従し、枠もそれに合わせて伸び縮みします。クイックボタンは長辺を 1920・1280・800・400 に設定します。Web ページ、ブログ、サムネイルでよく使われる値です。単位を % に切り替えると倍率で拡大縮小できます。枠の角をつかんでドラッグすることもでき、数値はドラッグに合わせて更新されます。キャンバスに見えているものが、そのままファイルになります。
各行には元と新しいピクセル寸法がファイルサイズとともに表示され、出力ファイル名には新しい寸法が付く(photo-1280x853.jpg)ので、バッチ処理でも整理しやすくなっています。縮小には多段階のリサンプラーを使い、最終パスの前に画像を繰り返し半分にするため、大幅な縮小時に 1 パスの拡大縮小で生じるギザギザやモアレを避けられます。すべてブラウザ内で動作し、アップロードなし、待ち行列なし、制限なしです。
使い方
サイズを決めたら「リサイズ」を押します。複数枚のときは、幅 × 高さ はすべての画像を収める箱です。横長の写真は幅で、縦長の写真は高さで制限され、箱より大きくなるものはありません。横と縦が混ざったフォルダーでも設定は 1 つで済みます。リストの行をクリックすると、その画像がキャンバスに表示されます。「拡大しない」(既定でオン)は、箱より小さい画像をそのまま残します。縦横比のロックを外すのは、プラットフォームが正確なサイズを要求する場合だけにしてください。その場合は箱いっぱいに引き伸ばされ、キャンバスの下にその旨が表示されます。設定はこの端末に記憶されます。
バッチが終わったら、ファイルを 1 つずつまたは ZIP でダウンロードするか、「結果を使って続ける」のボタンで、リサイズした画像を最終的なサイズ削減のために画像圧縮へ、別の形式にするために形式変換へ送ります。3 つのツールは同じ一覧を共有しているので、よくあるウェブ用の流れ(表示サイズにリサイズ → WebP に変換 → 目標容量まで圧縮)は 3 回のクリックと 1 回のファイル選択で済みます。横向きや上下逆の写真は先に画像回転を、背景をきれいにしたい商品写真はリサイズ前に背景除去を通してください。
よくある落とし穴
拡大してもディテールは増えません。400 ピクセルの画像を 2000 ピクセルに拡大すると、足りないピクセルは復元ではなく補間されるため、ぼんやりした結果になります。大きな画像が必要なら、元の画像かベクターのソースに戻ってください。縦横比のロックを外すと、意図的に比率を無視して縦長の写真を横長の箱に押し込みます。プラットフォームが本当に固定サイズを要求する場合だけにし、比率が違うなら先にトリミングしてください。
小さな文字を含む PNG スクリーンショットをリサイズすると、文字がにじみます。可能ならスクリーンショットは元のサイズのままにして、ページ側で CSS により拡大縮小させてください。% 単位は各画像自身のサイズに対する比率なので、サイズの混ざった一括処理ではばらばらの結果になります。揃えたいときはピクセルを使ってください。また、canvas を使うツール全般と同じく、EXIF メタデータ(向きのフラグを含む)は失われます。ブラウザーは拡大縮小の前に向きを適用するので写真は正しい向きになりますが、カメラ情報は保持されません。
背景知識:画像の拡大縮小の仕組み
画像を縮小するとは、置き換えられる複数の元ピクセルから、新しい各ピクセルの色を決めることです。ニアレストネイバーは 1 つだけを選ぶためギザギザに見えます。バイリニアは最も近い 4 つを平均します。バイキュービックと Lanczos はより広い範囲に重み付けし、なめらかで鮮明な結果を生みます。ブラウザはキャンバス描画に高品質モードを実装していますが、縮小率が大きい場合(たとえば 6000 ピクセルから 600 ピクセルへ)、1 パスでは元ピクセルのサンプリングが少なすぎてエイリアシングが現れます。ここで採用している標準的な解決策は、目標サイズの 2 倍以内になるまで画像を繰り返し半分にしてから、最終的なリサンプリングを行うことです。
現在のデジタルカメラやスマホは 1200 万〜5000 万画素の画像を生成し、どんな画面よりはるかに大きくなっています。4K モニターでもわずか 800 万画素、スマホの画面は 300 万画素程度です。表示サイズより大きな画像を配信することは、帯域、メモリ、デコード時間を無駄に消費するだけで、だからこそレスポンシブ画像(srcset 属性)や画像 CDN が存在します。アップロード前にローカルでリサイズすれば、インフラなしで同じ結果が得られます。しかも処理はブラウザ内で行われるため、写真がお使いの端末から出ることはありません。
画像リサイズの活用シーン
最大の用途はウェブ公開です。ヒーロー画像を CSS の幅に合わせる、2 倍の Retina 版を作る、srcset に必要な複数サイズを用意する、などです。SNS は特定の寸法を求めます。リンクプレビューは 1200×630、正方形の投稿は 1080×1080、バナーは 1500×500 です。メール署名やメールマガジンには幅固定の小さな画像が必要です。行政、大学、求人サイトでのプロフィール写真や証明写真のアップロードには、600×600 や最大 2 MB といったピクセル制限がよく課されます。アプリストアはデバイスの解像度ぴったりのスクリーンショットを要求し、印刷会社は物理サイズに対する最低画素数を求めます。
旅行のアルバムを保管・共有する前の一括縮小、商品写真をショップのグリッドサイズに縮める、1 枚のマスター PNG から 16/32/64/128 ピクセルのアイコンセットを作る、スキャンした書類をメールで送れるサイズに減らす、といったことはすべて日常的な作業です。WebP 出力には形式変換を、目標容量に合わせるには画像圧縮を組み合わせてください。QR コードを含むリサイズ済み PNG は、モジュールを鮮明に保つため PNG のままにしてください。PDF を画像に変換で書き出したページも、スライドやウェブサイトに載せる前にここでリサイズできます。
よくある質問
リサイズしても縦横比は保たれますか?
はい。縦横比ロックがオン(既定)であれば、2 つ目の数値は 1 つ目に追従し、すべての画像は箱の中に比率を保ったまま収められます。ロックを外すと、入力した幅 × 高さにそのまま引き伸ばされます。
画像を大きくすることはできますか?
できますが、拡大は既存のピクセルを補間するだけなので、結果はぼやけ気味になります。より高い解像度が必要な場合は、元の画像かベクターのソースをお使いください。
リサイズした画像はなぜバイト数も大幅に小さくなるのですか?
ピクセルが減ればバイト数も減ります。各辺を半分にすると、ピクセルの 4 分の 3 がなくなります。JPEG/WebP では、選んだ品質での再エンコードによってさらに削減されます。
写真はアップロードされますか?
いいえ。拡大縮小とエンコードは canvas API を使ってブラウザ内で行われます。一度読み込めばオフラインでも動作します。
多数の画像を同じ幅にするには?
幅を入力し、高さの欄を空にして、すべてのファイルをドロップします。どの画像もその幅と比例した高さになり、「すべてダウンロード」で 1 つの ZIP にまとまります。