それではWEBショップで使用する画像形式は？

　○ アイコンや小さな画像・・・　GIF形式
　○ 写真や大きな画像・・・　JPEG形式

最新ブラウザーでの表示を優先　(IE6.0・NN6.0以降）

　○ アイコンや小さな画像・・・　GIF / PNG形式
　○ 写真や大きな画像・・・　JPEG形式

（GIF形式とPNG形式）

GIF形式では背景色の透過や、アニメーションを作成することができます。PNG形式の場合には透過画像は作成できますが、アニメーションは作成できません。
　　　　　

JPEG / PNG 保存できるフリーウェアソフト

PNG形式
　○ PNG Saver

その他：　ベクターソフトウェアライブラリ「グラフィック変換」
　　　　　　　　　　

JPEGの圧縮率指定とファイルサイズ

　　　　　　
それでは、ホームページで使用する画像は、どの程度のファイルサイズが好ましいのでしょうか？

一般的には、20〜30KB(キロバイト）程度の画像であれば、同一ページに複数の画像を表示させてもあまり見に来た人の負担にはなりません。（１ページ30枚とかは厳しいですが・・・）

しかし、商品を大きく綺麗に見せたい場合には、30KB程度のファイルサイズでは厳しいものがあります。

そこで、最初に小さな画像を表示しておき、画像をクリックすると大きな画像が開かれるという方法が、表示上の負担にもならず便利な方法だといえると思います。
このような表示方法を、「サムネイル」と呼びます。

大きな画像のサイズについては、おおむね100KB以内が限度となりますが、100KBの画像でも、電話回線やISDN回線では表示にある程度の時間がかかります。

従って、JPEG形式で保存する際には、画質を損なわない範囲でできる限りファイルサイズを小さくすることが肝心です。
画質の劣化を最小限に抑えた状態で、50〜70KB程度に圧縮できればあまり表示上の問題とはならないと思います。

注意点！

画像をサムネイルさせる場合には、大きさを縮小しサイズを小さくした画像（プレビュー画像）と、大きく表示させる画像の２枚を用意するのが好ましいと思います。

ごく希に、大きな画像をHTML上のサイズ指定でただ小さく見せていることがありますが、その方法では最初から大きなサイズの画像を読み込むため、表示上の負担となりかねません。

プレビュー画像と大きな画像の２枚を使用する場合には、プレビュー画像分を最初に余計に読み込む必要があるのですが、大きなサイズの画像を表示するか、しないかは、訪問者の方が判断できるようになるんですね。

(サムネイル画像のサンプル)
画像をクリックすると大きな画像が見れます

面白そうなので韓国から輸入してみたカップ麺群
　　　　　　　　　　　

素朴な疑問 Q&A

写真や大きな画像をGIF保存したら？

これも保存はできますが、一般的にはファイルサイズがかなり大きくなります。訪問者の表示上の負担となりますので注意して下さい。（色数もフルカラーではなく256色となります）

BMP形式は使えないの？

BMP形式もWindowsでは表示されますが、圧縮されていないためファイルサイズが相当大きくなり、WEB画像にはあまり向きません。

透過画像ってなに？

透過とは、指定した色を透明にすることです。
画像は全て四角いキャンバスに描かれていますので、背景などを透過させることにより、キャンバスを見えなくすることができます。

アニメーションGIFってなに？

GIF形式の場合、パラパラ漫画の要領でアニメーションを作成することができます。(下の画像は7コマからなっています）

アニメーションGIF

Animation GIF Makerや市販ソフトで作成できます。