初代編集長ブログ―安田英久

画面キャプチャはClearTypeオフで撮るほうが軽いファイルになる? を検証してみた

結論は、「ClearType」などのサブピクセルレンダリングをオフにするか、ちゃんと減色すること
よろしければこちらもご覧ください
Web担のなかの人

今日は、ソフトやWebサイトの画面キャプチャをする際に、「ClearTypeをオンにした状態で画面キャプチャを撮ると、無駄に色数が増えて、画像ファイルのサイズも大きくなるのではないか」という仮説と、テスト結果を紹介します。

結論から言うと、こんな感じでした。

  • ClearTypeなどのサブピクセルレンダリングを有効にした状態で画面キャプチャを撮ると、色数が増えて画像のファイルサイズが大きくなる。

  • しかし、適切に減色すればその差はなくなる。

  • ただし、サブピクセルレンダリングの色に引きずられて他の部分の減色処理に影響がある可能性がある。

ClearTypeは液晶ディスプレイ向けのアンチエイリアス処理

そもそも、このテストを解説する前に、「ClearType」(Windowsでの名称)などの、「サブピクセルレンダリング」が何なのか、軽く解説しておきましょう。

画面キャプチャを撮る人は、画像を拡大して見ると黒文字のはずが文字の周辺に赤や青の色が付いているのに気づいた人がいるでしょう。これがサブピクセルレンダリングです。

サブピクセルレンダリングで黒以外の色が使われている文字表示

ただし、画像や、ClearTypeが有効にならないサイズのフォント(上図の下の文字)は、サブピクセルレンダリングの影響を受けません。

画面に表示する文字は適度に周辺をぼやかして読みやすくされていますが、液晶ディスプレイでは1ピクセルが赤と緑と青の3つのサブピクセルで構成されているということを利用して、サブピクセルごとに点灯を制御することで、より細かいアンチエイリアスを実現しているのがClearTypeだということです。

Windowsでは、コントロールパネルで「ClearType」と検索すれば設定を変えられます。Macでは、システム環境設定の[一般]に「使用可能な場合は LCD で滑らかな文字を使用」という項目があるようです。

で、液晶表示ではサブピクセルでも、画面キャプチャに撮るとサブピクセルではなく1ピクセルになります。そのため、次のように考えたのです。

仮説ClearTypeをオンにした状態で画面キャプチャを撮ると、無駄に色数が増えて、画像ファイルのサイズも大きくなるのではないか。

テスト結果:やはりClearTypeだと色数が増える

検証のために、Webページの文字の部分を、ClearTypeオン(サブピクセルレンダリング)とオフ(通常のアンチエイリアス)の状態でそれぞれ画面キャプチャを撮ってファイルサイズを比べるテストをしてみました。

大きな文字ではあまりわかりませんが、小さな文字(上の「連載」のところ)は、サブピクセルレンダリングありのほうが見やすいですね。また、サブピクセルレンダリングと通常のアンチエイリアスでは文字の幅に影響が出るようで、折り返しが変わってしまっています。

  • ClearTypeなし(通常のアンチエイリアス)の場合

    ファイルサイズ:5,057 バイト
    使われている色数:20色

  • ClearTypeあり(サブピクセルレンダリング)の場合

    ファイルサイズ:9,602 バイト
    使われている色数:978色(24bit PNGで保存)

やはり、ClearyTypeをオンにしていると、1色の文字でも色数がグッと増えてファイルサイズが大きくなりますね。

では、これをClearTypeなしの場合と同じ20色に減色するとどうなるでしょうか。

  • ClearTypeあり(サブピクセルレンダリング)の場合(減色)

    ファイルサイズ:5,707 バイト
    使われている色数:20色

ファイルサイズはかなり近づきましたね。

テスト結果:画像を縮小すると、さらに違いが大きくなる

次に、この画像を縮小するとどうなるでしょうか。中途半端になるように、オリジナルサイズの71%に縮小してみました。

  • ClearTypeなし(通常のアンチエイリアス)の場合(71%サイズ)

    ファイルサイズ:13,512 バイト
    使われている色数:252色

  • ClearTypeあり(サブピクセルレンダリング)の場合(71%サイズ)

    ファイルサイズ:31,732 バイト
    使われている色数:7039色(24bit PNGで保存)

やはりClearTypeオンの場合は色数が増え、ファイルサイズも大きくなります。その差異は、原寸の場合よりも大きくなっています。

この縮小画像を元の20色に減色するとどうでしょうか。

  • ClearTypeなし(通常のアンチエイリアス)の場合(71%サイズ、減色)

    ファイルサイズ:8,133 バイト
    使われている色数:20色

  • ClearTypeあり(サブピクセルレンダリング)の場合(71%サイズ、減色)

    ファイルサイズ:7,882 バイト
    使われている色数:20色

ファイルサイズ的には、どちらも同じぐらいになっています。このテストではClearTypeありのほうがファイルサイズが減りましたが、このあたりは元画像の状態によって変わることでしょう。

◇◇◇

ということで結論としては、サブピクセルレンダリングをオンにしているシステムで画面キャプチャを撮った場合は、そのままではファイルサイズが大きくなってしまうが、ちゃんと減色処理をすれば大きな違いはないということですね。

ただし、今回は文字だけの画像でテストしましたが、さまざまな色が含まれる画像とテキストが一緒になっている画像では、サブピクセルレンダリングの色が減色処理に影響する場合があるので、注意したほうがいいですね。

この記事が役に立ったらシェア!
よろしければこちらもご覧ください
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

CVR
顧客転換率。購入や申し込みなどにどれくらい至っているかを示す指標。 CVR ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]