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

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

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

【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】 エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。 非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山! youtu.be/rrUPDBgqHiM

test ツイッターメディア - 【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】
エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。

非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山!
https://t.co/Mo1wvyvEa6 https://t.co/41yEddUGp6

【4月はずーっと #モンスト 月間】ログインオーブがいつもの10倍!オーブが毎日10個、最大200個もらえる!さらに、みんなでマルチをしてもオーブがもらえる!オーブを使っていくと限定キャラ確定のガチャも引けちゃう!?この春もみんなで一緒にモンスト♪ #ズットモ xfl.ag/3qr5CDu

続・グフカスリハビリ配信🤗 Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。 クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。 下格取り回しやすくなった。 でも敵も強くなった❗️ …心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。

test ツイッターメディア - 続・グフカスリハビリ配信🤗
Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。
クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。
下格取り回しやすくなった。

でも敵も強くなった❗️

…心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。 https://t.co/rpL8S5knPf

こないだは嫁氏の誕生日でした🎉 しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝 夜はディジョンのバースデーケーキでお祝い🍰 プレゼントは欲しがってたSwitch🎮 誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍

test ツイッターメディア - こないだは嫁氏の誕生日でした🎉
しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝
夜はディジョンのバースデーケーキでお祝い🍰
プレゼントは欲しがってたSwitch🎮
誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍 https://t.co/5G6URuogF7
希光デザイン事務所
乙街道の管理人はホームページとか作る仕事をしています。
制作依頼やご相談もお気軽にどうぞ。

【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】 エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。 非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山! youtu.be/rrUPDBgqHiM

test ツイッターメディア - 【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】
エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。

非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山!
https://t.co/Mo1wvyvEa6 https://t.co/41yEddUGp6

【4月はずーっと #モンスト 月間】ログインオーブがいつもの10倍!オーブが毎日10個、最大200個もらえる!さらに、みんなでマルチをしてもオーブがもらえる!オーブを使っていくと限定キャラ確定のガチャも引けちゃう!?この春もみんなで一緒にモンスト♪ #ズットモ xfl.ag/3qr5CDu

続・グフカスリハビリ配信🤗 Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。 クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。 下格取り回しやすくなった。 でも敵も強くなった❗️ …心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。

test ツイッターメディア - 続・グフカスリハビリ配信🤗
Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。
クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。
下格取り回しやすくなった。

でも敵も強くなった❗️

…心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。 https://t.co/rpL8S5knPf

こないだは嫁氏の誕生日でした🎉 しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝 夜はディジョンのバースデーケーキでお祝い🍰 プレゼントは欲しがってたSwitch🎮 誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍

test ツイッターメディア - こないだは嫁氏の誕生日でした🎉
しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝
夜はディジョンのバースデーケーキでお祝い🍰
プレゼントは欲しがってたSwitch🎮
誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍 https://t.co/5G6URuogF7