画像をさらに圧縮して、ページ全体の軽量化を図るメリット
ホームページの大部分が写真やグラフィックといった画像ファイルになります。これは画像を埋め込んだ方が、デザインが伝わるからです。
画像を多用すればその分1ページ全体のファイル容量が膨らみます。
中でも透過値を持つPNGファイルはとても便利で、重なり合わせたレイアウトを作成するときに重宝するとっても便利なヤツなんです。
でもJPGと違い透過を持つので、JPGと比べるとファイル容量が大きくなる厄介なヤツでもあります・・・
透過GIFなんて画像ファイルもありますが、あれは画像が荒れて汚くなってしまいます。
でもPNGはJPGの様な鮮明さに透過が付くので、綺麗な画像を作ることができるんですよね。
このPNGファイル、IE6が主流の時代はブラウザでうまく表示されなかったのであまり使われませんでした。
PNGを表示させるためだけにJavascriptを読み込ませていたのが懐かしいです・・・
今のブラウザは対応が済んでいるので簡単に貼り付けて使う事ができるので、更に便利に、気軽に使うシーンが増えたんじゃないでしょうか。
PNGはJPGと違い圧縮率を変えられない
グラフィックソフトで画像を書き出す時、JPGであれば画像の圧縮率をパーセンテージ(%)で指定する事ができますが、PNGにはありません。
あっても、透過値を持たせる・持たせない程度で、書き出してみると予想以上にファイル容量が大きかったなんてことはありませんか?
画像を重なり合わせたい時になにかと便利なPNGファイルですが、便利だからといって多用しすぎるとページ全体のファイル容量が増えてしまい、ページの表示に時間がかかってしまいます。
なので極力使用を控えるようにしましょう・・・とは言ってもとても便利なのがPNGですよね。
そんなときはPNGを圧縮してしまいましょう!!
「PNGは圧縮率を変えられないのでできないよ」と思っていませんか、実は外部サービスで良いのがあるんです!!
それがこちら「オンラインイメージ最適化ツール(http://optimizilla.com/ja/)」です。
使い方は簡単。
作成したPNGファイルをドラッグしてアップロード、圧縮後にダウンロードするだけ
たったこれだけの作業でファイルが70%以上も圧縮できる場合があります!!!
重たいPNGファイルも圧縮して使えるのでとても便利です。しかも無料ですよ!
これは使わない理由がありません!!
私もホームページをデザイン・作成していくうえでPNGを使いたい場面がよくるので、重宝しています。
でも圧縮すると画質が気になりませんか?
実はそんな心配は無用です!!
圧縮前後がわからないくらい鮮明に出してくれるので凄くいいサービスです。
実際に圧縮してみましょう!
どうですか!
圧縮前後では見た目に違いがありませんよね?
でもファイル容量は約3割も減らすことができました。
画像を圧縮する事でページ表示に必要となるファイル容量を減らせるので、表示速度が上がる
1ページを表示するのに必要になるファイル容量が減るので、表示速度を早くすることができます。
また最近ではスマートフォンなどのモバイル端末を使ってホームページを見る方が増えました。
皆さんもご存知の通り、データ通信の容量が契約によって異なります。上限値を超えると制限が入って回線速度が極端に落ちてしまうので、見てくれる方にも配慮して画像を圧縮して全体のデータ容量を下げるようにしてみてください。
まとめ
・画像ファイルを圧縮してページ全体のファイル容量を下げよう
・オンラインイメージ最適化ツール(http://optimizilla.com/ja/)を使う事で簡単にファイル容量を下げることができる
・圧縮しても見た目にそれほど変化は起こらない
・モバイル端末を使って見ている人に配慮するという面から見ても、ファイル圧縮は有効的