kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

ウェブデザインにとっては必要不可欠!一般的な3種類の拡張子による画像の特性を理解する


ウェブサイトに使われる画像には
写真であったりイラストであったり
大きかったり小さかったり
とにかく色々なものがあります。

そういった画像にも種類があり
それぞれの特性があります。

それぞれの特性を活かせてますか?

なんとかく『.gifでいいかな…』なんて独り言を言っていませんか?

特性を知って素敵なページ作りを心掛けましょう。

ではどうぞ。

ちなみに元の画像はこんなのです。



下の画像と見比べてみると
どの種類の画像がどんな感じになるか分かると思います。

.jpg / .jpeg / .jpe

“ジェイペグ”と言われる画像です。

何種類か表記の仕方がありますがだいたいどれも同じです。

.jpgはたくさんの色が使え比較的容量は軽いですが
圧縮するたびに劣化し滲んでしまうのが欠点です。

デジタルカメラで撮影した写真にも使われる場合が多く
複雑な配色の画像に向いています。



保存する圧縮率によっては素材が滲んでこんな感じになってしまう場合があります。
.jpgは圧縮率をうまく使いましょう。


.gif

“ジフ”と言われる画像です。

この画像はアニメーションやアルファチャンネルといったものが使えますが
256色までしか使えないので
写真など複雑な配色の画像には向いていません。

一般的にはアイコンなど小さくて単純な配色のものに使われています。



複雑な配色の画像に使うと色の制限があるので画像が台無しになってしまう場合があります。
単純な配色の画像に使いましょう。


.png

“ピング”と言われる画像です。

たくさんの色が使えて圧縮しても.jpgのように滲みません。

.gifのようにアルファチャンネルも使えますが
容量が大きくなりやすいので使いどころがかなり限られます。

ウェブサイトでは透過させた.pngを使って
デザインやコンテンツのアクセントに使われる場合が多々あります。



キレイな写真ですが容量が大きいので使い勝手が悪いです。


というワケで
とりあえず一般的であろうと思われる3種類をピックアップしました。

容量や色数を考えて適切に使用するのも
ウェブデザインにとっては必要不可欠なスキルというワケでございました。
スポンサーサイト