このブログではこれまで、アイキャッチを作る方法や著作権フリー画像サイトの紹介をしてきました。
でも、まだ大切なことを伝えてなかった・・。
実は、画像には種類があるんです。使い分けできてないと、きれいじゃないのに重たい画像をブログに載せてしまうことに。
そこで今回は、サイトで使われる2種類の画像の特徴についてお伝えします。
よく使われるJPGとPNG
ブログで使う画像ファイルは主に2種類あります。
- JPG（ジェイペグ）
- PNG（ピング）
画像ファイルは他にも種類がありますが、使われてるのはほとんど上記2つです。
JPG＝写真向き
JPGは「Joint Photographic Experts Group」の略。JPEGと表記されることもあるので、読み方は「ジェイペグ」となってます。
Photographic という単語が入ってるように、写真に最適なファイル形式です。
JPGの特徴
同じ大きさの写真画像だとPNGよりも容量が軽くなります。画像によっては10分の1の容量になることも。
容量が軽い理由は、人が認知できないくらい細かな色のちがいを省いてるから。
デジカメで撮影した写真って、20年前のものと比べたら格段にきれいになってます。
しかし、ここ2～3年では「よりきれいに撮影できるようになりました！」って言われても、大して変わらないなと感じませんか？
人の目で認識できる範囲は限られてるので、細かい色のちがいを撮影できたところで見た目は変わりません。変わらないどころか、容量が増えてしまうので扱いづらい写真になっちゃうんですよね。
でも、JPGなら人がきれいに見える状態を保ちつつ、容量を抑えてくれるんです。
スマホで撮影した画像もJPG形式になってます。画像の容量が少なければ、スマホへの負担が減りますからね。
写真画像の比較
上：JPG ／ 下：PNG
上のJPG画像は93KB。
下のPNG画像は562KB。
ほとんど同じに見えますよね。これでJPG容量はPNGの「6分の1」なんです。
「写真＝JPG」と覚えてくださいね。
PNG＝イラスト向き
PNGは、「Portable Network Graphics」の略。Web用に作られたファイル形式です。
PNGの特徴
ロゴ・イラスト・グラフなど輪郭をはっきりさせたい画像にも、無数に色が使われてる景色などの写真にも向いてます。滑らかに色が変化していくグラデーションにもぴったり。
JPGは拡大すると劣化が激しいですが、 PNGは画像の大きさを変えても劣化しません。画像サイトでダウンロードできるものなど、大きさを変える画像はPNG形式で用意されてますね。
写真とイラストの両方がきれいに表示される万能なファイル形式なんですが、ひとつ難点が。
それは、写真だと容量が大きくなってしまうこと。
PNGは人の目で認識できない色のちがいも表示させるので、画像が肥大化し、表示速度が遅くなってしまうんですよね。
でも、PNGの場合、イラストやロゴなどはJPGよりもきれいで軽い画像になります。
イラスト画像の比較
上：JPG ／ 下：PNG
上のJPG画像は、色と色の境界線がぼやけてる感じがしませんか？
スマホで見ると分かりにくいかもしれませんが、パソコンで見るとかなりぼやけて見えます。文字の輪郭もぼやっとして、画像の質が悪いと分かってしまいますね。
それに比べて下のPNG画像は、境界線がくっきりしてます。
ちなみに、JPG画像は26.3KBで、PNG画像は19.4KB。PNGの方がきれいで軽いんです。
「イラスト＝PNG 」と覚えてくださいね。
迷ったときはPNGで保存
写真とイラスト半々の画像など、どっちで保存したらいいか困りますよね。
画像の中には、以下のように写真とイラストを組み合わせたものが多くあります。
迷ったときはPNGで保存しておきましょう。PNGの方が、劣化せず軽くなる場合もあるので。
画像ファイルを使い分けよう
今回は、 JPGとPNGそれぞれの特徴についてお伝えしました。
- JPGは写真に最適なファイル形式。
- 写真画像はJPGにすると容量を抑えられる。
- PNGはイラストやロゴなど、輪郭がはっきりした画像に最適なファイル形式。
- PNGは画像の大きさを変えても劣化しない。
画像ファイルを使い分ければ、きれいで軽い画像になります。
ブログが軽くなれば快適に読んでもらえるので、自分のブログの画像を確認してみてくださいね。
JPGとPNGについては「JPGとPNGを見分ける方法」という記事もかいてるので、よかったら読んでみてくださいね。
ではでは。
