補足：「png・jpg・gif」の違いと使い分け方について

サイトの軽量化には画像形式の選択も大切！

以前書いた「スマホサイト作成の時に有効な「ページの軽量化」３つ！」では、

画像の解像度を下げることも、
ページの軽量化には非常に有効な方法です。

（中略）

また、画像の用途に合わせて「png」「jpg」「gif」を使い分けることも、
ページ軽量化をするときのちょっとしたコツになります。

こんなことを書きました。

そこで今回は「png」「jpg」「gif」の違いと使い分けについて、
簡単に解説出来たらなと思います。

これを読めばあなたも画像の使い分けを正しくできちゃいますよ！

「png・jpg・gif」の違いと使い分けについて

まず簡単にそれぞれの違いと目的を説明するとこんな感じになります。

png

（画像引用：wikipedia「Portable Network Graphics」）

最も画質が高い形式。鮮明な画像を掲載したい時に便利。

主にイラストなどはpng形式で保存されることが多く、
画像の透過処理などはpng形式が一般的です。

デメリットとしては、画質が高い反面、ファイルサイズが大きくなりがちです。

jpg(jpeg)

（画像引用：wikipedia「JPEG」）

gifとpngの中間位の画質。ファイルサイズもその中間。

jpgは画像の色数が多い画像に最適な形式なので、
デジカメや写メにはこの形式が多いです。

gif

（画像引用：wikipedia「Graphics Interchange Format」）

最も低画質な反面、最も画像サイズが軽い。
256色しか表現できないので、とにかく軽いです。

画像が軽いので、簡単なボタンやアイコンに使用される場合が多いです。
あと、動く画像を作りたい時には、gif形式を選択する事になります。

アフィリエイターレベルであれば、
とりあえずはこの程度の知識があれば大丈夫だと思います。

さらに詳しく知りたい方は
これらのサイトなども参考にすると良いかと思います。

どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。
https://www.gizmodo.jp/2010/10/jpgpnggif.html
（「GIZMODO」様より）

JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる！
https://delaymania.com/201310/web/gif_jpg_png/
（「delaymania」様より）

後は色々と調べれば情報がさらに深掘りできるかと思います。

サイト内で適切な画像サイズに編集しておく

それと、画像の軽量化についてもう少し補足をすると、
画像サイズの適切な設定も大切です。

当たり前ですが、
wordpressで画像をアップロードする時、

1200×600の画像をアップロードするよりも、
600×300の画像をアップロードした方が軽いです。

画像サイズの変更などは、
ペイントソフトなどの無料ツールで簡単にできるので、

ひと手間を面倒くさがらずに続けると、
スマホでもサクサク表示されるサイトに近づきます。

画像を軽量化する時のまとめ！

画像を軽量化する時のまとめとしては以下の通りです。

　　・画像サイズを小さくする
　　・画像形式を正しく選択する
　　・画像の圧縮サイトを利用する

今回の記事と、以前の記事で、
この３つについて解説したことになりますが、

この画像の軽量化対策が意外とバカにできません。
「PageSpeed Insights」でも、画像の軽量化はうるさく言ってきます。

google側も表示速度が速くなることは良い事だ
と言う認識があるのは間違いありません。

サイト作成でひと手間かけた積み重ねが、離脱率を抑える要因に繋がります。

できる範囲から少しづつやってみましょう！

■追伸■

メルマガではブログでは言えない、
「えっそんなところまで！？」的な話もしています。

もしあなたがアフィリエイトで本気で稼ぎたいのであれば、
僕のメルマガがきっとあなたの力になれると思います。

いつでも解約する事ができるので、
ぜひ今すぐチェックして下さいね！

＞＞メルマガの詳細はこちらをクリック！＜＜