長野県長野市・松本市ウェブ制作事業部 コンサルティングFIRM

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

Picture of ATFコンサルティングFIRM

ATFコンサルティングFIRM

マーケティングがあなたのビジネスの目標達成を支援します。

HubSPot+ ATFC担当に相談する

目次

現在の企業の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画像を用いることが増えていくことは間違いないであろう。

SNS
松本市ホームページ制作
なぜ、成果が出るホームページと出ないホームページがあるのか?——制作と運営を左右する「熱量」の正体

私たちの元には、小規模な事業者様から売上規模30億円クラスの企業様まで、日々多くのご相談が寄せられます。 長年Web制作の現場に立ち、数多くのクライアント様と伴走してきた経験から、ある一つの結論に達しました。 ホームペー

ブログを読む »
APPLEWEBデザイン
Webデザイン制作のトレンド

1. UIレイアウト:情報の構造化と個性化 Bento Grid(弁当箱レイアウト) Appleなどの大企業が先導し、今や定番化したレイアウト。情報をカード型で整理しグリッドに配置するスタイルで、レスポンシブ対応がしやす

ブログを読む »
採用専用Webサイト
採用サイトがもたらす「攻め」と「守り」の戦略

「求人媒体に高い掲載料を払っているのに、思うような人材が集まらない」「面接に来ても、社風とのミスマッチですぐに辞めてしまう」……。多くの採用担当者様が抱えるこの悩み、実は「採用専用サイト」の構築で解決できるかもしれません

ブログを読む »