最適なブログ画像形式は?JPGの画像品質とJPG/PNGの使い分け

スポンサーリンク
スポンサーリンク

画像品質トップ

最適なブログ画像形式を調べるため、画像サイズとフォーマットをいろいろ変更して、画像の表示速度を向上させてみました。

webサイトやブログを作る時は、ページの表示速度を考えることも結構重要で、画像の表示速度はその大きな要素のうちの一つです。

スポンサーリンク

ページ表示速度の重要性

webサイトやブログを作る時は、ページの表示速度を考えることも結構重要です。

Googleは、検索順位を決める要素の1つとして、ページの表示速度も考慮すると公式に発表しています。SEO対策の観点から考えると、最近はwebサイトやブログの表示速度にも気を配る必要が出てきました。

でも、SEO以前の問題として、表示に時間のかかるwebサイトって見る気がしませんよね。webサイトへアクセスしたときに、表示が遅くてイライラした経験ってありませんか?

PCで見れば何ということはないwebサイトでも、スマートフォンで見ると表示にやたらと時間がかかるwebサイトってありますよね。そんなwebサイトは、実際に見てもらえる確率がガクンと下がります。

最近はスマホからのアクセスがどんどん増えているので、そちらの対応も考えないといけません。

こちらを見ると、ページ表示速度の重要性がよくわかります。

Screenshot of media.marsdesign.co.jp

0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ | Web制作会社のブログ

上記サイトによると、Amazonではこんな結果が出ているそうです。

  • ページ読み込み時間が0.1秒減ると、売上が1%増加
  • ページ読み込み時間が1秒増えると、コンバージョン数が7%減少
  • ページ読み込み時間が1秒増えると、PVが11%減少
  • ページ読み込み時間が1秒増えると、ユーザーの満足度が16%減少

amazonの2013年度売上高はおおよそ6兆円と見込まれるので、1%の違いは600億円ですね。たった0.1秒がこれだけの違いを生むのです。

とはいえ、我々はamazonではないので、0.1秒にまでこだわる必要はありません。でも、このデータからは、webサイトの表示速度を改善することの大切さがわかっていただけると思います。

この記事に、Webサイトのページ表示速度チェックツールがたくさん紹介されてます。自サイトも一度チェックしてみてはいかがでしょうか。

Screenshot of www.seotemplate.biz

Webサイトのページ表示速度チェックツールまとめ | WP SEOブログ

ページ表示速度の改善 画像サイズとフォーマット変更

では、どうやってページ表示速度を改善すればよいのでしょうか?速いサーバに乗り換える?高速化プラグインを導入する?

いえいえ、もっと簡単な方法があります。まずは自分のウェブサイトに掲載されている画像のサイズを見てください。必要以上に大きなサイズになっていませんか?

先日、とあるサイトのヘッダ画像を見ると、明らかに大きすぎるサイズのものが使われていました。推奨 960px × 250px なのに、その画像は 1999px × 519px という大きさです。 

960px まで縮小すると、サイズは 117k から 59.4k と、おおよそ半分まで軽くなりました。画像の多いサイトなら、こういう見直しだけで表示速度がかなり向上します。

さて、いわしブログでも画像サイズには一応気を使っていたのですが、先日何気なくpng で作成したスクリーンショットの画像を見てみると、明らかにサイズが違っていたのです。

まず、こちらが jpg の画像です。
スクリーンショットjpg

んで、こちらが png の画像。
スクリーンショットpng

一見同じに見えますが、画像サイズは jpg が 46.3k、 png が 7.78kと、何と6倍もの差があります。さらにもう一枚 jpg 画像を掲載します。

スクリーンショットjpg60

一番上の jpg 画像は 46.3k で、この jpg 画像は 13.9k です。同じ jpg 画像でも、サイズは3分の1になりました。下の画像は、保存の際に jpg の画像品質を 60 に落としたのです。

少しアラが目立ちますが、普通に見る分には支障はありません。でも、操作説明などに使う際のスクリーンショットにはちょっと不向きですね。

上の3枚の中で、スクリーンショットに向いているのは真ん中の png 画像です。画質やサイズを考えた上で、実際の画像を見てもらえれば分かると思います。

いわしブログでは、スクリーンショットは今までずっと jpg でした。いやはや・・・

では、再度画像品質100 の jpg 画像と、画像品質60 の jpg 画像を見てください。こちらは画像品質100 の jpg 画像です。我らがアイドル、いわしの画像です(笑)                             

jpg画像画質100

こちらは画像品質60 の jpg 画像です。                                                  

jpg画像品質60                            

スポンサーリンク

ページ表示速度の改善 jpg画像品質の変更

良く見ると、上の画像品質100 のほうがきれいですが、比べなければ違いはわかりませんよね。下の画像品質60 の画像が1枚だけあったとしても、画質に関してはそれほど違和感を感じないと思います。

というわけで、拡大して見せたいぐらいに美しい画像でなければ、jpg の画像品質は落としてもかまわないということです。ちなみに、上の画像品質100 の jpg 画像サイズは 97.4k で、下の画像品質60 の jpg 画像は 15.5k です。サイズは何と6分の1以下です。

画像品質の落とし方は、保存時の設定を変更すればOKです。我が愛用の画像加工ソフト、JTrim を例にして説明します。

まず、上のメニュー「ファイル」から「保存オプション」を選択します。

JTrimでjpg画質の変更方法1

続いて、「保存の数値」を変更します。いわしブログは品質を 60 に設定してます。

JTrimでjpg画質の変更方法2

これで、jpg で画像保存の際は、自動的に画像品質を 60 にしてくれます。

何気なく使っていた画像も、サイズに関してはこれほどの違いがあります。

スマホ使いの方なら、この画像サイズの差が表示時間に大きな影響を与えるということがよくわかると思います。電波状況の悪い梅田の地下街やなんばに行けば一発ですね・・・ (^_^;

画像圧縮ツールを使えば、さらなるサイズ縮小化が図れます。

この「コムテブログ」さんの記事に画像圧縮ツールが山盛り掲載されています。

Screenshot of commte.net

劣化なし!画像を「圧縮、縮小」する無料ツールやフリーソフトまとめ | コムテブログ

JPG/GIF/PNGの使い分けと、それぞれの画像フォーマットの特徴については、こちらの記事がとっても詳しいです。

Screenshot of www.gizmodo.jp

どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。 : ギズモード・ジャパン

wordpressでの画像の扱いについてはここ。

Screenshot of plusblog.jp

今更聞けないJPG・GIF・PNGの使い分けとワードプレス(WP)での運用 | ぷらすぶろぐ

これからのwebサイトへのアクセスは、スマホやタブレットの比率がさらに高まっていくでしょう。そのための対策として、画像サイズとフォーマットの変更はかなり効果があるので、ぜひ試してみてください。

コメント

タイトルとURLをコピーしました