ブラウザ内でピクセル単位で画像サイズを変更する

画像を正確なピクセル寸法にサイズ変更するにはどうすればよいですか？

1. 画像を選択します。 静止画のJPEG、PNG、WebPを1枚選択します。ブラウザはデコードする前にファイルを確認します。
2. 寸法を1つ設定します。 長辺、幅、高さ、パーセンテージ、または指定した枠のいずれかを使用します。もう一方の辺は自動で計算されます。
3. 確認済みのコピーをダウンロードします。 新しいファイルは、寸法、デコードされたピクセル、対応するメタデータの確認に合格するまでロックされたままです。

画質を落とさずに画像をサイズ変更できますか？

厳密には無理です。小さいラスター画像はピクセル数が減ります。大きいラスター画像はサンプル数が増えますが、新たに撮影された詳細が加わるわけではありません。JPEGや非可逆圧縮のWebPでは、エンコード時にピクセル値が変化することもあります。

このツールはそのトレードオフを確認できるようにします。写真モードは固定の高品質リサンプリングフィルタを使用します。処理結果には、指定した寸法、デコードされた出力寸法、形式、エンコーダー設定、ファイルサイズ、向きの処理、透過、対応するメタデータの結果が表示されます。

Picaは、ブラウザでのリサンプリングの制限をプロジェクトリポジトリで文書化しています。ローカルでのデコードと出力に使われるブラウザAPIは、createImageBitmapとOffscreenCanvas.convertToBlobで定義されています。

画像をKBまたはMBのサイズに変更するにはどうすればよいですか？

「リサイズ」という言葉は2つの異なる作業を指すことがあり、どちらの意味かによって使うべきツールが変わります。

ピクセルは寸法、KBはファイルサイズです。 このページが変更するのは寸法で、幅と高さをピクセル単位で設定し、ファイルサイズは自分で調整できない副次的な結果として変化します。フォームで600×600ピクセルを求められたときや、レイアウトに対して画像が大きすぎるときに使ってください。

20KB、50KB、100KB、200KBのようなファイルサイズの上限に収めるには、画像圧縮を使ってください。 KBやMBの数値を上限として受け取り、エンコーダー画質を試したうえで、実際の出力バイト数を表示します。無理に収めるために寸法を変更することはありません。

厳しい上限には両方のツールを順番に使う必要があります。フル解像度のスマートフォン写真は、どの画質でも20KBや50KBのJPEGに収まる以上の情報量を持っています。まずここで幅を縮小してから、画像圧縮で上限を設定してください。

JPEG、PNG、WebPでの出力

ブラウザはファイルを選択した後に各エンコーダーをテストします。返されたファイルの種類、署名、テストデコードが一致しない場合、その形式は無効になります。

アップロード不要の非公開画像サイズ変更

このページとその静的コードはCloudflareが配信します。選択後、ファイルはページとブラウザ内の同一オリジンのワーカーとの間だけでやり取りされます。クライアント側のアナリティクスは、あらかじめ決められたアクションイベントをVaultaireのPostHogプロキシへ送信します。これはこのページのContent Security Policyが許可する唯一の通信先であり、画像がそこに含まれることはありません。その後のページ遷移では、通常のWebリクエストが発生します。

サイズ変更は新しいラスター画像を作成するものであり、元のエンコード済み画像データは保持されません。対応する元のメタデータは表示されるだけで引き継がれず、出力結果は再度スキャンされます。これは、目に見えないピクセル透かしや独自形式のステガノグラフィによる痕跡のすべてを検出・削除するものではありません。