その画像、重過ぎませんか!?ロスレス圧縮のススメ | 乙街道
乙技を求めて クリエイティブな情報

【その画像、重過ぎませんか!?ロスレス圧縮のススメ】

20180829

ホームページを少しでも軽くしたい!少しでも表示を早くしたい!
画面が真っ白のまま進まなかったり、画像や動画がなかなか表示されなかったり。
これではせっかくあなたのホームページに来てくれたお客さまもイライラしたり、他の事を考えてしまい、場合によってはコンテンツさえ見ず帰ってしまうこともあるかもしれません。

ページの最速表示へ向けての解決はホームページを持つあなたにとって非常に重要な課題ですね。

cssファイルをコンパイルしたり、javaをhtmlの後に読み込ませたり、画像を軽いものにしたりと、一つ一つ問題を解決していかなければなりません。
画像の最適化について書いていきたいと思います。

  1. 画像の最適化はロスレス圧縮で
  2. 使い勝手の良いロスレス圧縮ツール
  3. jpgファイルのロスレス圧縮比較
  4. pngファイルのロスレス圧縮比較
  5. さいごに

画像の最適化はロスレス圧縮で

画像データが多いページ、そしてその画像が大きかったり綺麗だったりするとサイズが大きくなってしまいます。
必然と読み込む量も増えるため表示に時間がかかってしまいますよね。

何とかしたい!そこで画像の最適化です。
ここで書く「画像の最適化」は、使っている画像の画質は保ったまま圧縮し、転送容量を減らし、表示させるスピードを速くすることです。
これを可能にするのが「ロスレス圧縮」です。難しい言葉でいうと可逆圧縮(かぎゃくあっしゅく)と言います。圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法を総称して使われています。

「そんなことが可能なの?というか簡単なの?」

はじめは私もそう思いましたが非常に簡単でした。

使い勝手の良いロスレス圧縮ツール

ソフトをダウンロードして立ち上げてやったり等、いろいろ試しましたが、最も使い勝手が良かったのはブラウザ上で画像をアップし、それをロスレス圧縮してもらいダウンロードするというタイプのツール。

TinyPNGというサイトです。

TinyPNG
https://tinypng.com/
20180829_01

このサイトを使用することでソフトをインストールすることもなくブラウザで完結することができます。魅力的!
操作も簡単、デスクトップなどからドラッグアンドドロップするだけ。マルチアップロードも可能です。

では実際にロスレス圧縮の記録をここに残しましょう。

jpgファイルのロスレス圧縮比較

今回のアイキャッチ画像のjpgでやってみたいと思います!

ロスレス圧縮前 20150901b_e.jpg 337 kB 800 × 800
20180829_02

さて、ブラウザにドロップします!

パンパカパーン(音は鳴らないです)
パンダさんも笑顔で祝福してくれました。
20180829_03

な、なんと-80%も削減されました!
ホクホクとロスレス圧縮されたファイルをダウンロードします。
さあどうでしょう。

ロスレス圧縮後 20150901b_e2.jpg 67 kB 800 × 800
20180829_04

すっごい軽くなったけど、画質に問題はない・・・?
2枚並べてみましょう。左がロスレス圧縮前、右がロスレス圧縮後です。

20180829_05 20180829_06

まったく差がありません!大成功ですね!
このロスレス圧縮で270 kBの削減が出来ました。この1枚でこの数字です。
jpg画像をたくさん使用しているホームページでは何百メガと節約できますね!

pngファイルのロスレス圧縮比較

さて、次はpngファイルのロスレス圧縮をかけて、前後の比較をしてみます。
実験ファイルはこれ!

ロスレス圧縮前 sample01.png 374 kB 800 × 800
20180829_07

さて、ブラウザにドロップします!
パンダさんは喜んでくれるのか!?

パンパカパーン!!
20180829_08

なんとこちらも-65%も削減されました!
ダウンロードして出来栄えを見てみます。

ロスレス圧縮後 sample03.png 132 kB 800 × 800
20180829_09

どうでしょう。あまり変わったような気はしませんが。
2枚並べてみましょう。左がロスレス圧縮前、右がロスレス圧縮後です。

20180829_10 20180829_11

違和感ありませんね!

さいごに

快適な表示速度はお客様だけでなくGoogleも評価しています。
モバイルフレンドリーかどうか、実のある被リンク多いかなども検索においての優劣判定の基準であったりしますが、表示速度においても優位にたって、よりお客様を囲っていきたいものですね!

乙街道 twitter

webライティング能力検定1級獲得の次は色彩検定2級。 またひとつ豊かになるために11日、学生たちに交じって受けてきました。 今のwebのお仕事は、資格がお金に直結するからねぇ。 さっき公式から配点付き解答速報出たので自己採点中。 合否の結果は来月。ここも外さず、年を終わらせたい。#色彩検定

ツイッターメディア

外苑前メンキャリ勢と、でっかいヤマ、オツカレサマ会!みんなキラッキラッ!ここ3ヶ月くらい朝から晩まで大変だったね!頑張ったね!お疲れ様でした!

ツイッターメディア

わかりやすいとのことで、何よりです! \(^o^)/ twitter.com/kyocolin148cm/…

そしてこないだは長女の誕生日。 いつの間にか7歳。あっという間な気もするけど、とってもとっても色々あった。一緒にできることも増えて父ちゃんは毎日楽しいよ。 毎週土日が楽しみだよ。その日のために毎日笑顔で頑張れる! さっ!明日も仕事頑張ろう(^q^)

ツイッターメディア

やっとケンタくんそろって、カントー図鑑埋まった! なんだかんだポケモンGOはじめて1年で良く歩いて12kg痩せたw 無課金でここまで遊べたゲームは他に無かった。とても優秀なスマホアプリ! #ポケモンGO

ツイッターメディア
希光デザイン事務所
乙街道の管理人はホームページとか作る仕事をしています。
制作依頼やご相談もお気軽にどうぞ。

webライティング能力検定1級獲得の次は色彩検定2級。 またひとつ豊かになるために11日、学生たちに交じって受けてきました。 今のwebのお仕事は、資格がお金に直結するからねぇ。 さっき公式から配点付き解答速報出たので自己採点中。 合否の結果は来月。ここも外さず、年を終わらせたい。#色彩検定

ツイッターメディア

外苑前メンキャリ勢と、でっかいヤマ、オツカレサマ会!みんなキラッキラッ!ここ3ヶ月くらい朝から晩まで大変だったね!頑張ったね!お疲れ様でした!

ツイッターメディア

わかりやすいとのことで、何よりです! \(^o^)/ twitter.com/kyocolin148cm/…

そしてこないだは長女の誕生日。 いつの間にか7歳。あっという間な気もするけど、とってもとっても色々あった。一緒にできることも増えて父ちゃんは毎日楽しいよ。 毎週土日が楽しみだよ。その日のために毎日笑顔で頑張れる! さっ!明日も仕事頑張ろう(^q^)

ツイッターメディア

やっとケンタくんそろって、カントー図鑑埋まった! なんだかんだポケモンGOはじめて1年で良く歩いて12kg痩せたw 無課金でここまで遊べたゲームは他に無かった。とても優秀なスマホアプリ! #ポケモンGO

ツイッターメディア