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

MediaWikiの機能でサムネイル化された画像の例。クリックなどによって元画像を見ることが可能

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

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

利点

編集

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

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

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

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

動画を含まない音声のみのオーディオファイル形式であっても、ファイル中に静止画像データをアルバムアートとして埋め込むことができる仕様になっているものもある。ファイルマネージャーやメディアプレーヤーで一覧表示するときにアーティストやアルバムジャケットのサムネイル画像が表示されることで、再生することなく内容をある程度把握することができ、目当ての曲を探しやすくなる。例えばMP3形式はID3タグ (ID3v2) にて画像埋め込みをサポートしている。

作成方法

編集

サムネイルの作成においては主に2つの方法がある。

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

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

作成のコツ

編集
  • 適切な縮小アルゴリズムを選ばなければならない。通常の拡大縮小で性能がいいアルゴリズムでも、サムネイル作成のような大比率の縮小では性能を発揮しないこともある。
  • 自分で縮小処理を実装する場合は、補間よりは低域通過フィルタ (LPF) にリソースを割くべきである。最も適切なのはランチョスフィルタ英語版とされるが、高度なLPFが使えなくても、縮小率に応じ周囲のピクセルを平均化するだけで品質はかなり向上する。LPFが適切であれば、補間による差はほとんどない。
  • PNGの場合はインデックスカラーにして色数を減らすことでファイルサイズを削減できる。JPEGの場合はQ値を下げることで同じ画像サイズでもファイルサイズを削減できる。ただし限度を超えると品質は大きく低下する。
  • 画像編集ソフトによっては大量の余分なメタデータ(画像データ以外のデータ)をファイルに含める。余分なメタデータをつけないツールで再保存したり、専用のツールで除去したりできる。そう大きな比率ではないので1つ1つ除去するほどのものではないが、大量のサムネイルを扱う場合は一括して除去するのは有効だろう。
  • 周囲の重要でない箇所をカットするトリミングは、視認性を下げずに画像サイズを小さくできる有効な方法である。しかし、サムネイルをトリミングすべきかどうかは意見が分かれる。ユーザーはサムネイルをクリックすると同じ構図の画像が表示されることを期待するからである。
  • 縮小しすぎないように気をつけなければならない。サムネイル作成者はサムネイルに何が描いてあるか知っているが、知らない者が見ても何が描いてあるかわからなければならない。

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

編集

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

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

オンラインストレージサービスのGoogle DriveOneDriveなどにもサムネイル表示機能が実装されている。

画像の閲覧や編集、印刷物製作用のアプリケーションソフトウェアにおいては、一覧性や識別性を高めるためにサムネイルの表示や印刷をサポートしているものが多い。

代表例:

拡張

編集

ファイルマネージャーでは、よく知られた一般的な形式以外の独自形式ファイルに対してもサムネイル画像やプレビュー表示ができるように、サードパーティ開発者がプラグインを作成して組み込むことができるようになっているものもある。Windowsの場合、従来のIExtractImage/IExtractImage2またはWindows Vista以降のIThumbnailProviderインターフェイスを実装するカスタムのCOMコンポーネントを作成し、シェル拡張のCOMサーバーとしてレジストリに登録する[8]。例えばWindowsにAdobe Acrobat/Adobe Readerをインストールすると、PDF用のシェル拡張コンポーネントがインストールされ、エクスプローラー上でPDFファイルのサムネイルプレビューを表示することができるようになる[9]。macOS/iOSではQuick Look (QuickLook) フレームワークが用意されている[10][11]

Androidの標準ファイル管理アプリ (com.android.documentsui.files) では、ファイルのサムネイルをサードパーティ開発者が自由にカスタマイズすることはできない。JPEGやPNGなどの標準的にサポートされている形式のファイルのみサムネイル表示される。ただし、サードパーティ開発者が独自のファイル管理アプリまたはオンラインストレージアプリを作成してストアで公開したり、エンドユーザーがストアからダウンロードしてインストールしたりすることはでき、カスタムのDocumentsProviderサブクラスを実装する際、任意の形式のファイルに対して独自のサムネイル画像を生成する処理を実行させることはできる[12]

Google Driveでは、独自形式ファイルのサムネイル画像をアップロードできる機能がサードパーティ開発者向けのSDKによって提供されている[13][14]

OneDriveSharePointには、アイテムのサムネイルを取得したりカスタムのサムネイルをアップロードしたりすることができるREST APIが用意されている[15]

APIライブラリによっては、サポートされている形式の画像・動画・音声ファイルに対してサムネイル画像を生成する補助機能を備えたものもある[16][17][18][19][20][21][22][23][24]。このような機能を活用することで、自前でファイル読み込みや縮小処理のコードを書くことなく、画像・動画・音声ファイルやメモリ上の画像オブジェクトから直接サムネイル画像を抽出したり、サンプリング生成したりすることができ、任意のアプリケーション上でのサムネイル表示機能の実装に利用できる。

脚注

編集

注釈

編集
  1. ^ Windows 95の場合、Internet Explorerのバージョン4以降がインストールされている必要がある[4]

出典

編集
  1. ^ サムネール - 印刷用語集
  2. ^ サムネール(サムネイル) 【印刷用語集】|バンフーオンラインショップ
  3. ^ Adobe Photoshop File Formats Specification
  4. ^ FMV Q&A - [Windows 98 / Windows 95]フォルダの画像を縮小版として、一覧表示する方法を教えてください。 - FMVサポート : 富士通パソコン
  5. ^ FMV Q&A - [Windows Vista] タスクバー上のボタンをポイントしたときにウィンドウをサムネイル表示する機能(ライブタスクバー)を無効にする方法を教えてください。 - FMVサポート : 富士通パソコン
  6. ^ DWM Thumbnail Overview - Win32 apps | Microsoft Learn
  7. ^ サムネールと用紙サイズより大きいドキュメントのプリント
  8. ^ Building Thumbnail Handlers - Win32 apps | Microsoft Learn
  9. ^ Windows Explorer で PDF のサムネールプレビューを有効にする
  10. ^ QuickLook | Apple Developer Documentation
  11. ^ Providing Thumbnails of Your Custom File Types | Apple Developer Documentation
  12. ^ カスタム ドキュメント プロバイダを作成する  |  Android Developers
  13. ^ G Suite Developers Blog: Thumbnails for your Custom File Types
  14. ^ ファイル メタデータの管理  |  Google Drive  |  Google for Developers
  15. ^ Retrieve thumbnails for a file or folder - OneDrive API - OneDrive dev center | Microsoft Learn
  16. ^ Creating Thumbnail Images - Win32 apps | Microsoft Learn
  17. ^ Image::GetThumbnailImage (gdiplusheaders.h) - Win32 apps | Microsoft Learn
  18. ^ 方法: サムネイル イメージを作成する - Windows Forms .NET Framework | Microsoft Learn
  19. ^ How to: Load an Image as a Thumbnail - WPF .NET Framework | Microsoft Learn
  20. ^ UWP アプリでのサムネイル画像のガイドライン - UWP applications | Microsoft Learn
  21. ^ StorageFile.GetThumbnailAsync Method (Windows.Storage) - Windows UWP applications | Microsoft Learn
  22. ^ ThumbnailUtils  |  Android Developers
  23. ^ MediaStore.Images.Thumbnails  |  Android Developers (Android 10以降は非推奨)
  24. ^ MediaStore.Video.Thumbnails  |  Android Developers (Android 10以降は非推奨)

関連項目

編集