【最新版】画像軽量化にオススメの方法5選

みなさんは、Webサイトの読み込みにかかる時間が長くなると、離脱率が上がるという話を聞いたことがありますか? どれくらい違うかと言えば、ある検証ではページの読み込み時間が2秒までは直帰率は9%ほどですが、3秒を超えると一気に直帰率が増え、5秒になると38%つまり、4倍にまで増えるといいます。 つまり、サイトを運営していく上で、サイトを読み込む時間が長いことは死活問題なのです。 今回は、Webサイトの読み込み速度を上げる方法についてご紹介します!

ローディング時間を短くするには画像軽量化が欠かせない

Webサイトの読み込み速度を上げるには、どうすればいいでしょうか。

コードを短くして、画像もなくせば、完璧ですよね。
でも、魅せるサイトを作るにはやっぱり画像は不可欠!しかも高画質で!
魅せるサイト、かつ、軽いサイト、どっちもとりたいとすれば、どうすればいいの?

そんな時に必須になるのが、画像軽量化です。

画像軽量化には、大きく分けて2つの種類があります。ダウンロードしたソフトを使ってやるものと、逆に、画像をアップロードしてネット上でおこなうものです。

今回は、主にネット上でやるものの中で、どのサイトがより効率的に画像軽量化できるのか、どのサイトが一番高画質低圧縮を実現できているのか、各サイトの特徴と出来上がりを、比較検討しながらご紹介したいと思います。

比較検討するための元画像はコチラです。
この画像はPhotoshopで作成、最高画質のJPG圧縮率(12)で書き出したものです。
これを、それぞれの圧縮ソフトにかけた際、何パーセント圧縮でき、画質はどうなのかを検証します。

ちなみに、画像だけじゃなくて時間も圧縮したいあなたにはコチラもおすすめです↓

こんにちは。リスティング広告コンサルタントの高橋です。僕はリスティング広告という、数値データとガッツリ関わるものを仕事にしているからか、データをわかりやすく見せることが重要だなと感じることが多くあります。よく思うんですが、データそのものには意味はなくて、そのデータから"どういった傾向をつかむか"という点が大切ですよね。データから正確に傾向をつかむことが出来ないと、それを元に次の施策を考えることができません。例え考えることが出来ても、施策も的外れなものになる可能性が高くなるでしょう。そ...

こんばんは!現在、炭水化物抜きダイエット実施中の中村です。世の中に炭水化物の入ってない食品って結構少ないですね。正直何食べればいいか悩みます。何かおすすめがあれば是非教えてください。さて、先日とあるお客様から「ランディングページを簡単につくるコツ教えてよ~。 何から手を付けていいのかわかんないんだよね」と言う申し出が、、、「そんなのあればこっちが教えてほしいわ!」と思いましたが、そこで僕がお伝えたのが、この「QUEST(クエスト)フォーミュラ」というテンプレートです。この「QUEST」とは、①...

TinyPNG(TinyJPG)★★★☆☆

お手軽な有名な圧縮サイトの一つです。かわいらしいパンダが目印のサイト。ドラッグ&ドロップ一つで画像軽量化完了。無料版は最大20枚まで同時変換可能。一括ダウンロードもでき、PNGだけではなく、JPEGも同時に画像軽量化が可能です。



1回目の画像軽量化では46%の圧縮に成功。196KBから107KBまでサイズを落とすことができました。

圧縮した分少し粗くなりますが、許容範囲です。圧縮したものをさらに圧縮することもできますが、あまり大きく違いが出ないうえに、画像があれたりするので、お薦めはしません。ちなみに、2段階目の圧縮率は1%でした。

使い勝手はいいので、私も好んで使っていますが、圧縮率がいまいち高くないのに、画像が荒れてしまうことがあるので、★3つです。

TinyPNG(TinyJPG)

compressjpeg★★☆☆☆

ゾウさんのロゴが目印。こちらも特に何も考えずにアプリに放り込むだけで、処理してくれて、結果もなかなかです。

最大20枚まで同時変換可能。JPGまたはJPEGファイルのみ対応です。汎用性がなく、JPGにしか対応していないところが使い勝手が悪いので、★2つです。

画像71%の圧縮。2段階圧縮も試してみましたが、0%の圧縮でした。

compressjpeg

I♡IMG ★★★★☆

画像の圧縮だけではなく、画像のリサイズ、切り抜き、回転、加工など、一括で色々な画像の操作がオンラインでできるサイトです。

JPEG、PNG、GIF対応です。画像圧縮だけではなく、オールマイティにこなせるのが、このサイトの強みかもしれません。




69%の圧縮ができました。2段階目もこちらは結構いきました。40%!

ちなみに、画質はこんな感じです↓

文字とか、イラスト周り、ちょっと荒れてますね。
3段階目だとさらに圧縮率は低く3%。

さきほどのから、さらに圧縮をかけたので、文字もぼやけています。が、細かいところは初めから結構潰れ気味だったため、あまり参考にならないかもしれません。3名の名前が書いてあるブルーの帯部分の画質が荒れているのが気になります。

I♡IMG

Optimizilla ★★★★★

ゴジラ?ワニ?が目印のこのサイトは、JPEG、PNGのみ対応です。画像最適化とファイル圧縮アルゴリズムを組み合わせて、画質を保ったままに、イメージを最小サイズに圧縮する賢いツールです。

Optimizillaは、可能な限りの画像圧縮率かつ画質維持を実現します。仕組みはゾウさんのサイト同じような感じみたいですが、ダウンロード前に画質調整が出来たりして便利です。一度にアップできるのは20ファイルまでです。



今回は73%の圧縮に成功しました。2段階圧縮も試してみましたが、0%の圧縮でした。

Optimizilla

フォトショップ ★★★★☆

最後に、ソフトを持っていないとできない加工ではありますが、フォトショップでの画像の圧縮制御についても説明しておきます。有料。JPEG、PNG、GIF、SVG対応です。

フォトショップは細かく設定できるし、見ながら粗さを調整できるので、画質を落とさずなるべく落とさずに画像軽量化できる点がいいです。

操作も簡単、真ん中のモニタで荒れ具合を見ながら右上のバーで画質の調整をし、左の画面で、画像の重さをモニタリングできます。

元画像が196KBなのに対し、
画質80%だと約100KB(約50%圧縮)
画質60%だと約70KB(約65%圧縮)
画質40%だと約45KB(約77%圧縮)
画質20%だと約35KB(約82%圧縮)
となります。

60%ぐらいが画質が落ちなくていいですが、最悪40~50にしても、大丈夫なものもあります。20%とかだと、さすがにジャギー(階段状のギザギザのこと)がひどいので、この画像だと画質50%(約50KB)ぐらいまでが限界かなと思います。
ちなみに↓は画質20%約35KB(約82%圧縮)のものです。

フォトショップは、さすがに有料だけあって、違う形式へのコンバートも可能です。
有料なので、みんなが使えるわけではないというところと、同時に何ファイルも画像軽量化をできるわけではないというところがネックなので★4つです。
一つ一つを細かく設定して軽量化するのであればおススメです。

まとめ

さて、それでは検証結果をまとめていきましょう。

◆画質………I♡IMGが、圧縮率のわりに少し画像が荒れ気味だけれど、第1段階の画像軽量化作業後の画像比較ではどれもさほど変わらないように画像軽量化することができました。

◆お手軽さ…ネット上のものは大体ドラックアンドドロップで可能。お手軽です。フォトショップだけ多少、手順が必要です。

◆同時変換可能数…大体ネット上の変換は同時20ファイル可能です。有料になるとそれ以上のファイルを同時に変換することも可能になるようです。フォトショップは画像編集用のソフトであるため、1回につき1ファイルのみの変換となります。

◆変換可能種類
フォトショップ……JPEG、PNG、GIF、SVG対応
I♡IMG……JPEG、PNG、GIF
Optimizilla ……JPEG、PNG
TinyPNG……JPEG、PNG
Compressjpeg……JPEG

◆軽量サイズ Optimizilla (TinyPIGの半分程度)

以上の結果から、画像軽量化ということに特化するのであれば、お手軽さ、使いやすさ、圧縮率などを考慮するとOptimizillaが一番いいのではないかと思います。

しかし、今回執筆にあたり、サイト比較するために調べてみて感じたのですが、今まで無料で使えていた画像軽量化サイトが使えなくなっていたり、使えていた機能が使えなくなっていたりするなぁということです。

いつ、Optimizillaが使えなくなるかもわかりませんし、今後も最新情報を追い、より良い方法を見つけていくことはとても重要です。

また、今回はダウンロードして圧縮するものは省き、ネット上で手軽にできるものを中心に比較検討しただけですので、より、高画質で圧縮できるソフトもあるかと思いますので、時間があるときにでも、色々試してみるといいでしょう。

売上を伸ばしビジネスを拡大する方法まで解説

育成型マーケティング新戦略の電子書籍
無料ダウンロード(期間限定)

第1章:コンセプトを作る
第2章:見込客が自ら「ステップアップ」する仕組み
第3章:顧客心理にあったページでアプローチする
第4章:広告で狙った層にメッセージを届ける
第5章:既存顧客のさらなる育成方法

無料で書籍(PDF版)をダウンロードする
育成型マーケティング新戦略

関連記事一覧

獲得したリードを顧客に変え
売上アップに繋げるマーケティング戦略

【期間限定】
無料で電子書籍をダウンロードする

獲得したリードを顧客に変え
売上アップに繋げるマーケティング戦略

【期間限定】
無料で電子書籍をダウンロードする