画質を落とさない画像リサイズ：効果的なテクニック

画像のリサイズは簡単に思えますが、見た目の劣化なく行うにはリサンプリングアルゴリズム、アスペクト比、フォーマット固有の挙動を理解する必要があります。Webサイト、SNS、印刷物のいずれに画像を準備する場合でも、選択するテクニックが重要です。

画像リサイズの実態

重要な事実：ラスター画像を拡大すると画質は必ず劣化します。500×500ピクセルの画像を1000×1000に拡大する場合、ソフトウェアは存在しなかったピクセルを生成しなければなりません。最良のアルゴリズムでも見た目を許容範囲にするだけで、撮影されなかった情報を復元することはできません。

一方、縮小は優れた結果を得られます。ピクセルを破棄するのであって、生成するわけではないからです。重要なのは適切なリサンプリングアルゴリズムを選ぶことです。

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

画像をリサイズする際、ソフトウェアは元のピクセルを新しい寸法にどう対応させるかを決定します。これがリサンプリングです。

Nearest Neighbor（最近傍法）

最もシンプルなアルゴリズム — 新しいピクセルは最も近い元のピクセルの色を採用します。

• 結果: ピクセル化された粗い見た目
• 速度: 最速
• 用途: ピクセルアート、レトログラフィックス、UIのスクリーンショット（鮮明なエッジが重要な場合）
• 避けるべき用途: 写真、滑らかなグラデーション

Bilinear Interpolation（双一次補間）

新しいピクセルごとに最も近い4つのピクセルの平均を計算します。

• 結果: 滑らかだがやや不鮮明
• 速度: 高速
• 用途: クイックプレビュー、リアルタイムリサイズ

Bicubic Interpolation（双三次補間）

16個の周囲ピクセル（4×4グリッド）を考慮し、より滑らかな結果を得ます。

• 結果: シャープさと滑らかさの良いバランス
• 速度: 中程度
• 用途: 汎用リサイズ（Photoshopのデフォルト）

Lanczos Resampling（ランチョス・リサンプリング）

sinc関数を使用して多くの周囲ピクセルを考慮します。縮小のゴールドスタンダードです。

• 結果: 最もシャープで詳細な縮小
• 速度: 最も遅い
• 用途: 最終製品の画像、写真

最適なアルゴリズムで画像をリサイズするには、画像リサイザーをご利用ください。

アスペクト比の維持

異なるアスペクト比に画像を引き伸ばすと歪みが生じます。3つの戦略があります：

1. 比率を維持してスケーリング

元の比率を維持します。ターゲットが1200×800で画像が4000×3000（4:3）の場合、1067×800にスケーリングします（4:3を維持）。

2. クロップして合わせる

ターゲット寸法を覆うようにスケーリングし、余分をクロップします。ターゲットエリア全体を埋めますが、端のコンテンツが失われます。

3. レターボックス / ピラーボックス

ターゲット内に収まるようにスケーリングし、残りのスペースにパディング（バー）を追加します。すべてのコンテンツを維持しますが、余白が生じます。

/* CSS object-fit でこの動作を制御 */
.cover { object-fit: cover; }    /* クロップして合わせる */
.contain { object-fit: contain; } /* 内側に収める */
.fill { object-fit: fill; }       /* 引き伸ばし（歪み） */

バッチリサイズ

コマンドライン（ImageMagick）

# すべてのJPGを最大幅1200pxにリサイズ（アスペクト比維持）
mogrify -resize 1200x -quality 85 *.jpg

# 正確な寸法にクロップ付きでリサイズ
convert input.jpg -resize 800x600^ -gravity center -extent 800x600 output.jpg

# ディレクトリをバッチ変換
for f in *.png; do
  convert "$f" -resize 50% "resized/${f}"
done

Sharp（Node.js）

const sharp = require('sharp');

await sharp('input.jpg')
  .resize(1200, 800, {
    fit: 'inside',           // アスペクト比を維持
    withoutEnlargement: true // 拡大しない
  })
  .jpeg({ quality: 85 })
  .toFile('output.jpg');

フォーマット別の注意点

JPEG

• 保存のたびに画質が劣化（非可逆圧縮）
• リサイズと保存は一度で — 編集・保存の繰り返しを避ける
• Web用はquality 85、アーカイブ用は95を使用

PNG

• ロスレス — 保存による画質劣化なし
• 写真ではファイルサイズが大きくなる可能性
• グラフィックス、スクリーンショット、透明度のある画像に使用

WebP

• 非可逆・ロスレス両モードに対応
• 同等画質でJPEGより優れた圧縮
• リサイズ後のWeb配信に最適

SVG

• ベクターフォーマット — 画質劣化なしに無限にリサイズ可能
• ラスタライズしたものを「元に戻す」ことは不可能
• アイコン、ロゴ、イラストに使用

リサイズ後の画像最適化については、画像最適化ガイドをご覧ください。

よくある間違い

1. 拡大してから縮小: 常にオリジナルからリサイズし、以前にリサイズしたコピーからは行わない
2. DPIの無視: 300 DPIの4×6インチ画像は1200×1800ピクセルです。72 DPIのWeb用途では、必要なピクセル寸法にリサイズ
3. スクリーンショットにJPEGを使用: テキストとUI要素はPNGの方が見栄えが良い（シャープなエッジ、圧縮アーティファクトなし）
4. Retinaディスプレイの考慮不足: Retina/HiDPIスクリーン用に2倍解像度の画像を提供（srcset属性）

FAQ

AI拡大で本当に画質を改善できますか？

最新のAI拡大技術（Real-ESRGAN、Topaz Gigapixel）は、特に顔や自然風景で印象的な結果を生み出せます。訓練データに基づいて高解像度の詳細がどのように見えるかを予測する仕組みです。結果は完璧ではなく、元の画像になかったもっともらしい詳細を追加しています。重要な用途では、これらのツールは慎重に使用すべきです。

SNS画像にはどの寸法を使うべきですか？

プラットフォーム別の推奨事項：Instagram投稿（1080×1080）、Instagramストーリー（1080×1920）、Twitter/X投稿（1200×675）、Facebook投稿（1200×630）、LinkedIn投稿（1200×627）。プラットフォームのガイドラインは頻繁に変更されるため、常に最新情報を確認してください。

関連リソース

• 画像リサイザー — 画質を維持してオンラインで画像をリサイズ
• Web向け画像最適化 — 完全な最適化ガイド
• 画像フォーマットガイド — 最適なフォーマットを選ぶ