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

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も評価しています。
モバイルフレンドリーかどうか、実のある被リンク多いかなども検索においての優劣判定の基準であったりしますが、表示速度においても優位にたって、よりお客様を囲っていきたいものですね!

この記事を読んだ人はこんな記事も読んでいます

カトリノ

[制作事例]加藤建設株式会社「カトリノ」ホームページ制作

カトリノでは、増え続ける空き家のリノベーション再販事業にも取り組んでいます。

記事を読む

krazysalt

[制作事例]Krazy Saltホームページ公開スタート!

KrazySaltが歌い続けるなら、僕だってその支援のため創りつづけるさ。

記事を読む

NO IMAGE

Myspaceの配置やデザインの編集の研究

今某マイミクさんのMyspaceの配置やデザイン編集を研究中なんです。

記事を読む

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

webデザイナーさんに読んでもらいたい【スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング】とは・・・?

記事を読む

NO IMAGE

最近「イイ!!」と参考にしたいと思ったWEBサイト その2

「簡単に作れて更新しやすい」ってのと「基本に忠実」

記事を読む

NO IMAGE

最近「イイ!!」と参考にしたいと思ったWEBサイト その1

見て損はないと思うので気になった方はアクセスしてみてください。

記事を読む

jpg、png、gif・・・webの画像、どう使い分けるべき?

jpg、png、gif・・・webの画像、どう使い分けるべき?

【jpg】【png】【gif】のそれぞれの画像の形式についての特徴や作成、使用の際の注意点を紹介!

記事を読む

20180912

大容量データも効率よく送信 ファイル転送サービスを活用しよう!

「ファイル転送サービス」。 メールに添付できないような大容量のファイルを相手に送る際に重宝します。

記事を読む

hanabsa

[制作事例]良いバンド「hanabsa」のホームページ制作

僕のhanabsaのおすすめ曲は「海へ行く」「つまりはそういうこと」。好き!

記事を読む

乙街道 ver.2.1.0 アップデート!

気づいた人がいたかもしれませんが数日かけてちびちびやっておりましたw

記事を読む

2024年11月23日
2017年3月26日
2017年2月23日