スマートフォン向けのサイト

webサイトでの画像ファイルをあらためて考える

現在の企業のWEBサイトはクライアント側でWEBサイトを更新することが必要とされている。中小企業にもWEB担当などがいることも長野県でもめずらしくはない。
WEBサイトを更新するには欠かせない画像ファイルの形式についてのまとめです。
webサイトを制作する上で現在では一般的に「JPEG」「GIF」「PNG」という形式の画像ファイルが支流である。

適した画像ファイル形式について

png.jpg.gifのまとめ
PNG
写真・イラストに適している。
JPEG
写真など色素の多い画像に適している。
GIF
色数の少ないイラストに適している。

PNG画像の注意点…。

IE-destroy写真にもイラストにも適し、背景に透過させる半透明グラフィックなどの表現もできる「PNG」画像だが、大きなデメリットもある。IE6では透過せず背景がグレーになってしまうことだ。しかし透過PNGをIE6に対応させる方法はたくさんある。そのひとつがGoogle Codeにあるie7.jsというJavaScript、IEの7以下に読み込ませるスクリプトで、IE7以下でもPNGを透過させることができる。
またwordpressプラグインHITS-IE6 PNG FixなどでIE6でも透過を可能にするものもある。ブラウザの表示に注意しながら使い分ける必要がある。
現在ではIE6の需要もだいぶ減ってはいるが、まだまだ油断ができないのもWEBデザイナー泣かせなIEである。

PNGはIEでキレイに見えない?

Photoshopで作成されたPNG形式のファイルにはガンマの値が異常な値に設定されている。一部ブラウザ(IE7、IE8)では色が変わってしまうといった現象が起こる。
そこで、PNG形式で保存された画像からガンマの設定(ガンマチャンク)を削除し、色温とICCプロファイルのチャンクも削除する必要がある。
※PhotoshopCS2以降はチャンクが含まず書きだしてくれるので気にしなくてOK!
作成したPNGファイルのチャンクを簡単に削除してくれるツールをご紹介。
WINでPNG形式の画像の補助チャンクを削除するソフト»
MACでPNG形式の画像の補助チャンクを削除するソフト»

PNGファイルの今後

PNGはW3C(World Wide Web Consortium)が推奨する画像フォーマットで、最近ではブラウザやグラフィックソフトのサポートも進み、標準的な画像形式になっている。 以前には、古いブラウザ(IE6等…)を使用しているユーザーへの配慮からPNGの使用を控えることもあったが、 PNGを表示できないブラウザのシェアはかなり低くなっている。そして最近急激にシェアが増えているiphoneやAndroid等のスマートフォン向けのサイトの場合はPNG形式が支流である。今後WEBサイトを構築する際にPNG画像を用いることが増えていくことは間違いないであろう。

まずは、お電話・メールで
ご相談ください。

「ホームページ制作成功の秘密」の
DVDと資料をお届けします。

Web制作に関する相談専用ダイヤル
メールアドレスだけでお問い合わせ