稼ぎ方 補足記事 スマホサイト作成 ラボ(研究室)

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

更新日:

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

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

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

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

(中略)

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

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

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

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

 

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

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

png

png画像
(画像引用:wikipedia「Portable Network Graphics」)

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

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

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

 

jpg(jpeg)

jpeg画像
(画像引用:wikipedia「JPEG」)

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

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

 

gif

gif画像
(画像引用:wikipedia「Graphics Interchange Format」)

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

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

 

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

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

 

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

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

 

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

 

■追伸■

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

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

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

>>メルマガの詳細はこちらをクリック!<<


  • この記事を書いた人
ささみりん

ささみりん

準備中ですm(_ _)m

おすすめ記事一覧

初めてアフィリエイトに取り組む時の基本的な手順! 1

アフィリエイトの作業手順は全部で7ステップ! 「初めてアフィリエイトに取り組むけど、何から始めたら良いのかわらない」 もしあなたがそんな風にして悩んでいたのなら、まずは次の様なステップをイメージしてア ...

ペラサイトの作り方!初心者でも分かる手順を解説! 2

※すいません。まだ編集中なんですが、良ければどうぞm(_ _)m 初心者でも簡単にできるペラサイトの作り方! もし初めてアフィリエイトに取り組むのなら、まずはペラサイトから挑戦してみるのがおすすめです ...

アフィリエイトの記事作成で大切な4つのポイント! 3

アフィリエイトの記事作成で悩まずに書くためには? アフィリエイトについての質問で一番よく頂くのが「記事が書けません」と言った内容の質問です。 実は僕も、300文字書くのに1時間以上掛かった時期もあれば ...

no image 4

    ・アフィリエイトで本気で稼ぎたい ・ビジネスに挑戦したいけど何から始めたらいいのか分からない ・自分だってネットビジネスで成功できるはずだ! ・いつかは起業して自分の人生を ...

-稼ぎ方, 補足記事, スマホサイト作成, ラボ(研究室)

Copyright© アフィリエイト初心者におくるブログ , 2018 All Rights Reserved.