Note
freepik|@flaticon

JPG・PNGの画質とファイルサイズの関係。実例もあるよ!

限界まで小さく軽く!

こんにちは!ハネジです。

今回はボクがやっているサイト高速化の手法の一つ、画像の最適化についてお話します。

WEBサイトは細かいパーツに別れていて、画像・html・css・javascript などで構成されてますが、その中で通常は画像のファイルサイズが一番が大きいんですね。

ファイルサイズが大きいと、モバイル環境ならパケットの消費量も激しくなってしまいますし、なにより転送に時間がかかります。

なので、画像のファイルサイズを小さくすると、サイトの表示速度が高速化するってわけなんです。

ちなみに画像は適切に圧縮すると、画質をほぼ保ったままファイルサイズをガツンと減らすことができるんですよー。

ではさっそく実例から見ていきしょうか!

スポンサーリンク

JPGの画質とファイルサイズの関係

下記は同じ画像同じピクセルサイズで、ただJPG保存しただけのものと、JPGの画質設定をそれぞれ80%・50%に設定したものです。

画像でみる実例

【1】 860×645px JPGで保存しただけ
ファイルサイズ:388KB

860×645px/JPGで保存しただけのもの

【2】 860×645px JPG 画質80%設定
ファイルサイズ:126KB

860×645px JPG 画質80%設定

【3】 860×645px JPG 画質50%設定
ファイルサイズ:65KB

860×645px JPG 画質50%設定

どうでしょうか?
画質を下げると若干ボヤケているように見えますが、劇的なまでの違いではないですよね。

オリジナルと画質50%設定とでは
ファイルサイズは約6倍違いますが
見た目が6倍違うかというと
そうは見えません。

このように画質をほぼ保ったままでも、ファイルサイズって結構節約できるんですね。

ハネジ
ハネジ

もちろん画質設定をあげればオリジナルに近づくので、バランスの取りようです。

JPGの画質設定とファイルサイズの関係表

今回、上の画像を画質を変えて保存するときに、ファイルサイズを調べてみました。(参考までにPNG形式での結果も載せてあります)

画質設定とファイルサイズの関係表
JPGPNG
1296×972px495 KB2.3 MB
860×645px 画質100%388 KB1.2 MB
860×645px 画質90%187 KB387 KB
860×645px 画質80%126 KB387 KB
860×645px 画質70%95 KB381 KB
860×645px 画質60%78 KB296 KB
860×645px 画質50%65 KB256 KB

もとの画像にもよりますが、画質設定を落とせばかなりファイルサイズを節約できます。

とくに画質80%以下になると、顕著にファイルサイズも小さくなります。見た目がそれほど変わらないところまで、なるべくファイルサイズを小さくしたほうが良いですね。

最適な画像のピクセルサイズを知ろう

ところで、画質設定のほかにもいくつか気をつけたほうが良い箇所があります。一つ目は画像の横幅(横のピクセルサイズ)です。

このサイト「アフィリスキル」の場合、メインカラム幅が860pxなので、アイキャッチのピクセルサイズも横幅860pxがぴったりです。もしそれ以上のピクセルサイズの画像を設定しても、見た目だけがギュッと縮小されて、ファイルサイズは大きいままになっちゃうので、意味がありません。

なので、まずは自分のサイトの必要最低限の横幅を知っておくのが肝心です。

ハネジ
ハネジ

縦幅については横幅を基準に自動的に調整されるので、あまり気にしなくてOKですよー。

最適な画像幅の調べ方

ブラウザで調べる方法

Chromeの場合、画像を設置するエリアを右クリックして、サブメニューから「検証」を選びます。

右側にソースが表示されたら、マウスを上下に動かすと左側のエリアの選択範囲が変わるので、調べたい幅のエリアを探します。

右側のソースのarticleのところにカーソルをあわせると、左側にツールチップ表示で860×10340.7と表示されていますね。この860が横幅です。

ブラウザのプラグインで調べる方法

Page Ruler

ブラウザに「定規」を追加できるプラグインもあります。
ブラウザで表示されているものを測れるので簡単ですが、測るときに微調整が難しいところがあるので、「大体の幅が分かればOK」くらいに考えておいたほうが良いです。

ファイルフォーマットにも注意する

もう一度先程の表をみてみましょう。JPGのとなりにPNGのファイルサイズも書いてありますが、総じてJPGよりPNGのほうがファイルサイズが大きいのがわかりますよね。

画質設定とファイルサイズの関係表
JPGPNG
1296×972px495 KB2.3 MB
860×645px 画質100%388 KB1.2 MB
860×645px 画質90%187 KB387 KB
860×645px 画質80%126 KB387 KB
860×645px 画質70%95 KB381 KB
860×645px 画質60%78 KB296 KB
860×645px 画質50%65 KB256 KB

PNGは精細な表現が得意だったり、透明情報を扱えたり、アニメーションさせることができるなどJPGよりも規格的に高性能です。
また最近のPC・スマホなどの端末だと、カメラで写真や画面キャプチャーを撮った段階でPNGで保存されたりする場合があるので、スタンダードな形式でもあります。

ハネジ
ハネジ
WEBサイトでもバンバン使いたいところなんですが、ファイルサイズが重くなる傾向があるのがネックです。

PNGをJPGに変換するWEBサービス

PNGをJPGに変換するならAPPを使ってもよいですし、ブラウザ上から変換できる無料のWEBサービスもあります。

PNG JPEG 変換。オンライン フリー — Convertio
数秒でPNGをJPEGファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。
オンラインでPNGをJPGに変換
オンラインで様々なPNGをJPGに無料で変換。PNGをJPGに変換するためのオンラインアプリです。

お好みの合わせて使ってみると良いですね!

最近はWEBサイトの表示速度もGooleでの検索結果に反映されてきてるので、やはりファイルサイズは削れるところは削っておいたほうが良さそうです。

ここまでのまとめ

  • 画質を保ったままファイルサイズは縮小できる
  • 最適なピクセルサイズを知っておくとよい
  • PNGはJPGに置き換えることも検討

それほどクオリティ(画質)の必要ない静止画など、PNGじゃなくても問題ない箇所は積極的にJPGに置き換えていけば、ファイルサイズを節約することができますよ。

WEBサイトの運営をはじめると、ついつい画像をふんだんに使ってわかりやすくしたくなりますが、たまには一度立ち止まって「ユーザー目線でページが重すぎないか、もっと軽くできないか」などと考えていくと、訪問者にとって使いやすくリピートしたくなるページになりますよ。

あなたも挑戦してみてくださいね!

あ、そうだ。あとWordpressのプラグインで自動的にファイルサイズを縮小するものもあります。よければこちらも読んでみてください。

PNG・JPGの圧縮なら「EWWW Image Optimizer」が超便利
画像のファイルサイズを削ってWEBサイトの表示速度をあげよう!こんにちは!ハネジです。Wordpressで記事更新していくと、どんどん画像ファイルがサ...

では、今回はこのへんで!

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