どうも、7noteです。今回はwebで使われる3種類の画像の使い分け方の説明。

WEBサイト制作をするときに初心者が時間をかけてしまいガチなのが、画像の書き出し。
完成したデザインのフォトショップデータやイラレデータから画像を書き出すとき、

「これは、jpgって書いてるので書き出したらいいのか？？」
「なんか書き出したけど後ろに白い背景残っちゃった、なんでだろ。。」

失敗例

こんな経験ありませんか？
実はWEBサイトの制作には適切な画像の書き出し方があります！

なんでもかんでも同じ種類の画像で書き出すのはやめて、画像書き出しの初心者を卒業しましょう！

違いはこちら

※1 pngは正確には「png-8」と「png-24」の２種類があり、使われている色の数が違います
　「png-8」だと256色でしか表現できないので基本的には「png-24」を使います。
※2 非可逆の場合、画像を保存し直すだけで画質が荒くなります。

容量の違い

画像の容量（データの大きさ）は基本的には小さければ小さいほど良いとされています。
サイトはデータの塊なので、サイトの訪問者はそのデータを読み込む必要があります。
大量のデータを読み込むためには、時間がかかります。
なので容量が軽ければ軽いほど読み込む速度が上がり、利用者がストレスなくサイトをみることができるので軽い方が良いとされています。

色の数の違い

色の数は画像を表現するのに何色の色を使うのかと言うことです。
つまり色の数が多いほど、より繊細な色の違いまで表現できるので、綺麗な画像になります。
ただ、色の数が多ければ、比例して容量も大きくなるので、色数の少ない画像ならgifで書き出す方がいいでしょう。

圧縮方法の違い

先ほども書きましたが、非可逆の場合、画像を保存し直すだけで画質が荒くなります。
可逆の場合は何度書き出したり圧縮しても画質が荒くなることはありません。

背景の透明の違い

jpgだけは背景を透明にすることはできません。
背景が透明の部分がある画像を書き出すときは、必ずpngがgifを使いましょう。

gifアニメーション（動画）

唯一画像に動きを付けられるのがgifです。
こういうやつ↓

こんな時、どれがいいの？参考例

*「文字サイズのくらいの小さいアイコン」*

↓

【gif】かな。
でも丸みが綺麗に出ないでギザギザになっちゃったら【png】使うかも。

*「四角形の写真」*

↓
ほぼ間違いなく【jpg】かな。

*「丸い写真」*

↓
背景が透明の箇所があるので、ほぼ間違いなく【png】かな。

*「ブラウザ標準でない文字など」*

↓
1つ目と同じで【gif】かな。単色なので軽いgif。
でも丸みが綺麗に出ないでギザギザになっちゃったら【png】使うかも。

まとめ

「gif」の特徴

• 容量が一番軽いから可能ならgifが良い。
• でも256色しか使えないから単色の画像専門。
• 背景は透明にできる。
• 唯一アニメーション画像にできる。

「jpg」の特徴

• 四角形の写真を書き出すならjpg。
• pngよりも容量が軽い。
• 圧縮方法が非可逆なので、書き出しする度画質が悪くなる。
• 背景は透明にできない。

「png」の特徴

• 容量が大きいので重い。
• グラデーションの表現などに適している。
• 背景は透明にできる。
• 最悪、困ったらpngで書き出せばなんとかなる。

おそまつ！