CodeKitHub
日本語
画像ツール

オンラインで画像のサイズを変更する

ほんの数秒で画像のサイズを変更:幅を正確なピクセル数またはパーセンテージで指定するだけで、高さはアスペクト比を維持するように自動的に調整されます。JPG、PNG、WebPに対応しており、一括処理も可能。また、当サイトの他のツールと同様、画像はブラウザの外に出ることはありません。

アスペクト比は自動的に維持されます

    このツールとは?

    画像リサイザーは、画像のピクセルサイズを変更するものです。これは、サイズを維持しつつより効率的に再エンコードする「圧縮」とは異なります。 リサイズが必要になるのは、フォームで「最大800px」と指定されている場合や、アバターが256×256でなければならない場合、あるいは幅700pxのブログコラムに4000pxのカメラ写真が明らかに大きすぎる場合などです。

    ダウンサンプリング(画像の縮小)は、視覚的な品質を損なうことなくファイルサイズを大幅に削減します。両方の辺を半分にすると、ピクセル数は75%減少します。アップサンプリング(拡大)もサポートされていますが、細部を補完することはできません。引き伸ばされた画像は、どうしても多少ぼやけてしまいます。このツールはアスペクト比を自動的に維持するため、画像が歪んで見えることはありません。

    なぜこれを使うのか?

    • 2つの直感的なモード:ピクセル単位の正確な幅(要件に合わせて)またはパーセンテージ(素早く縮小する場合)。
    • アスペクト比が自動的に固定されるため、うっかり写真が歪んでしまうことはありません。
    • 必要に応じて、出力時に形式の変換も行えます(JPG/PNG/WebP)。
    • ファイルごとにダウンロードしながら、数十枚の画像を一括でリサイズします。
    • ローカルかつ非公開:何もアップロードされず、サイズ制限もありません。

    使い方

    1. 画像をボックスにドラッグするか、クリックして選択してください。
    2. モードを選択してください:目標の幅をピクセル単位またはパーセンテージで入力してください。
    3. 必要に応じて、別の出力形式を選択してください(デフォルトでは元の形式が維持されます)。
    4. 各結果には、新しい寸法とファイルサイズが表示されます。「ダウンロード」をクリックしてください。

    入力

    camera.jpg — 4032×3024, 3.9 MB, resized to width 1200

    出力

    camera-1200x900.jpg — 1200×900, 260 KB

    出力ファイル名には新しい寸法が含まれるため、バージョンが混同されることはありません。

    一般的な利用例

    • フォーム、アプリアイコンの仕様、またはアップロードガイドライン(「アバターは400×400以下でなければならない」)で定められたピクセルサイズの要件を正確に満たすこと。
    • ウェブページに追加する前に、カメラで撮影した写真をまとめて縮小する。幅4000pxのオリジナル画像は、必要以上に読み込みに時間がかかるためだ。
    • サイズが異なるソース画像が格納されたフォルダから、統一されたサイズのサムネイル一式を作成する。
    • ページの幅に厳しい制限がある文書に画像を貼り付ける前に、その画像のピクセルサイズを縮小する。

    リサイズと圧縮の違い、そして順序が重要な理由

    リサイズと圧縮はどちらもファイルサイズを縮小しますが、その仕組みは異なります。リサイズはピクセル数を減らすのに対し(幅と高さを50%縮小した画像は、保存すべきピクセル数が75%減少します)、圧縮は同じピクセルをより効率的に再エンコードするものです。 画像のサイズが大きすぎて、かつ非圧縮の状態にある場合、まずリサイズを行う方がより大きな効果をもたらします。ピクセル数を4000pxから1200pxに削減することで、品質スライダーをいくら調整しても達成できないほど多くのデータが削除され、その後、リサイズ済みの画像を圧縮することで、残りの余分なデータをさらに削減できます。 逆の順序(まず圧縮、次にリサイズ)でも効果はありますが、先にリサイズを行うことで、圧縮処理の対象となるデータ量が減るため、処理速度がわずかに向上します。

    パーセントモードが、単にピクセル幅を小さく指定するのとどう違うのか

    パーセントモードとピクセル幅モードは、内部的には同じ計算が行われます(どちらも最終的には目標幅とそれに比例した高さを算出します)が、実際には異なる課題を解決するためのものです。ピクセルモードは、必要な数値が正確にわかっている場合(仕様で1200pxと指定されているため、1200と入力する)に使用します。 パーセントモードは、元のサイズが異なる画像のバッチ全体を縮小する際、すべての画像を同じ比率で均等に縮小したい場合に適しています ――50%に縮小すれば、元の画像の幅が2000pxであろうと6000pxであろうと、すべての画像が均一に半分のサイズになります。これに対し、ピクセルモードでは、一部の画像を歪ませたり、他の画像をそのままにしたりすることなく、サイズが異なる画像のバッチを一度の処理で均一に縮小することはできません。

    よくある質問

    サイズを変更すると画質は低下しますか?

    ダウンサンプリングは基本的に完璧と言えます。ターゲットサイズでは表示できないピクセルを削除しているだけだからです。100%を超えるアップサンプリングでは、ディテールを追加することはできず、画像がぼやけてしまいます。最小サイズ要件を満たす必要がある場合を除き、避けるようにしましょう。

    幅ではなく、正確な高さを設定するにはどうすればよいですか?

    目標の高さになる幅を次のように計算します:幅 = 高さ × (元の幅 ÷ 元の高さ)。このツールは設計上、アスペクト比を維持するようにできています。幅と高さを自由に伸縮させると写真が歪んでしまい、ユーザーがそれを望むことはほとんどありません。

    ウェブではどのサイズを使えばいいですか?

    全幅のヒーロー画像:1600~1920px。ブログ記事の画像:800~1200px。サムネイル:300~400px。アバター:256px。サイズがわからない場合は、レイアウト上で実際に表示される最大サイズに合わせてから、圧縮してください。

    サイズ変更と圧縮――どちらが必要?

    どちらもファイルサイズを縮小しますが、その仕組みは異なります。画像のサイズが必要以上に大きい場合は、まずリサイズを行ってください。これが最も効果的です。その後、圧縮処理によって残りのバイト数をさらに削減します。当社の「Image Compressor」は、状況に応じて、画質を維持しつつ最大幅を設定する処理を1ステップで実行できます。

    画像のサイズ変更中に、画像はアップロードされますか?

    いいえ。サイズ変更は、お使いの端末のブラウザのCanvas APIを介して実行されます。ページが読み込まれれば、このツールはオフラインでも動作します。

    関連ツール