2015年10月28日水曜日

PC 画像の拡大と縮小

さて、皆さんがご覧になっている画面は、発光する点の集合です。  平たく言えば。
写真も文字も、色の付いた 点の集まりな訳ですね。
普通は、この拡大や縮小はしませんが、 保存されたファイルや別の目的で操作する事は多いですね。
最近、アイコンを作りまして、 画像の拡大縮小を、厭と言う程、味わいました。
ちょっと、書いて見ます。


アイコンの様に、極 小さい ものでは特にそうです。  何せ、たった 16 x 16 の 256 個 で絵にするのですから。
ブラウザのタブに表示されるアイコンや アプリの画面の左肩のアイコン ... 。  綺麗に出来ています。 
流石、プロ!。  Nice Job ! と、拍手を贈りましょう。


これに対し、素人の私達と言えば ... 。
綺麗に、拡大縮小をすると言うのは、難題です。

例えば、文書に挿し込む画像でかなり小さいものが必要な時とか、
元画像が小さいのに、大きな解像度のものが必要な場合とか。
皆、悩むのは、 その結果が、思わしくないからですね。
でも、必要の迫られて作業しているので、頭を抱える事になる ... 、 厭ですねぇ。
様々な色の着いた小さな升目を並べるのですから、
これを拡大縮小すれば、細部のニュアンスは変化してしまいます。

普通、私達が扱うのは、冒頭に書いた様に、点の集合、つまり、ビットマップ系と言われる画像です。
jpg も png も gif も bmp も tiff も、皆、そうです。
別の呼び方があります。  ラスター画像 です。

これに対して、ベクター画像 と言うもの もあります。
直線や曲線を代表とする 線画 が良く知られています。

ベクター画像と言うと、 アウトライン フォント を思い浮かべれば、容易に その内容を掴めると思います。
或いは、 CAD 等の図面データ もそうでしょう。

拡大縮小しても、データの欠損が生じない この手法は 素晴らしい です。

例えば、画像編集ソフトで、境界線をアウトライン化 (ベジエ曲線 パス 等) し、拡大縮小して見れば、
その精度に驚かされます。


但し、ここでも、落とし穴があります。
svg ファイル等のベクターデータではなく、jpg や png 等に置き換える段階で、また、升目が登場します。
つまり、斜めの境界部分を滑らかに見せる為に、スムージング(グラデーション化)がされるのですね。
仮に、ベクターデータでも、画面に表示する時に同じ事が起こります。
充分な解像度があれば、階段状にガクガクになることは無いのですが、
そうで無い場合には、困った事が起こります。


アウトラインの通る位置によって、枡の色が変わるから ですね。
小さいサイズのアイコンの場合、 ラインの位置は変わらなくても、最小単位の枡が大きくなる訳です。
16 ビットアイコンでは、横方向に 16 個しか枡が無いのですね。.
どうなるか は、言わずもがな ですね。

ベクターデータの先駆者、フォント、では、 これを フォント ヒンティング (ヒント) と言う技術でカバーしています。
アウトラインの位置情報を微調整する事で、サイズによる見た目の違いを吸収している みたい です。

斑模様の 一般画像 特に 写真 の場合には、もっと顕著です。
データ化された時に、既に、上の図の様に、最適化されている訳ですから、
これを拡大縮小すれば、 近似値で補間している事になります。
綺麗に出なくて 当然 なのですね!。
真っ直ぐに見える様に、一部をぼかしてあるものを、 伸ばしたり縮めたり するのですから、
それは 上手く 行く方が 凄い のです。

     実は、同じ事を別の切り口で以前に書いています。 少し、ニュアンスが異なりますが、根幹は一緒。
         写真とデジタル [初心者向け]
         写真とトリミング 傾き補正 [初心者向け]


さて、ラスターとベクターと、ですが、 歴史はラスターの方がずっと長いです。
ベクターは パソコン環境の高性能化のお陰で、やっと、普及して来た段階なのかも知れません。

最近の OS の、或いは、アプリの、 見た目の綺麗さは このベクター技術の反映なのだと思います。
ただ、写真の様な、 階調(グラデーション)の集まり が、その恩恵を与れるのには もう少し 時間が必要なのかも知れません。
スプライン補間等の応用が進めば、 あらゆる環境下で、綺麗な拡大縮小が自由自在になる時代が訪れるかも。

写真のベクター化。  考えただけで、凄い! です。  夢物語 かな?。.



0 件のコメント:

コメントを投稿