画像をリサイズ

手順

1. JPEG、PNG、WebP、HEIC、AVIF をドロップするか、枠をクリックして選びます。ファイルを選ぶまで「リサイズ」は無効です。選ぶ操作はこのタブへ読み込むだけです。80 MiB（83,886,080 バイト）を超えるファイルは拒否されます。各辺は 1〜16,384 px です。
2. 幅と高さを入力するか、「長辺」に切り替えて長いほうのピクセル数を1つ入力します。縦横比の維持は既定でオンなので、一方を入れるともう一方が埋まります。伸ばすつもりがあるときだけオフにします。
3. 「リサイズ」を押します。JPEG / PNG / WebP はこのブラウザでデコードします。HEIC はその押下で /assets/libheif/ から libheif-js を読みます。AVIF はブラウザのデコーダを使い、このタブで開けなければ止まります。写真はアップロードされません。
4. 状態行を読みます。入力ピクセル、出力ピクセル、ダウンロードの実測バイト数が出ます。PNG は PNG のままです。JPEG、WebP、HEIC、AVIF は品質 0.92 の JPEG になります。ローカルの blob: URL からダウンロードします。

仕組み

ファイルを選ぶと、このタブのメモリへ最大 80 MiB（83,886,080 バイト）まで読みます。LocalPix へは投稿しません。再サンプルは canvas.drawImage で、ブラウザが公開していれば imageSmoothingQuality を high にします。新しいピクセルは補間です。このページは写真の細部を捏造せず、KB 上限へ向けた JPEG 品質探索もしません。名前の付いた KB / MB 上限は次の手順の KB指定で圧縮 です。

JPEG / PNG / WebP。 このブラウザが静止画をデコードします。PNG はアルファを残すため PNG のままダウンロードします。JPEG と WebP は品質 0.92 の JPEG です。WebP アニメーションは1枚になります。キャンバス JPEG にアルファも EXIF もありません。

HEIC。 最初の静止画を libheif-js 1.23.5（1,463,506 バイト、LGPL-3.0）で /assets/libheif/ からデコードします。HEIC→JPG と同じデコーダです。再サンプル後、品質 0.92 の JPEG を書きます。libheif は「リサイズ」押下時に読み、ファイル選択では始まりません。受け付けるブランドは heic、heix、hevc、hevx、mif1、msf1 です。

AVIF。 デコードはこのブラウザです。予備デコーダはありません。失敗すれば状態行がそう言い、ファイルはディスクに残ります。このブラウザが開ける静止画は品質 0.92 の JPEG になります。変換だけなら AVIF→JPG もあります。

GIF、TIFF、BMP などは拒否します。拡大はできます。追加ピクセルは補間です。同じサイズでも再エンコードします。

状態行の意味

• ファイルの前。 「画像を待っています。」リサイズは無効のままです。
• ファイルを選んだあと。 「Ready: 」にファイル名、このタブが読めるときのピクセルサイズ、入力 KB。80 MiB 超はバイト数を出して無効のままです。
• 実行中。 「Resizing to {w}×{h} px…」
• エンコード完了。 「Done: {sw}×{sh} → {w}×{h} px · {kb} KB {kind} ({bytes} bytes).」{kb} と {bytes} は結果 blob の実測です。

制限

• メモリ 80 MiB。 83,886,080 バイト。
• 各辺 1〜16,384 px。
• ピクセルサイズであり、KB 上限ではない。 状態行はエンコード後の実バイトです。KB 上限は KB指定で圧縮。
• JPEG 品質は 0.92。 PNG は新しい格子で PNG として再エンコードします。もともと JPEG だった写真は再エンコードされ、ダウンロードは元のビットではありません。
• HEIC と AVIF は JPEG になります。
• JPEG/PNG/WebP/AVIF にアカウントもモデルも不要。 HEIC は変換と同じ libheif を必要時に読みます。背景削除の回数は使いません。

出典

• CanvasRenderingContext2D.drawImage()（MDN）
• HTMLCanvasElement.toBlob()（MDN）
• Blob（MDN）