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

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

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

色数の多い美しい写真

JPEGで書き出したもの

PNGで書き出したもの

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

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

色数の少ないロゴデータ

JPEGで書き出したもの

PNGで書き出したもの

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

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

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

JPEGで書き出したもの

PNGで書き出したもの

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

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

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

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

LightFile Simulator β版

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

https://simulator.lightfile.net/

最後に

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

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

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