【特集】WordPress高速化への挑戦!

WordPress高速化のための最適なJPEG/PNG/GIF使い分けはこれだ!!

イケメンにフィッシュオン!

WordPressブログを高速にするため、いろいろと調べながら取り組んでいます。

サイトの読み込みが遅くなる大きな要因の1つに画像があります。

画像は大きなサイズになりますので、これがボトルネックになることは

容易に想像できますね。

 

Googleからも画像フォーマットの使い分けについて推奨があるようですので

その内容をふまえつつ、考察してみたいと思います。

ブログの画像フォーマットはJPEGが基本

WordPressに限った話ではないしょうが、

ブログやサイトに使う画像フォーマットはJPEGが基本になります。

その理由は

  • 画像サイズを最も小さくできる
  • 十分な画質を得られる
  • JPEGをサポートしないブラウザはない(だろう)

 

一般的に画像フォーマットとして、JPEG、PNG、GIF、BMPがあります。

BMPを使うことはないでしょうから、残り3つを使うことになるでしょう。

 

同じ画像でPNGとJPEGのフォーマットであれば

JPEGの方が圧倒的に小さいサイズになります。

こういった理由から画像サイズが最も小さいとしています。

画質について考える

PNGとJPEGとでは、PNGの方が画質が良いです。

もちろん綺麗な方が見栄えがいいのですが、

サイトの読み込み速度とのトレードオフになります。

 

つまり、読み込み速度と画質の良さは相反するものであるため

どちらかを取らないといけないということです。

 

では、ブログで使う画像に対して、どこまで画質を求める必要があるのでしょうか。

写真ギャラリーのように画像がキレイであることに価値がある画像は

最大限に画質を求めるべきでしょう。

それがサイトの価値にも直結するからです。

 

一方で、当サイトのように情報を伝えることを目的として使う画像には

画質は求められないでしょう。

伝えたいことが伝わる程度の画質があれば十分です。

 

言葉で説明するよりも絵を見せたが方が伝わりやすい場合は

画像を使いますが、文字や絵の情報が伝われば

その目的を果たすことができます。

こういう場合は、画質を落としてサイズを小さくすることを優先して良いのです。

【広告】

ブログで必要な画像サイズ

画像のサイズも小さいほどファイルサイズを小さくします。

ブログで使うの画像は横幅が720px程度あれば十分です。

コンテンツエリアはどんなに大きくても1,000pxくらいしかないはずですから。

 

文字がつぶれて読みにくいとか

特殊な事情があれば別ですが、基本的には720pxの大きさに抑えて

問題ないでしょう。

 

画像サイズを720pxまでにして、JPEGを使い、さらに圧縮をかければ

ファイル1つは、せいぜい数十KBくらいに抑えられます。

これだけ小さくしておけば、サイトは非常にサクサクと高速に表示されるでしょう。

Googleの見解

最後にGoogleが推奨する画像フォーマットの使い分けについて

見ておきましょう。

画像にどのフォーマットが最適かテストしてください。主な推奨事項は次のとおりです:

  • 一部の旧バージョンのブラウザでは PNG を部分的にしかサポートしていない場合がありますが、PNG はほとんどの場合、GIF より優れています。
  • 非常に小さなグラフィックや単純なグラフィック(10×10 ピクセル未満、3 色未満のカラー パレットなど)、アニメーションを含む画像には、GIF を使用します。
  • 写真スタイルの画像にはすべて JPG を使用します。
  • BMP や TIFF は使用しないでください。

Googleの公式ツールであるPageSpeed Insightsに書かれていますので、

Googleの見解と理解して述べますが、

基本的にはJPEGを使用するようにと書いています。

GIFはアニメーションという特別な用途、また小さいサイズの画像に使うと明記されています。

BMPは、使わないで下さいとあります。

 

Googleの推奨事項を見ても、JPEGを基本として使うことは間違っていないようです。

PNGを使うかは画像の目的によって決めればよいですね。

まとめ

ブログを高速化するための画像の使い方に注目してみました。

画像はたくさん使うでしょうから、最適なフォーマットで最適なサイズ、

最適な圧縮処理をしてから使うことが大事です。

 

最適な圧縮については、EWWW Image Optimizerプラグインを使えばよいです。

こちらに詳しい使い方を書いていますので参考にしてください。

 icon-external-link WordPress高速化!全画像を一括圧縮するEWWW Image Optimizerの使い方!!

【広告】

関連記事

  1. ランタンを見つめる文学美女

    WordPress最適化をした結果PageSpeed Insightsスコアはどう変化したのか!?

  2. 休日を読書で過ごす女性

    ブラウザのキャッシュを活用する-たったの5分で改善する方法!!

  3. ごめん、待たせちゃった・・・

    deflateを使用してリソースを圧縮する方法!WordPressが劇的に高速化!!

  4. SNSで流れてきた商品をポチろうか悩んでいる女子

    ブログの表示速度を遅くしないための広告の貼り方とは!?

  5. 目を閉じるたびに思い出す

    PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

WordPressテーマ「SKIN(TCD046)」

人気記事

  1. 目を閉じるたびに思い出す
  2. はい、正解は私でした
  3. 休日を読書で過ごす女性
  4. ごめん、待たせちゃった・・・
  5. 指をさすビジネスウーマン
  6. イケメンにフィッシュオン!
  7. 「いいね!」するビジネスウーマン
  8. 「問い合わせ先はコチラ!」と告知する地方局のアナウンサー
  9. スマホで健康管理を行う意識の高い女性
  10. すべてを許したくなるエンジェル笑顔

広告




おすすめ記事

  1. メモを取る女性 お名前.comからエックスサーバーへのドメイン移管手続き備忘録
  2. すべてを許したくなるエンジェル笑顔 WordPressで投稿済みの記事を一括置換できるSearch Regexの使い…
  3. 「OK、そういうこと!」と締めくくるキラキラ女子 賢威7を使ってココが良かったと思う3つのこと(投稿画面編)
  4. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  5. はい、正解は私でした 賢威7サイトタイトルとトップページタイトルの違いを易しく説明します!!
  6. ランタンを見つめる文学美女 WordPress最適化をした結果PageSpeed Insightsスコアはど…
  7. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…

特集記事

  1. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  2. 「いいね!」するビジネスウーマン WordPress高速化!全画像を一括圧縮するEWWW Image Optimi…
  3. イケメンにフィッシュオン! WordPress高速化のための最適なJPEG/PNG/GIF使い分けはこれだ!…
  4. 指をさすビジネスウーマン HTML・JavaScript・CSSを縮小するAutoptimizeの使い方と…
  5. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
  6. 休日を読書で過ごす女性 ブラウザのキャッシュを活用する-たったの5分で改善する方法!!
  7. ごめん、待たせちゃった・・・ deflateを使用してリソースを圧縮する方法!WordPressが劇的に高速化…
PAGE TOP