[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

[初心者向け]JPEGやPNGに適した画像の特徴を把握すれば、画像最適化はカンタンにできる!ポイントは色数が多いか少ないか!

今回は、Webデザイナーになりたての方のための「JPEGとPNGに適した画像」はどういうものなのか?というのを深掘りしたいと思います。JPEGだけ、PNGだけではなく、それぞれの特性をしっかりと把握すれば、ファイルサイズが半分以下になることもあります。

ポイントは色の数が多いか少ないか。多ければJPEG、少なければPNGがよい。

一般的によく言われるのは、写真のような色数が多いものはJPEGが適している。ロゴやピクトグラム、アイコンなどの色が少ないものはPNGが適している。これは正しい知識です。では、どのぐらいファイルサイズが異なるかみていきましょう。なお、JPEGもPNGも最高画質で書き出しています(Adobe Photoshop CC)。

色数の多い美しい写真

2018-06-13-png-jpeg-01.jpgJPEGで書き出したもの

2018-06-13-png-jpeg-02.pngPNGで書き出したもの

それぞれ遜色のないキレイな風景写真です。ファイルサイズをみていきましょう。

画像ファイルサイズ容量の差
JPEG 241KB 195KB(約45%)軽い
PNG 436KB -

やはり、JPEGのほうが軽い結果になりました。その差は約45%もあり、半分近いファイルサイズになります。写真には、JPEGを積極的に利用していきましょう。

色数の少ないロゴデータ

2018-06-13-png-jpeg-03.jpgJPEGで書き出したもの

2018-06-13-png-jpeg-04.pngPNGで書き出したもの

続いて、色数が少ないベクター系の画像です。今回は弊社のLightFileのロゴタイプを比較に利用してみます。

画像ファイルサイズ容量の差
JPEG 49KB -
PNG 5KB 44KB(約90%)軽い

これは圧倒的にPNGのほうが軽くなりました。なんと、約90%ものファイルサイズの差があります。ロゴデータやアイコンなどのベクター系の画像は、積極的にPNGを利用していきましょう!

背景にグラデーションが敷かれた色数の多いロゴデータ

2018-06-13-png-jpeg-05.jpgJPEGで書き出したもの

2018-06-13-png-jpeg-06.pngPNGで書き出したもの

最後にロゴデータだけど、背景にグラデーションが敷いてあるパターンです。グラデーションは非常に多くの色数を利用してなめらかに表現しています。

画像ファイルサイズ容量の差
JPEG 89KB 5KB(約5%)軽い
PNG 94KB -

やはり色数が多いせいか、JPEGのほうが軽くなっています。しかし、その差はわずか約5%です。JPEGは色数で制御していないので、ウェブサイト全体の背景色となじませたい場合は、色が変化しないPNGで書き出したほうが馴染ませやすいです。

JPEGの最適化・軽量化にはLightFileがおすすめ

JPEG画像はツールを使うことで、さらに軽くすることができます。弊社のLightFileなら、画質をキレイに保ったまま、ファイルサイズを軽くすることが可能です。無料のシミュレータを利用して、どのぐらい軽くなるのか、せひ試してみてください。

LightFile Simulator β版

LightFile Simulator β版

無料で使える画像最適化チェックシミュレータ。チェック結果がレポートになるので、URLを共有すればみんなでみれる。

最後に

いかがでしたでしょうか?せっかく素晴らしい画像も、ファイルサイズが大きくては閲覧者が「待つ」事になってしまいます。プロとして基本的なところは、しっかりと抑えておきましょう。

意外と写真の画像もPNGで書き出ししているウェブサイトをみることがあります。確かにPNGのほうが劣化は少ないかもしれませんが、JPEGの劣化をみわけられるほどの眼力を持っている方はなかなかいません。一般的にはほぼ違いはわからないレベルです。

ファイルサイズが軽くなれば、そのぶん表示は早くなります。まずはその画像の特徴に合わせたファイル種類にすることが重要です。

前へ前へ

上場企業から3,198サイトをLighthouseで監査してみた

次へ次へ

実録Lighthouseのスコア改善〜Performance(ユーザー待ち時間)編