アナログ
RSS  

はかったな!AAの人気に嫉妬2014/05/13 19:23

久しぶりに更新したんでアクセス解析をのぞいてたのですが、なんかblog/?offset=5なんてのがちらほらあるんです。
「べつになんでもないこと」でググッたら、リンク先の一つがblog/?offset=5になるくらい影響してます。

調べてみたら、Firefox 3.6 の AA (via べつになんでもないこと) - Ethertumblrが元らしいってか、Firefox 4でAAがズレるという話で、Fx 3.6と比較した時のAAじゃないか!

しかし、なんでそんな古いものが……つうか、Firefox 3.6で表示したAA画像のタイトルに「Firefox 3.6 の AA」なんて入力してたものだからまるでFirefox 3.6 の AAみたいになってるじゃないかorz(ちょっと混乱気味)

その後AAの表示はというとズレなくなっていて、Firefox 29のデフォルト値は
「gfx.direct2d.disabled」が「false」
「gfx.font_rendering.directwrite.enabled」が「false」
になっています。

試しにズレていた頃と同じように
「gfx.direct2d.disabled」を「false」
「gfx.font_rendering.directwrite.enabled」を「true」
にしてみましたが、特にズレているAAはなさそうなので、ちょっとこれで運用してみます。

どうせなので、背景を透明にしたのとAAを置いときますね。

はかったな!
     \    は    か    っ    た    な    !    /
    ____________________________
   | |llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll|llll| |
   | 0.   1   2    3    4    5    6    7    8    9   10 |
   |                  (,,゚Д゚)                      |
   |                    U,  つ                  |
     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|  ̄ | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
                         U"U

<追記 5/23>
環境を書いてなかった……Windows 7 x64

Direct2D 有効true
DirectWrite 有効true (6.2.9200.16571)
GPU #2 の使用false
GPU 描画支援のウィンドウ1/1 Direct3D 10
WebGL レンダラGoogle Inc. -- ANGLE (AMD Radeon HD 6450 Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemotefalse
アダプタ RAM1024
アダプタドライバaticfx64 aticfx64 aticfx64 aticfx32 aticfx32 aticfx32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64
アダプタ名AMD Radeon HD 6450
デバイス ID0x6779
ドライバのバージョン14.100.0.0
ドライバの日付4-17-2014
ベンダ ID0x1002
AzureCanvasBackenddirect2d
AzureContentBackenddirect2d
AzureFallbackCanvasBackendcairo
AzureSkiaAccelerated0

■AA対応チェック

┏━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃   ┌───────────────┐             ┃
┃   │ .右のAAのズレない環境が標準モナ.|             ┃
┃   └──y────────────‐┘             ┃
┃  ∧_∧         |     |\|/ |     |   |   ┃
┃ ( ´∀`)         | ∧ ∧  |/⌒ヽ、| ∧_∧ | ∧∧ |   ┃
┃ (     つ          |(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|   ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━┛
   |  |               コソッ|  |
   |  |∧_∧ ジー        ∧_/.|  |  __
   |_|´◛ω◛`)         .(´◛ω|_| .[lШШl]
   |  | o【◎】           (  o|  | (´◛ω◛`) ジー
   | ̄|―u'              `u. | ̄||| | | | |
   """"""""         """"""""""""""""
        ┏━┯━━━━━━━━━━━━━━━━━━━━━━━┓
  ┏━━┻━┥       _,,..                          ┃
  ┠────┤ ⊂⊃  /,' 3~~\ ⊂.⊃                        ┃
  ┗━━┳━┥..............,,,,傘傘傘::::::::傘傘傘.............       おてもと      ┃
        ┗━┷━━━━━━━━━━━━━━━━━━━━━━━┛
        ┏━┯━━━━━━━━━━━━━━━━━━━━━━━┓
  ┏━━┻━┥      (⌒-⌒)      お食事処 仔熊庵        ┃
  ┠────┤ ⊂⊃  (・(ェ)・ ) ⊂⊃                     ┃
  ┗━━┳━┥..............,,,,傘傘傘::::::::傘傘傘.............       おてもと      ┃
        ┗━┷━━━━━━━━━━━━━━━━━━━━━━━┛

</追記>

<追記2 6/21>
リンク先どころかリンク名称まで「blog/?offset=5」になりやがりましたよorz

リンク先どころかタイトル名までblog/?offset=5になった

</追記2>

Flash Player 13.0.0.214リリース2014/05/14 00:22

13.0.0.214がリリース(セキュリティ修正:APSB14-14)されてます。
11.7はサポート終了です。
さっさと更新

と久しぶりに書いてみる。

Jpegのにじみと画質2014/05/19 01:39

不思議なことですが、Jpegは赤の劣化がひどいとか、にじむとか、そんな話で引き合いに出される画像は、だいたいサブサンプリングした(色差の情報を間引いた)ものが使われています。

サブサンプリング(ダウンサンプリングとかいわれたりする)に関してはその90「JPEGの特徴」 - 槻ノ木隆の「BBっとWORDS」を見て頂いた方が文字だけで説明するより分かりやすいと思います。
(PDFでよければもっと詳しい解説(知っておきたいキーワード 4:4:4と4:2:0もあります)

実際に比べて見れば一目瞭然ですので、色差を間引いてない画像(4:4:4)間引いた画像(4:2:0)のサンプルを作ってみました。
元画像はこちらのPNG

元画像

Jpegに変換するのに使用したソフトはiJPEGCompで、表題の「4:4:4」はサンプル4:4:4、「4:2:0」は4:1:1(2x2)で作成後、最適化しています。


YCbCr 4:4:4YCbCr 4:2:0
画質100100% YCbCr 4:4:4100% YCbCr 4:2:0
23,12212,019
画質 9090% YCbCr 4:4:490% YCbCr 4:2:0
10,7146,023
画質 8080% YCbCr 4:4:480% YCbCr 4:2:0
8,0344,640
画質 7070% YCbCr 4:4:470% YCbCr 4:2:0
6,5613,896

画像の下の数値はファイルサイズ(バイト)になっています。
色差情報を間引かない設定(4:4:4)なら、拡大でもしないと(ブラウザの機能などで拡大して確認してみてください)何処が劣化したのか分からないのではないでしょうか?
(流石に画質70では拡大せずとも、モスキートノイズが見えてますが)

一方4:2:0では画質100であっても、赤、青、緑いずれもおかしいのが分かってもらえると思います。
4:2:0の設定で保存した画像で、「Jpegは赤の劣化がぁ」とか「にじみがぁ」とか言うのはおかしいなっと私は思うわけです。

※このサンプル画像はJpegに不利になるように調整しています。4:2:0で保存しても、画質を落とさなければ、普通は気づかないレベルに収まるはずです。

ところで、iJPEGCompを使えば、比較しながら最適な画質が選べますが、使い慣れたアプリから直接Jpegで保存する場合やバッチ処理ではそうはいきません。
どのくらいの画質が最適か?となると、こればかりは人それぞれ、目的次第、と言わざるえません。

しかしながら、JpegAnalyzer Plusオンラインヘルプ指標になりそうな資料があります。

(資料を前提に)私見を述べると
画質は譲れないという場合、97~100(PNGを検討すべきレベル)
拡大しないと分からない程度でいい場合、92~96
バッチ処理でとりあえず処理する場合、90
よく見なければ気にならない程度の場合、85~91
雰囲気が伝われば十分な場合、75~84
あたりを目安にするとそうハズレはないと思います(参考なるか分かりませんが100~88まで4%ごとの出力結果)。
(※あくまで目安です。納得いく出力が得られるまで、元データを失わないしょう注意しましょう)

ところで、ツールの中には4:2:0でしか保存しないソフトがあったりします(例:JTrim)。そのような場合はPNGやBMPで保存して、ほかのソフトかiJPEGCompのような変換ツールを使うしかありません。
どうやって確認するかは、ヘルプファイルに書いてなければ、JpegAnalyzer Plusで出力ファイルを直接確認(解析ボタンを押すと先頭の方に情報があります)することになります。

これらのツールを上手く使って調整し、jpegtran(JTBは入手不可)やcarmineで最適化すれば、一時期話題だったJPEGminiより小さくて見栄えの変わらない画像が作れます(なのでみんながあんなにスゴイと騒ぐのか不思議でした)。
JPEGminiは自動で楽(そこだけはすごい)ですが、自動だからこそ、画質にこだわったり、ファイルサイズにこだわったりと柔軟な対応はできません。
これらのツールを使いこなせれば、Jpegに対する偏見もなくなるのではないかなぁと思います。


<Sample追記(5/25)>
渦巻きだけではアレかと他の例

元画像PNG

元画像。PNGではサイズ面で不利(392061 bytes)だがJpegではよく縮み、YCbCr 4:2:0でもにじみが気にならない。

JPEGmini

JPEGmini(YCbCr 4:4:4 64427 bytes)は自動でこの画像を出力するからすばらしい。

89% YCbCr 4:2:0

iJPEGComp(画質89 YCbCr 4:2:0 62078 bytes)ならサブサンプリングが選べるのでもう少し容量を削った。

75% YCbCr 4:2:0

iJPEGComp(画質75 YCbCr 4:2:0 41088 bytes)雰囲気を壊さない限界点?

50% YCbCr 4:2:0

iJPEGComp(画質50 YCbCr 4:2:0 28402 bytes)画質70以下では、画像が悪化する割に縮まないのでおすすめしない。


次はJpegを選択すること自体が間違いのAAの例

元画AA

PNGなら劣化なしの6635 bytes!

JPEGmini AA

JPEGmini(YCbCr 4:4:4 166300 bytes)はどうやって適切な画質を選ぶのか?ファイルサイズを削るより、破綻一歩手前の画質がチョイスされる絶妙さ(iJPEGCompだと96、7相当の画質)。この例は極端すぎますが、ファイルサイズさえ目をつぶれば、Jpegだってなんとかなる。

Caesium 100%

Caesium(品質100 YCbCr 4:2:0 125031 bytes)のようにサブサンプリング固定のツールではにじんでどうにもならない例。サンプリングの選べるiJPEGComp(対話処理)やRalpha(バッチ処理)やJpegResizer(バッチ処理)の方がいいと思う理由です。

※JPEGminiはPNGを入力できないので、Jpeg 画質100 YCbCr 4:4:4に変換して処理しています。

</Sample追記(5/25)>


蛇足

実は、画像を劣化させずにファイルサイズを小さくするあたりで書いておきたかった話だったのですが、手頃な画像がなくて5年以上も過ぎてしまいました。
なんか完全に旬を逃した感じの話ですが、まれに、にじみがぁとかJPEGminiスゲーとか見かけるので、ちょっと書いてみたです。

役に立つかもなリンク
JPEG、GIF、PNG画像選択の指針まとめ | マイナビニュース

Independent JPEG Groupjpegrtran
(jpegtran:JTBが入手不可になったのでコマンドで最適化するしかない)

Independent JPEG Group's free JPEG software version 6b (Win32 版)
(上の古いバージョンの日本語化。マニュアルがありがたい)

新規保存で劣化していくJPEG形式の画像の様子をとらえたムービー - GIGAZINE
(途中出力にJpegを選んではいけないとよく分かる)

<修正>
4:1:1(4x1)→4:1:1(2x2)
</修正>