画像サムネイル

画像サムネイルとは？

画像サムネイルは、元画像を縮小したバージョンで、通常はフル解像度ファイルを読み込まずに内容を一目でプレビューするために使われます。サムネイルはファイルエクスプローラー、フォトギャラリー、動画プレビュー、EC 商品一覧、検索結果、SNS フィード、コンテンツ管理システムに表示されます。最長辺を 64、128、256、512 ピクセルに縮小し元の縦横比を維持することで、サムネイルは元画像の視覚的本質を保ちつつ、ファイルサイズは通常 1%〜10% になります。

サムネイルはウェブのパフォーマンスと UX に不可欠です。典型的な商品ページやギャラリーは数十枚の画像を一度に表示します。それぞれをフル解像度で読み込むと、ページは非常に遅くなり、大量の帯域を消費します。実際の表示サイズでサムネイルを生成することで、ページ重量を減らし、読み込み時間を短縮し、CDN とホスティングコストを下げ、Core Web Vitals スコアを向上できます。このサムネイルジェネレーターは Canvas API を使いすべてブラウザ内でリサイズします——アップロード不要、登録不要、リサイズ以外の品質低下もありません。

縦横比維持の縮小について

このツールは縦横比を維持してリサイズするため、画像が伸縮・歪むことはありません。画像の幅または高さの長い方が選択したターゲットサイズになり、もう一方は元の比率を維持するよう計算されます。例えば 1920×1080 の横長写真を 256 px サムネイルにすると 256×144 に、1080×1920 の縦長写真を 256 px にすると 144×256 になります。下表は一般的なソース比率が標準的なサムネイルサイズにどう対応するかを示します。

ソース比率	例	256 px サムネイル
16:9 横長	1920×1080	256×144
4:3 横長	1600×1200	256×192
1:1 正方形	1080×1080	256×256
3:4 縦長	1200×1600	192×256
9:16 縦長	1080×1920	144×256

縦横比維持の縮小は元画像の構図を保つため、ほぼすべてのサムネイル用途に適しています。ソース比率に関わらず厳密なピクセル寸法が必要な場合（画像が伸びます）、専用の画像リサイズツールを使用してください。

どのサムネイルサイズを選ぶべきか？

適切なサムネイルサイズは表示場所とユーザーが必要とする詳細度によって異なります。小さなサムネイルはグリッドやコンタクトシートに、中サイズはカードや一覧に、大きなサムネイルはヒーロープレビューや商品詳細に適しています。表示寸法で許容できる最小のサイズを使うことで、ファイル重量を最小化しパフォーマンスを最大化できます。

• 64 px — ファイルエクスプローラーアイコン、コンタクトシート、高密度グリッド。画像の輪郭だけが必要な場合に最適。
• 128 px — 検索結果、SNS アイコン、コメントサムネイル。サイズと詳細のバランスが良い。
• 256 px — 商品カード、ギャラリーサムネイル、ブログのアイキャッチ画像。多くのウェブサムネイルのデフォルト。
• 512 px — 大きなプレビュー、Open Graph 画像、SNS シェアプレビュー、Retina 対応カード。
• カスタム — 特定のグリッドセル用に 300×300 など、正確な表示サイズを指定したい場合に使用。

サムネイル生成が必要な場面

サムネイル生成は、画像を多用するウェブサイトやアプリで最も効果的な最適化の一つです。一般的なシナリオは以下の通りです：

• EC ストア。 カテゴリページを高速読み込みするために小さな商品カードサムネイルを生成し、商品詳細ページでのみ高解像度画像を読み込む。
• フォトギャラリー・ポートフォリオ。 フル解像度のオリジナルにリンクするサムネイルグリッドを表示し、初期ページ重量を大幅に削減。
• コンテンツ管理システム。 アップロードされたメディアのサムネイルを事前生成し、CMS が各コンテキストに適したサイズを提供できるようにする。
• ブログ・ニュースサイト。 記事一覧ページや RSS フィードの読み込みを高速化するためにアイキャッチ画像サムネイルを作成。
• 検索・ディレクトリサイト。 各結果の横に小さなプレビューサムネイルを表示し、素早い視覚スキャンを可能にする。
• モバイルアプリ。 サムネイルを提供してモバイルネットワークのデータ使用量を削減し、スクロール性能を向上。

サムネイルの生成方法

このツールでサムネイルを生成するのは数秒で、すべてブラウザ内で完結します。アップロード不要、登録不要、インストール不要です。以下の手順で進めてください：

1. 画像をアップロード。 PNG、JPG、WebP、GIF、BMP ファイルをドラッグ＆ドロップ、またはクリックして選択。
2. サムネイルサイズを選択。 64、128、256、512 ピクセルから選ぶか、「カスタム」で特定のピクセル値を入力。
3. 出力形式を選択。 PNG は透過を保持、JPG は写真に最適、WebP は最小ファイル。
4. 生成。 「サムネイルを生成」をクリック。ツールが Canvas API で縦横比を維持してリサイズし、元とサムネイルのファイルサイズを表示。
5. ダウンロード。 「サムネイルをダウンロード」をクリック。元のファイル名に _thumb サフィックスが付いた名前で保存されます。

すべてのステップが JavaScript と Canvas API でローカルに実行されるため、ソース画像がブラウザから外に出ることはありません。ツールは完全にプライベートで高速、機密性の高い未公開画像にも適しています。