画像リサイズ
画像を正確なピクセル数またはパーセントでリサイズ。縦横比の維持、ストレッチ、収める、余白、切り抜きの選択ができ、高品質な縮小に対応します。
すべてブラウザ内で実行されます。データがアップロードされることはありません。
画像リサイズとは?
画像リサイズは、画像の幅と高さを変更します。新しいサイズをピクセルまたはパーセントで入力し、縦横比を連動させるか、解除して画像を新しい枠にどう収めるか(ストレッチ、内側に収める、埋めて切り抜く、収めて背景色で余白を埋める)を決められます。
画像リサイズの使い方
- 画像をドロップ、選択、または貼り付けると、現在のサイズが入力されます。
- ピクセルまたはパーセントを選び、新しい幅または高さを入力します。縦横比を維持がオンなら、もう一方の値が自動で更新されます。
- 別の形にするには、縦横比を維持のチェックを外し、画像の収め方(ストレッチ、内側に収める、埋めて切り抜く、収めて余白)を選びます。
- 必要に応じて出力形式を変更し、結果を
photo-800x600.jpgのような名前でダウンロードします。
例
40×20 PNG, width set to 20 px with Keep aspect ratio on
20×10 PNG named `<name>-20x10.png`
画像リサイズを使うべき場面
アップロードのサイズ要件を満たす、サムネイルを作る、大きなカメラ写真をWeb用に縮小するときに使います。小さな画像を元のサイズより大きくしてもディテールは増えず、ぼやけて見えます。その場合はベクターの元データやAIアップスケーラーを使ってください。
画像リサイズの仕組み
ツールは、選んだ収め方に応じて元と出力の矩形を計算します(coverは中央で切り抜き、padは画像を中央に置いて残りを塗りつぶします)。縮小では、最後のリサイズの前に imageSmoothingQuality = "high" で画像を繰り返し半分にするため、一度に大きく縮小したときのエイリアシングを避けられます。結果は、別の形式を選ばない限り、元の形式(PNG、JPEG、WebP)でエンコードされます。
一般的な使用例
- SNS用にプロフィール写真を400×400pxにリサイズ
- ドキュメントに追加する前のスクリーンショットの半分(50%)への縮小
- 埋めて切り抜くモードでの、正確な1200×630のSNSプレビュー画像の作成
- 商品写真を白背景の正方形キャンバスにレターボックス表示
セキュリティ注意事項
画像はブラウザ内でCanvas APIを使ってデコード、処理、エンコードされます。サーバーには何もアップロードされません。
よくある質問
収め方の違いは何ですか?
ストレッチは正確なサイズに歪めます。内側に収めるは比率を保ち、枠より小さくなることがあります。埋めて切り抜くは枠を覆ってはみ出しを切り取ります。収めて余白は全体を残し、空いた部分を背景色で埋めます。
リサイズすると画質は下がりますか?
縮小は、段階的な高品質スムージングのおかげで良好な画質を保ちます。JPEGやWebPで保存すると、わずかに非可逆圧縮(画質92%)がかかります。拡大は常にぼやけて見えます。
最大サイズはいくつですか?
1辺あたり最大20000pxで、ブラウザのcanvasメモリによって制限されます。