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

  • 2018.11.14
  • 2020.4.10
  • 14,998 Views

みなさんは、Webサイトの読み込みにかかる時間が長くなると、離脱率が上がるという話を聞いたことがありますか?

どれくらい違うかと言えば、ある検証ではページの読み込み時間が2秒までは直帰率は9%ほどですが、3秒を超えると一気に直帰率が増え、5秒になると38%つまり、4倍にまで増えるといいます。

つまり、サイトを運営していく上で、サイトを読み込む時間が長いことは死活問題なのです。

今回は、Webサイトの読み込み速度を上げる方法についてご紹介します!

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

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

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

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

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

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

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

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


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

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

コメント

カテゴリー別記事

サイト改善

数字に基づいた改善で売上を上げる

サイト改善の基本から役立つノウハウまで公開

無料資料ダウンロード

 

【リスマガ限定】出版したばかりの
代表長橋の書籍『第一章』を無料プレゼント!
DX時代のデジタルマーケティング攻略本

YouTubeで企業チャンネルが成功するために実践した施策を公開します。

資料ダウンロード

 

YouTube動画マーケティングがわかる
企業チャンネル最新攻略法

YouTubeで企業チャンネルが成功するために実践した施策を公開します。

資料ダウンロード

 

労務費・外注費・経費を削減して売上アップ
専門チームを外部で育てるラボ型のWebチーム

経費を削減して売り上げアップする方法を無料で公開!

資料ダウンロード

 

見込客と関係性を構築して売上アップする
育成型マーケティング新戦略

見込み客と関係性を構築して売上アップする育成型マーケティング新戦略

資料ダウンロード

MAIL MAGAZINE

最新のマーケティング情報をお届け。
リスプラマガジンでしか手に入らない情報を受け取りましょう。

井上春奈

株式会社リスティングプラス デザイナー プログラマーを経て、デザイナーとしてリスティングプラスに入社。色彩心理学などを駆使した論理的なデザインで、特に美容系のLPで多くの成果を残している。バナーや動画の制作もでもマルチに活躍している。

記事一覧を見る

X

【リスマガ限定】
出版したばかりの書籍『第一章』をプレゼント
DX時代のデジタルマーケティング攻略本

経産省レポート「DXに対応できない企業は業務効率や成長率の低下により競争力を失い、2025年以降最大で年間12兆円の経済損失が生じる」
DXしないと競争力を失う時代に、日本の中小企業がまずすべきことを解説。(無料)

無料で第1章をダウンロードする