Home –  ライフハック – PNG vs. JPG ~間違いを防ぐ6つの助言~

PNG vs. JPG ~間違いを防ぐ6つの助言~


PNG-vs-JPG

TurnKey に面白い記事があったので翻訳して紹介します。

ウェブサイトにとって、ページの読み込み時間は重要な要素です。
Amazon は読み込み時間が 0.1秒増えるごとに、1%利益が減るとも言っています。
また、単純に訪問者は読み込みが遅いウェブサイトは嫌いです。

多くのウェブサイトが最適化されていない画像を使っているせいで速度が遅くなっていました。ウェブサイトを最適化するつもりであるなら、画像を分析して画像について理解すべきです。

私は、ウェブサイト内の画像をすべて、PNG (Portable Network Graphics) フォーマットの画像を使用するというミスをしていました。当然、JPEG (Joint Photographic Experts Group) フォーマットが存在するということも知っていましたが、JPEGにするメリットを理解していませんでした。

PNGは可逆圧縮 (ロスレス) 形式

PNGは可逆圧縮なので、画像品質を落とさずにファイルサイズを圧縮できます。しかし、ほとんどの可逆圧縮した画像の圧縮率はあまりよくありません。しかし、JPGフォーマットなら、同じ画像を人間の目にはわからないくらいの画像劣化でファイルサイズを四分の一になるかもしれません。

JPEGは透過をサポートしてない

JPEGは透過をサポートしてないので、透過させたい場合はPNGを使う場合があります。しかし、PNGの最適化のために時間を浪費するのはやめた方がいいでしょう。PNG最適化のための様々なツールを試してみました。
具体的には、PNGCRUSH や OptiPNG を試してみましたが、3%程度しかファイルサイズは圧縮されませんでした。pngnq は減色することで劇的にファイルサイズを減らすことが出来ましたが、画質の劣化が激しい場合がよくあります。
左から順に、オリジナル、256色に減色、128色に減色、64色に減色した画像です。

結論:JPGと比べ、PNGの最適化は難しい。ウェブデザインと読み込み時間の妥協点を探すのが一番。

解像度を妥協するな、圧縮率を妥協しろ。

ウェブサイトにスクリーンショットを使おうと思い、PNGのサイズを圧縮するために解像度を下げたら、画像が最悪に見にくく読みにくく劣化しました。同じファイルサイズならば、JPGの方は圧縮したとは気づかないくらい高品質にデコードできることに気づきました。つまり、PNG から JPG にするだけで、はるかに良質なスクリーンショットがウェブデザインに使えると言うことです。

編集・複製の元になる画像にはPNGを使え

JPGは非可逆圧縮(不可逆圧縮)形式です。再エンコードするたびに画像品質は劣化します。JPG を何回かエンコードすると人の目で見ても品質の低下がわかります。
この点に関しては、PNGでマスター画像を保持しておくのが最も良いです。

PNGもJPGも、どちらにも強みがある

本当に透過性が必要ならばJPGは使えません。また、小さくてシンプルな画像の場合JPGよりもPNGの方が圧縮率が高いことに気づいてるかもしれません。
PNGに適しているのは、分かれ目のしっかりした線を使った画像です。
JPGに適しているのは、写真などの複雑なグラデーションのある画像です。

PNGからJPGへのバッチ処理は ImageMagick を使う

大量の画像をPNGからJPGに手動で変換するのは、大変なので ImageMagick を使うと良いでしょう。 ImageMagick はコマンドラインで画像操作ができるツールです。これを使うと多くの時間を節約できます。

PNG vs JPG: 6 simple lessons you can learn from our mistakes

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA