今すぐ出来る画像圧縮によるサイト高速化への道

今すぐ出来る画像圧縮によるサイト高速化への道

自分のブログの表示速度って気にされているでしょうか?

Googleが提供しているPageSpeedでSakanaTechの表示速度を確認すると「画像を圧縮しなさい」という指摘があり、ブログの表示速度向上のために今まであまり何もしてこなかったので、コレを機にブログの表示速度について改善をすることにしました。

今すぐ出来る画像圧縮によるサイト高速化への道

わたしのブログは、残念ながら表示までに3秒近く要することが多いです。
本当はサイトを訪れてくださっていた人だったはずが、ページが表示する時間が長すぎて離脱されてしまった方がいます。(きっと)

そもそも、はてなブログは全体的にページの表示速度が遅く、Google PageSpeed Inshightsで見てもいい数字は出にくいですが、それでもやはりページの表示速度を上げるための試作は考えなければなりません。

そんな時に、知ったのが「PhotoshopのWEB用に保存」という機能です。
また、画像の圧縮形式である「ロスレス(LOSSLESS)圧縮」と「ロッシー(LOSSY)圧縮」でした。

この3つの方法を知って、それぞれの違いや結局何が一番速いのか。といったことを調べたのでそのことについて書いていきます。

 

最近、Web業界に入ったのにWeb屋さんの仕事してないなぁと感じている、らいか(id:sakanatech)です。SEっぽい仕事してます。

 

Web用に保存とは

今すぐ出来る画像圧縮によるサイト高速化への道

Adobe Photoshopに搭載されている画像出力機能で、Webで表示するために不要なメタ情報や印刷用解像度などの情報を全て削除して必要最低限の情報だけを保持した形式で画像保存する機能。
出力時に画像解像度やファイル形式などを選択することができ、50%近くファイルを削減できることもある。

 

先輩エンジニアに教えてもらったのですが、「なにそれすげぇー!」としか言葉にならず、知ってからはSakanaTechでは毎回、このWeb用に保存でファイルを保存してから画像をはてなブログにアップロードしていました。

 

ロスレス(LOSSLESS)圧縮とは

可逆圧縮のことを指します。可逆圧縮とは圧縮前のデータに復元が行えるデータ圧縮の方法です。対義語として不可逆圧縮があります。不可逆圧縮については後述します。

また、ロスレス圧縮の名前の通りで、圧縮したからといって画像自体にロス(欠損)は生じません。

 

ロッシー(LOSSY)圧縮とは

上記のロスレス圧縮とは逆に、非可逆圧縮のことを指します。その名の通り圧縮前の形に戻すことが出来ない圧縮方法です。
圧縮前のデータに戻せない代わりに、サイズをコンパクトにすることができます。

こちらも、ロスレス圧縮と同じで圧縮したからといって画像の見え方が荒れるなどの欠損は生じません。
しかし、厳密に生じていないかというとそうでもなく、あくまで人間の目では判別しづらい範囲での圧縮。

ロスレス圧縮とロッシー圧縮は、このサイトで簡単に行なえます。

Free Online Image Optimizer · Kraken.io

 

数字で見る違い

この画像を色々な方法で圧縮してみました。当然見た目には違いがなかったので個別にアップロードはしていませんが圧縮方法と画像サイズで結局何が一番WEBにいいの?ものなのか答えについて探してみます。

今すぐ出来る画像圧縮によるサイト高速化への道
No圧縮方法サイズ圧縮率
1オリジナル87,298 byte
2Web用に保存72,851 byte16.5%
3LOSSLESS圧縮71,256 byte18.3%
4Web+LOSSLESS70,532 byte19.2%
5Web+LOSSY57,765 byte33.8%
6LOSSY57,348 byte34.3%

 

不可逆である分、がっつりと圧縮を行えるLOSSY圧縮で画像作成するのが一番画像の容量を削減出来ることが分かりました。

つまり、Web上に画像を掲載する際はLOSSY圧縮を行ってからアップロードすることでページの高速化が行えるということです。

 

でもちょっと疑問が

そもそも、画像ファイルにおける不可逆圧縮のデメリットって何でしょう?この記事を書く上で色々なサイトで調べていましたが、どの記事でも「不可逆圧縮では戻せないから注意して!」みたいに書いていましたが、Webの世界に放った時点で既に完成した画像なんじゃないでしょうか?

何を今さら元の圧縮前の形式に戻す必要があるんでしょう?

口をそろえてLOSSLESS圧縮を使おう!みたいな感じがあったので疑問に感じました。
答えがわたしの中で出たらまた、記事にします。

 

らいか
サイトの画像をすべてLOSSLESS圧縮してみると、相当なファイル容量削減にもなるので、頑張って時間をかけてでもやってみる方がいいでしょう。画質は変わらないですし。
今すぐ出来る画像圧縮によるサイト高速化への道

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて”Webのものづくりの楽しさ”に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。