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

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

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

こないだの叙々苑で食した特選カルビ焼をご覧いただこう。 なんと一人前 5,184円。一枚1,000円w時給かなww とんでもなく美味でした。また食べに行けるように頑張るんだ。 #叙々苑

ツイッターメディア

四街道ふるさとまつりで高校同級生をたまたま発見!! 18年ぶりだってのに全員あんま変わってないw

ツイッターメディア

セカンドストリートでX-girlのワンピが350円だったので、すかさず買ってしまった。次女、なかなか似合うやん!?

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

こないだの叙々苑で食した特選カルビ焼をご覧いただこう。 なんと一人前 5,184円。一枚1,000円w時給かなww とんでもなく美味でした。また食べに行けるように頑張るんだ。 #叙々苑

ツイッターメディア

四街道ふるさとまつりで高校同級生をたまたま発見!! 18年ぶりだってのに全員あんま変わってないw

ツイッターメディア

セカンドストリートでX-girlのワンピが350円だったので、すかさず買ってしまった。次女、なかなか似合うやん!?

ツイッターメディア