[PR] Googleが開発した新しい画像フォーマット WebP (ウェッピー)、WebP導入シュミレータで今すぐチェック!

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

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

【送料無料】【DAYTONA/デイトナ】ハイパフォーマンスバッテリーDYTX14-BS_okrjs RE4]

一般的によく言われるのは、写真のような色数が多いものはJPEGが適している。ロゴやピクトグラム、アイコンなどの色が少ないものはPNGが適している TGR TECHNIX GEAR TGRテクニクスギア ホイール本体 TYPE-R SuperMotard(スーパーモタード)用ホイール (R単体) ニップルカラー:オレンジ ハブカラー:ブラック リムサイズ:リア 4.5-17インチ。これは正しい知識です。では、どのぐらいファイルサイズが異なるかみていきましょう。なお、JPEGもPNGも最高画質で書き出しています(Adobe Photoshop CC)。

色数の多い美しい写真

JPEGで書き出したもの

PNGで書き出したもの

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

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

色数の少ないロゴデータ

JPEGで書き出したもの

PNGで書き出したもの

続いて、色数が少ないベクター系の画像です ディクセル ブレーキローター PD(プレーンディスク) フロント左右セット シビック EK4 3312759 DIXCEL ディスクローター ブレーキディスク【店頭受取対応商品】。今回は弊社のLightFileのロゴタイプを比較に利用してみます。

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

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

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

JPEGで書き出したもの

PNGで書き出したもの

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

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

【送料無料】【DAYTONA/デイトナ】ハイパフォーマンスバッテリーDYTX14-BS_okrjs 【送料無料】【DAYTONA/デイトナ】ハイパフォーマンスバッテリーDYTX14-BS_okrjs

JPEG画像はツールを使うことで、さらに軽くすることができます。弊社のLightFileなら、画質をキレイに保ったまま、ファイルサイズを軽くすることが可能です 15インチN ONEJG系WORK エモーション T7R アッシュドチタン 5.0Jx15SINCERA SN832i 165/55R15 。無料のシミュレータを利用して、どのぐらい軽くなるのか、せひ試してみてください。

LightFile Simulator β版

無料で使える画像最適化チェックシミュレータ 【ekスペース ダウンサス】B11A 14/2~ 3B20 RG/レーシングギア (SN037A。チェック結果がレポートになるので、URLを共有すればみんなでみれる。

https://simulator.lightfile.net/

最後に

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

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

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

フォローしませんか?

この記事の筆者

グロースハッカー能勢

ウェブサイトやウェブサービスの成長請負人です。グロース手法を日々探して、どうやって数字を上げていくのかに情熱を注いでいます。数字を追いかけつつ、技術面の勉強を怠らず、ビジュアル面にもこだわり、ユーザー満足度も向上させたい NASSERT(ナサート) Evolution Type2 T-2 フルエキゾーストマフラー ステンブラック(JMCA認定) BEET(ビート) Z1000(14年)。ということで、毎日がんばってます。飲みものはビール、食べ物はそば。デザートはショートケーキ。
担当サービス 画像最適化ツール LightFile
画像ファイルサイズ容量の差
JPEG 89KB 5KB(約5%)軽い
PNG 94KB -