- Webデザインにおける画像知識について自己学習のためまとめてみました。
画像知識が必要な理由について
- 画像の形式ごとに特徴があり、それぞれのメリットを最大限活かすため
- 素人には仕事が来ない
種類の全体像について
大きく分けて２つ
・ビットマップ形式：小さな要素で構成
細かい色彩変化が得意
拡大するとぼやける
・ベクター：数式設計で構成
拡大にも強い
拡大してもぼやけない
複雑なデザインは要領がでかい
・jpeg
得意：pngに比べて軽い、要領を抑えらえる
最大の特徴は約1670万色をカバーし「画質が良い」「容量が低い」「印刷でも使える」
不得意：透過できない、画質を下げると戻せない
弱点は「非可逆圧縮」のため、「劣化する」こと。一度変換してしまうと、それ以降保存するたびに劣化するため、訂正に弱いのが弱点です。
使用場面：色数の大きな場面、トップ画面、jpg形式は大きく配置かつ多数配置する「写真」での用途に向いています。
・png
得意：透過できる、圧縮しても画質が落ちない
最大の特徴は「画質が良い」「透明が使える」「劣化しない
不得意：jpegに比べて重い
弱点は「容量が大きくなりがち」な点。ただし色数の少ないイラストなどでの仕様の場合、同じ大きさでもjpgより軽くなる場合もあり
使用場面：透過させたい、基本的にpngを使う
大きく画面を使う場合は重すぎるのでjpeg
- gif
得意：アニメーションが出来る」という唯一無二の強み
不得意：色数少ない」のが最大の弱点
・svg（ベクター）
得意：拡大しても劣化しない、アニメーション設定が可能
不得意：複雑だと要領が重い、
使用場面：アイコンなどの単純な画像として使う
webの世界での解像度の考え方
一方、webの世界では「画像は軽ければ軽いほどよい」という考え方です。
とあるwebサイトを訪問し、あまりに読み込みが遅いからページを離れた、
という経験、ありませんか?また今wifiが世界中飛んでいる優しい世界になりつつありますが、速度はバラバラです。訪れたカフェでフリーwifiある!やった!で繋いでみたは良いものの、遅い…で諦めた経験、ありませんか?
そういうことです。webでは早いは正義、軽いは正義なのです。
ユーザーの体験を損なわないようにするためには画像は軽くあるべき