PNG?JPG?適切な画像選択と遅延ロードのすすめ

Twitterを見ていたらPNGだと思いからJPGがいいよ~というツイートを見つけました。

誤りツイート

別にただのツイートならつぶやきなのであまり気にする必要は無いのですが、反応が多いツイートだと早めに正しい見解を広めないと誤解が広まってしまいます。

ブログ画像にはPNG、JPGどちらが良いのか?

基本的には下記を覚えておけば良いです。

  • イラスト画像にはPNG
  • 写真画像にはJPG又はJPEG
  • 背景透過画像にはPNG
JPEG・PNG・GIFの違いとは?広告運用者も知っておきたい、最適な画像ファイル形式の選び方|アナグラム株式会社
みなさんは広告の入稿で使用したり、ウェブサイトで閲覧している画像ファイルの形式についてどの程度ご存知でしょうか?Googleによればインターネットの画像トラフィックの96%は「JPEG」「PNG」「G…
画像を最適化する  |  PageSpeed Insights  |  Google Developers

ウェブへ掲載する画像は全て圧縮処理を

最適な画像に出力した画像は必ず圧縮処理をしましょう。圧縮処理をすると50%から80%ほど、画像ファイルのサイズを小さくすることができます。

素人が作ったサイトや昔からあるHTMLサイトに多いのは、ピクセル数が大きいサイズの画像をCSSで画面のレイアウトサイズに合うように強引に小さく表示しているケース。本来小さい画像で十分なのに、わざわざ大きな画像をブラウザに読み込ませて表示速度を遅くするパターンです。

TinyPNG等の無料サービスやWordPressプラグインもあります。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

私のオススメは一部無料ですがShortpixel、他の画像圧縮より更に圧縮率が高いのが魅力。当ブログでも使用しています。

有料版契約の際は通常契約より優位なプランを紹介できるので契約前にコメントでご連絡ください

ShortPixel Image Optimizer
Speed up your website and boost your SEO by compressing old & new images and PDFs. Compatible with any gallery, slider or ecommerce plugin.

画像は遅延ロードを活用しよう

遅延ロードとは、その名の通りウェブサイト上の画像表示タイミングを遅らせる(正しくはブラウザで表示範囲内の画像のみ読み込む)処理方法で幅広く利用されてますが、まだ知らない人もいます。

例えば画像が10枚掲載されているブログ記事があるとします。

サイトは縦長になりますので、最初に閲覧者がページを開いたら見える画像は2枚~3枚程度。

遅延ロードをしてないと、この10枚の画像が表示されてないのに、10枚全ての画像データを事前に読み込んでしまいます。

遅延ロードが有効な場合だと、最初に表示される2枚~3枚の画像データのみ読み込まれ、ページスクロールする段階で残りの画像が段階的に読み込まれます。

ここにページ表示速度において大きな差が生まれます。スマホ閲覧者は2秒を超えると離脱傾向にあるのでサイト運営者は余計なデータを読み込ませない事が大切です

遅延ロードはWordPressだとプラグインを入れるだけで使えるほど簡単なので、まだ設定してない人は今直ぐ活用しましょう。

a3 Lazy Load
Use a3 Lazy Load for images, videos, iframes. Instantly improve your sites load time and dramatically improve site users experience.

番外編:遅延ロードはiframeや動画にも使える

上記の遅延ロードプラグインは実は画像だけではなくiframeや埋め込み動画にも使えます。YouTubeを貼り付けたら表示速度が遅くなった、と悩んでいる方にもおすすめです。

まとめ

下記を覚えておけば遅いサイトから脱却できる一歩になります。

  • イラスト画像にはPNG
  • 写真画像にはJPG又はJPEG
  • 背景透過画像にはPNG
  • 画像は全て圧縮する
  • 画像は遅延ロードを活用する

誤ったツイートをされている方はプロではありませんし、個人の見解なので仕方ありません。

ただツイート内容は鵜呑みにせず、先ず調べる事です。

ちなみにPNG、JPGの違いや向き不向きはググれば直ぐ解説記事が見つかります。

インターネットの基本はググレカス、なのでググる癖をつけましょう。

コメント

  1. ググってこのサイトに来てるのにググる癖つけろなんて言われたらちょっとイラつく

    • 逆にググるとこの記事よりも濃い記事が見つかるというオチがw