自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

画像はJPGですか?それともPNG?

画像のファイル形式はjpgがいいのかpngがいいのか…あなたはどうやって決めていますか?

なんとなく写真はJPG形式、透過ありのロゴやアイコンはPNG形式なんていう方は多いのではないでしょうか。あるいはWebセーフカラーならGIFにしている方もいるかもしれませんね。

今更な感じもしますが、モバイルファーストの時代、軽量化をポイントに保存形式について考えてみました。わたしが愛用している画像軽量化サイト「TinyPNG」も紹介します。

[広告]


画像軽量化サイトはいくつかありますが、わたしは手軽で圧縮後の画像も多少陰影部分にモアレが出るくらいで美しいので「TinyPNG」さんを使わせていただいてます。

TinyPNG – Compress PNG images while preserving transparency


使い方は簡単です。圧縮したいJPGかPNG形式の画像を枠内にドラッグ&ドロップするだけ。20ファイルまでまとめてドラッグできますし、加工後の画像を一括でZIPファイルでダウンロードできますので、作業がとても楽です。

レスポンシブデザインのホームページでは使用する画像サイズを表示サイズよりも大きく用意しますので、こういった軽量化の作業の積み重ねで読み込みデータを減らすことが、モバイル閲覧者へのストレス対策としてとても大切です。


さて、デザインをスライスしていって素材として保存する時に、JPGとPNGどちらにするかはケースバイケースではありますが、私の場合はPNGはサイズが大きいので透過があるかないかで振り分けている感じです。またバナーなど文字のある画像や線のあるイラストなど、ピントをキレイに見せたい要素のある画像の場合は、透過がなくてもPNGにすることもあります。


ということで、今回はロゴと写真を例にして、TinyPNGでの圧縮後のサイズでどちらがいいのかなと考えてみました。


■ロゴ

以下3枚の画像を用意しました。JPG、透過なしPNG、透過ありPNGです。

圧縮してみました。結果は大差がつきました。JPGが17.7KB→15.2KBとほとんど減らないのに対して、PNGは透過ありなしに関係なく約60%圧縮し約6KBとなりました。

TinyPNGは、可逆方式のPNG画像をJPG同様の非可逆方式にして軽量化しています。しかし結果を見ると、もとからJPG形式の画像とPNG形式で保存して圧縮した画像では、そのサイズに倍以上の開きができました。

ということは、ロゴやアイコンはPNG形式で保存してTinyPNGで軽量化するのがよいと言えます。透過情報だってちゃんと引き継ぐわけですから、ロゴやアイコンをJPG形式にする必要はもはや皆無!


■写真

以下の可愛いカメの写真を用意しました。JPGとPNGです。可愛いですね。

圧縮してみました。

結果の圧縮率はJPG37%で、PNGは66%と倍近い差が出来ました。しかし元画像のサイズはPNGの方が圧倒的に大きいので、圧縮後のサイズにはJPGが273KBに対してPNGが1.3MBと、JPGに軍配が上がりました。

ただしこちらの画像は、大型ディスプレーのフルサイズ表示をイメージして幅2000pxで用意した大きな画像です。小さい幅500px画像でも検証してみたところ、小さければ圧縮率においては10%ほどしか差は出ませんが、結果的にやはりJPGの方が軽かったです。

ということで、写真素材はJPG形式で保存してTinyPNGで軽量化するのがよいと言えます。

ただ、その写真が作品画像や商品画像などの場合、元サイズが小さいならばあえてTinyPNGで軽量化して画像品質を落とす必要もないと考えます。用途に応じて軽量化するかどうか決めるのが良いでしょう。

[広告]

ホームページのページ数についての考察 ブログTOP Bootstrapコードを速く書く
Hotentry
Blog Post
Archives
クリックして上に戻る