Clik here to view.
今日は、ソフトやWebサイトの画面キャプチャをする際に、「ClearTypeをオンにした状態で画面キャプチャを撮ると、無駄に色数が増えて、画像ファイルのサイズも大きくなるのではないか」という仮説と、テスト結果を紹介します。
結論から言うと、こんな感じでした。
ClearTypeなどのサブピクセルレンダリングを有効にした状態で画面キャプチャを撮ると、色数が増えて画像のファイルサイズが大きくなる。
しかし、適切に減色すればその差はなくなる。
ただし、サブピクセルレンダリングの色に引きずられて他の部分の減色処理に影響がある可能性がある。
ClearTypeは液晶ディスプレイ向けのアンチエイリアス処理
そもそも、このテストを解説する前に、「ClearType」（Windowsでの名称）などの、「サブピクセルレンダリング」が何なのか、軽く解説しておきましょう。
画面キャプチャを撮る人は、画像を拡大して見ると黒文字のはずが文字の周辺に赤や青の色が付いているのに気づいた人がいるでしょう。これがサブピクセルレンダリングです。
Clik here to view.
ただし、画像や、ClearTypeが有効にならないサイズのフォント（上図の下の文字）は、サブピクセルレンダリングの影響を受けません。
画面に表示する文字は適度に周辺をぼやかして読みやすくされていますが、液晶ディスプレイでは1ピクセルが赤と緑と青の3つのサブピクセルで構成されているということを利用して、サブピクセルごとに点灯を制御することで、より細かいアンチエイリアスを実現しているのがClearTypeだということです。
Clik here to view.
Windowsでは、コントロールパネルで「ClearType」と検索すれば設定を変えられます。Macでは、システム環境設定の［一般］に「使用可能な場合は LCD で滑らかな文字を使用」という項目があるようです。
で、液晶表示ではサブピクセルでも、画面キャプチャに撮るとサブピクセルではなく1ピクセルになります。そのため、次のように考えたのです。
仮説ClearTypeをオンにした状態で画面キャプチャを撮ると、無駄に色数が増えて、画像ファイルのサイズも大きくなるのではないか。
テスト結果：やはりClearTypeだと色数が増える
検証のために、Webページの文字の部分を、ClearTypeオン（サブピクセルレンダリング）とオフ（通常のアンチエイリアス）の状態でそれぞれ画面キャプチャを撮ってファイルサイズを比べるテストをしてみました。
大きな文字ではあまりわかりませんが、小さな文字（上の「連載」のところ）は、サブピクセルレンダリングありのほうが見やすいですね。また、サブピクセルレンダリングと通常のアンチエイリアスでは文字の幅に影響が出るようで、折り返しが変わってしまっています。
ClearTypeなし（通常のアンチエイリアス）の場合
ファイルサイズ：5,057 バイト
使われている色数：20色Image may be NSFW.
Clik here to view.
ClearTypeあり（サブピクセルレンダリング）の場合
ファイルサイズ：9,602バイト
使われている色数：978色（24bit PNGで保存）Image may be NSFW.
Clik here to view.
やはり、ClearyTypeをオンにしていると、1色の文字でも色数がグッと増えてファイルサイズが大きくなりますね。
では、これをClearTypeなしの場合と同じ20色に減色するとどうなるでしょうか。
ClearTypeあり（サブピクセルレンダリング）の場合（減色）
ファイルサイズ：5,707 バイト
使われている色数：20色Image may be NSFW.
Clik here to view.![]()
ファイルサイズはかなり近づきましたね。
テスト結果：画像を縮小すると、さらに違いが大きくなる
次に、この画像を縮小するとどうなるでしょうか。中途半端になるように、オリジナルサイズの71%に縮小してみました。
ClearTypeなし（通常のアンチエイリアス）の場合（71%サイズ）
ファイルサイズ：13,512 バイト
使われている色数：252色Image may be NSFW.
Clik here to view.![]()
ClearTypeあり（サブピクセルレンダリング）の場合（71%サイズ）
ファイルサイズ：31,732 バイト
使われている色数：7039色（24bit PNGで保存）Image may be NSFW.
Clik here to view.![]()
やはりClearTypeオンの場合は色数が増え、ファイルサイズも大きくなります。その差異は、原寸の場合よりも大きくなっています。
この縮小画像を元の20色に減色するとどうでしょうか。
ClearTypeなし（通常のアンチエイリアス）の場合（71%サイズ、減色）
ファイルサイズ：8,133 バイト
使われている色数：20色Image may be NSFW.
Clik here to view.![]()
ClearTypeあり（サブピクセルレンダリング）の場合（71%サイズ、減色）
ファイルサイズ：7,882 バイト
使われている色数：20色Image may be NSFW.
Clik here to view.![]()
ファイルサイズ的には、どちらも同じぐらいになっています。このテストではClearTypeありのほうがファイルサイズが減りましたが、このあたりは元画像の状態によって変わることでしょう。
ということで結論としては、サブピクセルレンダリングをオンにしているシステムで画面キャプチャを撮った場合は、そのままではファイルサイズが大きくなってしまうが、ちゃんと減色処理をすれば大きな違いはないということですね。
ただし、今回は文字だけの画像でテストしましたが、さまざまな色が含まれる画像とテキストが一緒になっている画像では、サブピクセルレンダリングの色が減色処理に影響する場合があるので、注意したほうがいいですね。
Clik here to view.
安田 英久（やすだ・ひでひさ）
株式会社インプレスビジネスメディア
Web担当者Forum 編集長
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。
- 内容カテゴリ：Web担当者／仕事
- コーナー：編集長ブログ―安田英久
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：画面キャプチャはClearTypeオフで撮るほうが軽いファイルになる？ を検証してみた [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.