画像のサイズを段階的に変更する方法
簡単な回答
画像のサイズを変更するには: Image Resizer を開き、画像をアップロードし、ターゲットの幅または高さを入力し (他の寸法はアスペクト比を維持するために自動計算されます)、サイズ変更された画像をダウンロードします。すべての処理は Canvas API を使用してローカルで行われます。画像はアップロードされません。
導入
画像のサイズを変更すると、その寸法 (ピクセル単位の幅と高さ) が変更されます。これは、Web 画像 (レイアウトとパフォーマンスのために特定のサイズが必要)、ソーシャル メディアの投稿 (プラットフォームごとに正確なサイズが必要)、およびサムネイルに不可欠です。サイズ変更は圧縮とは異なります。サイズ変更は寸法を変更し、圧縮はファイル サイズを削減します。このガイドでは、無料のオンライン ツールを使用してブラウザーで画像のサイズを変更する方法を説明します。
ステップバイステップ
-
画像サイズ変更ツールを開く
Image Resizer ツールのページに移動します。このツールは、JPEG、PNG、WebP、および BMP をサポートし、Canvas API を使用して画像をローカルで処理します。
-
画像をアップロードする
[アップロード] をクリックするか、画像をツールにドラッグ アンド ドロップします。このツールは、元のサイズ (例: 4000x3000 ピクセル) とファイル サイズを表示します。
-
ターゲット寸法を入力してください
新しい幅または高さを入力します。 「縦横比の維持」が有効 (デフォルト) の場合、歪みを防ぐために他の寸法が自動計算されます。たとえば、幅を 4000 から 800 に変更すると、高さは 3000 から 600 に自動設定されます。
-
リサンプリング方法を選択します (オプション)
一部のツールでは、バイリニア (高速、低品質) またはバイキュービック (低速、高品質) のリサンプリング オプションを提供しています。ダウンスケーリングの場合、バイキュービックはよりシャープな結果を生成します。通常はブラウザのdrawImage()デフォルトで十分です。
-
サイズ変更した画像をダウンロードする
「ダウンロード」をクリックして、サイズ変更した画像を保存します。ツールには、新しい寸法とファイル サイズが表示されます。使用する前に、結果が正しいことを確認してください。
例
Web表示用にリサイズ
入力: 写真.jpg (4000x3000、4.5 MB)
出力: photo-web.jpg (800x600、180 KB) — サイズが 96% 縮小
ソーシャルメディアのサムネイルのサイズを変更する
入力: image.png (2000x2000)
出力: summ.png (300x300) — 正方形のサムネイル
アスペクト比なしでサイズ変更（歪み）
入力: photo.jpg (4000x3000、比率維持：オフ)
出力: photo.jpg (800x800) — 引き伸ばされた/歪んだ
よくある問題
- アスペクト比の破壊による歪み - 「アスペクト比の維持」を無効にすると、画像が引き伸ばされます。意図的に歪みを生じさせたい場合を除き、常にオンにしておきます。
- アップスケーリングするとぼやけた画像が生成されます。元のサイズを超えて画像を拡大すると、ぼやけたピクセル化された結果が作成されます。品質を向上させるには、AI アップスケーリングを使用します。
- ユースケースに合わせて間違ったサイズにサイズ変更する - ターゲット プラットフォームの要件を確認してください。たとえば、Open Graph の画像は 1200x630、Twitter カードは 1200x675 にする必要があります。
- 圧縮なしのサイズ変更 - 4000 ピクセルの画像を 800 ピクセルにサイズ変更しても、100% JPEG 品質で保存すると、依然としてサイズが大きくなります。サイズ変更と圧縮を組み合わせます。
ヒント
- 画像のサイズを正確な表示サイズに変更します。800 ピクセルのディスプレイに 4000 ピクセルの画像を表示すると、帯域幅が無駄になり、ページの読み込みが遅くなります。
- 一般的な Web ディメンションを使用します: 1920x1080 (ヒーロー)、1200x630 (ソーシャル)、800x600 (コンテンツ)、300x300 (サムネイル)。
- 歪みを避けるために、常にアスペクト比を維持してください。例外は、意図的に特定の比率にトリミングする場合です。
- Image Resizer を使用すると、瞬時にプライベートな処理を行うことができます。画像がブラウザーから離れることはありません。