オンラインで画像をリサイズする方法

電話の写真は通常、幅3000から4000ピクセルです。印刷には素晴らしいですが、Webサイト、メール添付、SNSのプロフィール写真には大きすぎます。リサイズは実際に必要な寸法に持ってきて、ページの読み込みを速くし、メールサイズ制限に収まり、プラットフォームが期待する正確なピクセル比に一致させます。いつリサイズすべきか、いつ代わりにクロップすべきか、どのアルゴリズムが最もクリーンな結果を生むかを理解することで、日常のタスクが小さな技能になります。

画像リサイズの簡単な歴史

ラスター画像のリサイズはデジタル画像と同じくらい古い問題です。最初に広く使われたアルゴリズム、最近傍法は、各宛先ピクセルに最も近いソースピクセルを単に選んでいました。高速ですがピクセル化していました。1970年代に追加された双線形補間は、より滑らかでわずかに柔らかい結果のために最も近い4ピクセルを平均化しました。双三次補間は1980年代に続き、よりシャープなエッジのために立方曲線で16ピクセルをサンプリングしました。Lanczosは信号処理の窓掛けsinc関数から派生し、1990年代にダウンスケールのゴールドスタンダードとなり、現在もImageMagickやほとんどの写真エディタで選ばれているアルゴリズムです。

最新の進化は学習超解像です。何百万もの画像ペアで訓練されたニューラルネットワークが、アップスケール時にもっともらしい詳細を幻覚できます。ESRGAN、Real-ESRGAN、Topaz Gigapixelは、アップスケールにおいて古典的アルゴリズムが匹敵できない結果を生みますが、サーバーサイド処理を必要とし、画像を小さくする一般的なケースには過剰です。日常のブラウザベースのリサイズには、古典的アルゴリズムが今でも正しいツールです。

必要となる一般的なサイズ

各プラットフォームは独自の好まれる寸法を公開しており、数年ごとに変わります。下の表は、日常の作業のほとんどに重要なサイズをカバーします。

有用なルール: 疑わしいときは、CSSピクセルでの表示サイズの2倍を目指します。960px幅で表示されるヒーロー画像は1920pxでエクスポートすべきで、標準モニターでページを膨らませることなく、Retinaスクリーンでシャープに保たれます。

オンラインで画像をリサイズする手順

1. 画像をアップロード: JPEG、PNG、WebP、GIFをリサイザーにドロップします。モダンなツールはHEICとAVIFも受け入れます。ファイルはマシン上に留まります。リサイズはブラウザで動作します。
2. 寸法を設定: プリセット(1920x1080、1080x1080)を選ぶか、幅と高さをピクセルでカスタム入力します。正確な数値を選ばずに比例してスケールしたい場合はパーセント(75%、50%)を使います。
3. アスペクト比を決める: ロックアイコンを切り替えます。ロックすると元の比率を保ち、ロック解除すると幅と高さを独立して設定できます(特定の形状にクロップする必要のあるバナーに有用)。
4. 出力形式を選ぶ: 小さなファイルサイズの写真にはJPEG、鋭いエッジのスクリーンショットとロゴにはPNG、可能な限り小さなファイルを出荷するときはWebP。リサイザーは通常、リサイズしながら形式間を変換できます。
5. リサイズしてダウンロード: リサイズボタンをクリックしてローカルで処理します。結果をダウンロードして検査します。寸法や品質がずれていたら、調整して再試行します。原本には決して触れません。

アスペクト比の理解

アスペクト比は幅と高さの関係です。1920x1080の画像は16:9比(時に1.78:1とも表記)を持ちます。1080x1080の画像は1:1で完全な正方形です。1080x1920の画像は9:16で、ストーリーとTikTok向けの縦型です。

アスペクト比をロックすると、1つの寸法を変えると自動的にもう一方が調整されます。これは歪みを防ぎます。人の顔がつぶれて見えなくなり、円は円のまま、テキストは読みやすいままです。

ロック解除すると、任意の幅と高さを独立して設定できます。これは、元の比率と一致しない正確な寸法(1500x500でなければならないバナー)が必要なときに有用ですが、画像が引き伸ばされたり圧縮されたりすることを受け入れる必要があります。より良い経路は通常、まずターゲット比にクロップし、その後クロップされた画像を正確なピクセル寸法にリサイズすることです。

リサイズ対クロップ対圧縮

これら3つの操作はよく混同され、異なる目的に役立ちます。

正しい寸法で可能な限り小さなファイルを得るには、まずクロップ、次にリサイズ、次に圧縮、必要に応じて変換します。各ステップはクライアントサイドで実行でき、原本はマシンを離れる必要がありません。

リサンプリングアルゴリズム

リサイザーが使うアルゴリズムは、結果がどれだけシャープまたは滑らかに見えるかを決定します。ほとんどのブラウザツールはあなたのために1つを選びますが、トレードオフを理解することで、作業に合うツールを選びやすくなります。

Lanczosはダウンスケールに最も安全なデフォルトです。アップスケールには双三次が妥当です。予算があり、サーバーサイド処理を受け入れられるなら、ニューラル超解像が劇的に優れています。

よくある落とし穴

• ソースを超えてアップスケール: 400px画像を4000px画像にしても、そもそも存在しなかった詳細を復元できません。結果は柔らかく見えるか、AIツールでは写真家が決して捉えなかった方法で疑わしく詳細に見えます。
• Retinaスクリーンを忘れる: 600pxスロットに表示される600px画像は、電話やモダンなラップトップで柔らかく見えます。CSS表示サイズの2倍または3倍でエクスポートしてください。
• アスペクト比を無視する: 4000x3000を1080x1080にクロップせずにリサイズすると写真をつぶします。まず正方形にクロップするか、長い端でピクセルを失うことを受け入れてください。
• 間違った出力形式: テキストのスクリーンショットをJPEGとして保存すると、文字の周りに目に見える圧縮不具合が生じます。鋭いエッジにはPNGまたはWebPを、JPEGは写真用に予約してください。
• アップロード時にEXIFを取り除く: 一部のリサイザーはオリエンテーションメタデータを削除するため、縦向きの電話写真が横向きに着地します。バッチ処理する前に、既知の縦向きショットで一度テストしてください。
• 異なるツールで2回リサイズ: 繰り返しのリサンプリングは、各パスで小さな柔らかさを重ねます。可能な限り原本から一度だけリサイズしてください。
• カラープロファイルを無視: Adobe RGB画像を変換せずにsRGBに落とすと、色が著しくシフトする可能性があります。ほとんどのブラウザツールはsRGBを仮定します。ソースが広いガモットの場合、まず写真エディタで変換してください。
• 品質100で保存: JPEG品質90から92は、ファイルサイズの半分で100と視覚的に同一に見えます。100からの追加バイトは知覚可能なものを買いません。
• アルファチャンネルを忘れる: JPEGは透明度をサポートしません。透明なPNGをJPEGにリサイズすると、背景が白(またはツールに応じて黒)で塗りつぶされます。
• 出力に入力と同じ名前を付ける: 原本を上書きすると、リサイズが間違った場合に復元できません。結果を確認するまで、つねに新しいファイル名で保存してください。

代替ツールとライブラリ

Webリサイザーは、一度に1つの画像に対する最速の経路です。バッチ、スクリプティング、またはプロの写真作業には、コマンドラインとデスクトップツールが引き継ぎます。

単一の画像には、ブラウザツールがデスクトップエディタを起動するよりほぼ常に速いです。200枚の製品写真には、SharpやImageMagickスクリプトが数秒で終わり、一貫した結果を出します。

プライバシーとリサイザー

画像リサイザーは完全にブラウザ内で動作します。選択したファイルはFileReader APIで読まれ、オフスクリーンキャンバスに描画され、ブラウザのネイティブイメージングパイプラインでリサイズされ、canvas.toBlobでエクスポートされます。アップロードされず、ログされず、共有されません。機密素材(ID写真、社内ダッシュボードのスクリーンショット、医療画像)には、そのローカル専用フローが、見知らぬサーバーを信頼することと誰も信頼しないことの違いです。普通の写真でさえ、第三者に見られたくないかもしれないEXIFメタデータ(GPS座標、デバイスシリアル番号、写真家名)を含むことがよくあります。アップロードせずにリサイズするブラウザツールは、そのメタデータをあなたのコントロール下に残します。リサイズのような日常的なタスクには、デフォルトは何もページを離れない、であるべきです。