バルク画像リサイズツール

バルク画像リサイズとは何ですか？

画像をバルクリサイズする方法

1. 1
   写真をドロップ

   アップロードエリアに最大25のJPG、PNG、またはWebPファイルをドラッグするか、デバイスから選択するためにクリックします。各ファイルの元の寸法は、読み込まれるとその名前の横に表示されます。

2. 2
   リサイズモードを選択

   すべての出力を正確にNピクセル幅にしたい場合は固定幅を使用します（高さは異なります）。均等にスケールするには割合を使用します。ポートレートとランドスケープの混合バッチがあり、すべてを最大バウンディングボックスに収めたい場合は最長辺フィットを使用します。

3. 3
   ターゲット値を設定

   数字を入力するか、クイックピックチップをクリックします。1280はブログ画像の強力なデフォルト、1920はフルスクリーンのヒーロー写真、1080はInstagramサイズの正方形に適しています。

4. 4
   出力形式を選択

   単に小さいコピーが欲しい場合は元の形式を保持します。透明性をフラット化するにはJPGに切り替え、透明性を保持するにはPNGに切り替え、同じ可視品質で最小のファイルを得るにはWebPに切り替えます。

5. 5
   リサイズしてダウンロード

   すべてリサイズをクリックしてキューを処理します。各行はその前後の寸法とファイルサイズを表示します。ファイルを個別にダウンロードするか、すべてをダウンロードを使用して、ファイル間に小さな遅延を持たせて全バッチを取得します。

ブラウザ画像リサイズの仕組み

1. createImageBitmap()を介して各入力ファイルをデコードします — ネイティブで、ライブラリは不要です。
2. モード（固定/固定/割合/フィット）とソースアスペクト比に基づいてターゲット幅と高さを計算します。
3. ターゲット寸法で2Dキャンバスを割り当てます。
4. imageSmoothingQualityを'high'に設定して、ブラウザがより高品質のダウンサンプルを使用するようにします。
5. drawImage(bitmap, 0, 0, w, h) — ブラウザがリサイズを実行します。
6. canvas.toBlob(format, quality)が選択した形式でリサイズされたキャンバスを再エンコードします。

参考: MDN — CanvasRenderingContext2D.imageSmoothingQuality

一般的なリサイズ作業

バルクリサイズツールを使用するタイミング

• ブログ、CMS、またはナレッジベースにアップロードする前に、電話の写真のフォルダーをトリミングします。
• プラットフォームが2048 pxで制限されているeコマースリスト用に製品写真のダンプをダウンサイジングします。
• 混合バッチのヘッドショットを標準化し、すべてのチームページの写真が同じ視覚的サイズになるようにします。
• 小さいマスターを提供することで、CloudflareまたはS3バックの画像CDNの帯域幅コストを削減します。
• 特定のピクセルサイズを超えると一部のクライアントが拒否するメールニュースレターのアセットを準備します。
• ポートフォリオやギャラリー用のサムネイルセットを生成し、Photoshopを起動せずに済みます。
• Google Docに貼り付ける前に、スクリーンキャプチャのデッキを管理可能なサイズに縮小します。

関連ツール

よくある質問