新年明けまして、おめでとうございます！シュウです。
Webクリエイターにとって、画像処理はいつの時代になっても、避けては通れない課題です。日進月歩のデジタル技術とともに、Web制作において画像への対応の考え方や仕様も常に変化しています。
今日はWeb世界の「画像」についてご紹介いたします。
Photoshopの虫眼鏡ツールで画像を精一杯拡大すると、網のように正方形が並んでいるのが分かります。
私達に見えている画像は、それぞれの色を持つ正方形を組み合わせたものです。その正方形は「ピクセル」と言います。ピクセルは画像のサイズを表す単位です。
そのため、同じサイズの画像で、並べる正方形の数が多ければ多いほど、キレイに表示できます。
画像を写すモニターも同じような仕組みです。
「レティーナディスプレイ」と呼ばれる高画質のモニターも、昔より光る正方形を多く持つことでより繊細に表現できるようになります。
一方、等倍サイズで同じピクセルの量を持つ画像をレティーナディスプレイで描画する時、1ピクセルを4ピクセルに伸ばして表示してしまいます。
そのため、普通のモニターよりもぼんやりに見えます。そこで、2倍のピクセルをもつ画像が必要になります。
アウラでは、現在は標準で2倍サイズの画像をセットで書き出しています。
技術の進化でより繊細に表現できるモニターが普及したら、将来は3倍さらに4倍サイズの画像もセットで必要になってくるかもしれません。
Web上での画像表示は、通信速度に左右されます。
とくに昔、通信速度が低い時代では、ウェブサイトは、画像が完全に表示されるまで時間がかかるケースが多かったようです。
できるだけ容量を軽くし、キレイな画質で表示するのがWeb上に画像を使う際に考えないといけないことです。
では、どんな画像形式を選んだら、軽くてキレイに表示できるのでしょうか。
GIFは、アニメーションを表現できるのが特徴です。
また、GIFは透明背景にも適しています。PNG形式がまだ多くのブラウザにサポートされていない時代には、よく使われました。
さらに、CSSがまた普及していない時代には、GIF形式は大活躍していました。
ボタンやロゴなど色味の少ないイラストに加えて、当時のコーディングでは表現しにくいスタイルのタイトルなども、GIF形式を使って書き出していました。
GIFの欠点は、表現できる色の数が少なく、256色になります。
そのため、最近では使い道がかなり狭くなりました。
JPEGは、細かい色の表現が得意です。とくに写真ではJPEG形式を使うのが定番です。
さらに、JPEGは大きいサイズのわりにデータが軽いです。
PNGは、JPEG並に表現できる色数が多いです。
そして透明背景の書き出しが可能なのも特徴です。
デメリットは、データ容量が比較的に重いことです。
webpはgoogleが開発し、Webに特化している形式です。
とにかく「軽い」のが特徴です。しかも透明背景も表現できます。
表示スピードを向上させるため、アウラでは標準でjpegやpngの画像をwebpに圧縮する処理を行なっています。
svgはパスを使って描画する画像形式で、よりなめらかに図形を表現することが可能です。
中身のデータは座標を表す数字の並びなので、データも軽いです。とくに簡単なイラストに適しています。
アウラでは、現在アイコンをSVGで書き出して表示するのがメインです。
違う画像形式には、それぞれの特徴があります。
書き出しの内容に合わせて、画質と容量のバランスを考えた上で、最適なものを選びます。
アウラでコーディング業務を携わる上、画像の問題で苦戦した経験が度々ありました。
画像の表示具合も、ウェブサイトの品質に直結するポイントです。
アウラはそのようなポイントを一個ずつ具象化して、品質を保つように注力しています！
