サムネイル
[Wikipedia|▼Menu]
.mw-parser-output .hatnote{margin:0.5em 0;padding:3px 2em;background-color:transparent;border-bottom:1px solid #a2a9b1;font-size:90%}

*編集者用:記事への画像掲載方法のひとつについては「Help:画像の表示#thumb」を参照。

閲覧者用:ページの検索窓については「Help:検索」を参照。

記事閲覧のプレビューについては「mw:Extension:Popups/ja」を参照。

この項目では、画像の縮小見本について説明しています。AKB48のアルバムについては「サムネイル (アルバム)」をご覧ください。
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この記事は検証可能参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。(このテンプレートの使い方
出典検索?: "サムネイル" ? ニュース ・ 書籍 ・ スカラー ・ CiNii ・ J-STAGE ・ NDL ・ dlib.jp ・ ジャパンサーチ ・ TWL(2012年8月)
MediaWikiの機能でサムネイル化された画像の例。クリックなどによって元画像を見ることが可能

サムネイル(: thumbnail、サムネールとも表記される)とは、主に画像動画や文書などを表示する際に、一見でその内容を大まかに把握したり、複数を一覧表示する際に視覚的に素早く区別したりすることができるよう、縮小させた見本となる画像のこと。親指(thumb)の(nail)のように小さく簡潔であるという意味から来ている。ただしサムネイル画像の視認性はサイズや縮小品質に依存する。

視認範囲の限られるカタログやコンピュータ端末の画面表示上、もしくはネットワーク上のデジタル情報の伝達においてデータ通信量の削減などのために用いられることが多い。

印刷業界の用語では、広告・書籍・雑誌などの原稿制作の初期段階において、その発想(アイディア)をスケッチしたもの。小さなスペースに、見出し・本文・ネームの行数、写真や図の位置などが書き込まれ、制作内容を説明したり、スケジュールを立てたりする際に用いられる[1]。仕上がりサイズに関係なく小さな紙に思い浮かんだアイデア、イメージから何種類かのスケッチを作成することから、サムネイル(親指の爪)といわれる[2]
利点

画像や文書などの内容を確認する際、本来は元の原画像や原文書を開いて確認する。動画の場合は再生によって確認する。デジタルデータの場合、JPEGMP4PDFあるいはMS Office形式文書といった元のデータを、そのまま画像ビューアメディアプレーヤー、文書閲覧・編集用のアプリケーションソフトウェアなどで開いて確認する。しかし画像やコマ・ページの数が多すぎる、もしくは大きすぎる場合、画面や掲載書物の掲載範囲を超える場合がある。また、すべてを逐一確認していては、簡単な内容の把握ですら時間がかかりすぎてしまう。

その場合にサムネイルとして縮小化されたものを代替として掲載あるいは表示することにより、簡単な内容確認程度の用途において目視による識別効率の向上を図ることができる。文書の場合は表紙あるいは最初の1ページなどをサムネイル化する。動画の場合は最初の1コマや特定の重要な1コマをサムネイル化するか、あるいはタイトルや重要なシーンなどを合成したサムネイル画像を別途用意する。

Adobe PhotoshopのPSDなど、ファイル形式によってはサムネイル用の画像データを最初から内包しており、ファイル全体を読み込まずとも一部だけ読み込むことでサムネイルを取得できるようになっているものもある[3]

また、インターネットにおいては画像のサイズが大きい場合に受信に時間がかかるため、画像サイズを小さくすることによって通信時間の短縮・通信帯域の節約が期待できる。これは画像を一切表示せずファイル名などのテキストにハイパーリンクを設定する場合よりも、目視による識別効率が高い。例えばウェブブラウザでウェブページを読み込んだ時点では低解像度のサムネイル画像を表示しておくが、ユーザーがサムネイルをクリックして高解像度(大きなサイズ)での閲覧を所望したタイミングで、初めて実際の原画像のダウンロードを実行する。こうすることで、ページ読み込みと同時にすべての原画像をダウンロードする必要がなくなるので、最初のページ読み込みと表示が圧倒的に高速になる。
作成方法

サムネイルの作成においては主に2つの方法がある。
原画像の縮小表示
この方法では縮小画像をわざわざ用意しなくて良い代わりに通信時間の短縮は無い。したがってサムネイルを表示するまでには時間がかかるが、逆に、オリジナルサイズの画像を表示するときに新しくファイルをダウンロードせずにすむ。ただし表示システムによっては細部がつぶれて視認性を著しく下げることがある。これは、サムネイルは瞬時に表示させないと操作性が低下するため、最近傍補間などの高速で低品位な縮小アルゴリズムを使っているからである。
原画像を縮小加工
縮小した画像をあらかじめ用意した場合、作成に多少の手間がかかるものの、通信時間を短縮できる。したがってサムネイルが表示されるまでの時間は短いが、オリジナルサイズの画像を表示するまでの総ダウンロード量は(サムネイル+オリジナルとなるため)かえって増えることになる。一方、時間をかけて高度なアルゴリズムで縮小画像を作ることができ、視認性の悪化を低減させることができる。

前述のようにサムネイルを最初から内包しているファイル形式もある。一度サムネイルを表示したファイルについては、ローカルストレージのどこかに縮小画像をキャッシュとして保存しておき、そのキャッシュと元のファイルのパスおよびタイムスタンプを関連付けるテーブルも用意しておくことによって、次回以降は(元のファイルが変更されるまで)キャッシュを再利用する仕様になっているシステムもある。
作成のコツ

この節には独自研究が含まれているおそれがあります。問題箇所を検証出典を追加して、記事の改善にご協力ください。議論はノートを参照してください。(2024年5月)


適切な縮小アルゴリズムを選ばなければならない。通常の拡大縮小で性能がいいアルゴリズムでも、サムネイル作成のような大比率の縮小では性能を発揮しないこともある。

自分で縮小処理を実装する場合は、補間よりは低域通過フィルタ (LPF) にリソースを割くべきである。最も適切なのはランチョスフィルタ(英語版)とされるが、高度なLPFが使えなくても、縮小率に応じ周囲のピクセルを平均化するだけで品質はかなり向上する。LPFが適切であれば、補間による差はほとんどない。

PNGの場合はインデックスカラーにして色数を減らすことでファイルサイズを削減できる。JPEGの場合はQ値を下げることで同じ画像サイズでもファイルサイズを削減できる。ただし限度を超えると品質は大きく低下する。

画像編集ソフトによっては大量の余分なメタデータ(画像データ以外のデータ)をファイルに含める。余分なメタデータをつけないツールで再保存したり、専用のツールで除去したりできる。そう大きな比率ではないので1つ1つ除去するほどのものではないが、大量のサムネイルを扱う場合は一括して除去するのは有効だろう。

周囲の重要でない箇所をカットするトリミングは、視認性を下げずに画像サイズを小さくできる有効な方法である。しかし、サムネイルをトリミングすべきかどうかは意見が分かれる。ユーザーはサムネイルをクリックすると同じ構図の画像が表示されることを期待するからである。

縮小しすぎないように気をつけなければならない。サムネイル作成者はサムネイルに何が描いてあるか知っているが、知らない者が見ても何が描いてあるかわからなければならない。

サムネイル表示機能のあるソフトウェア

この節の加筆が望まれています。

Microsoft Windows 95以降のWindows Explorer[注釈 1]や、macOSFinderなど、GUIを採用しているオペレーティングシステムの標準ファイルマネージャーでは、よく使われる一般的な形式の画像や文書のサムネイルを表示する機能を標準的に備えている。さらに、フォルダー(ディレクトリ)内に含まれるファイルのサムネイルを通常のフォルダーアイコンの中に合成表示する機能が実装されていることもある。

Microsoft Windows Vista以降では、Windows Aeroの機能のひとつとして「ライブタスクバー」が追加された。アプリのタスクバーボタンにマウスオーバーすると、そのアプリウィンドウの内容が小さなサムネイル画像としてポップアップ表示される。また、サムネイル画像にマウスオーバーすると、そのウィンドウをアクティブにすることなくプレビューすることができる。この機能は設定で無効化することもできる[5]


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:25 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef