【決定版】間違えた方法を選んだら大変!画像軽量化にオススメの方法を紹介

  • 2018.11.14
  • 2022.5.25
  • 16,845 Views

興味のあるサイトを見つけて開こうとしたのに、表示スピードが遅くて閉じてしまった経験はありませんか。

現在は特にスマートフォンでWebページを閲覧するケースが増えており、Googleも検索順位の決定において表示スピードの速さを重要視しています。

ページの表示速度を計測できる『Google PageSpeed Insights』でも画像の改善を求められることが多いでしょう。

そんな時は、画像サイズの軽量化がページスピードを改善する有力な方法となります

画像を軽量化することによってWebサイトの読み込み速度が速くなり、閲覧数の増加やページ経由のコンバージョン数の増加が期待できます。

一方、画像の軽量化について間違えたツールや方法を選択してしまうと、画質が粗くなり、視認性が損なわれる可能性もあります。

一般に多くの軽量化ツールが利用されているため、どのツールを選択すればいいのか・どれでもいいのか分からず困っている方は多いのではないでしょうか?

今回は、よく利用される5つの画像軽量化ツールで比較検証を行いました。
その結果、「画像軽量化」に特化し、その上で手軽さ・使いやすさ・圧縮率を考慮すると弊社ではOptimizilla 』が最も良いと結論付けました。

この記事では「なぜ画像軽量化が必要なのか」という基本的なところから、「各画像軽量化ツールの特性」「目的に応じた画像軽量化ツールの選定」まで紹介していきます。

これさえ読めば目的に応じて最適な画像軽量化ツールを選ぶことができますよ。

潜在層を熱狂的ファンに引上げ、LTVを高める5つの顧客育成フロー
「育成型マーケティング新戦略」無料ダウンロードはこちら>>

高画質低圧縮したいなら『Optimizilla』が最もオススメ

画像軽量化とひとえに言っても数多く存在するツールの中から適当にツールを選び、それによって画質が落ちてしまってはユーザーの視認性も落ちてデザイン性も芳しくなくなってしまいます。

今回は、主にネット上でやるものの中で下記2点の視点をメインに各サイトの特徴と出来上がりを比較検証しました。

①より効率的に画像軽量化できるのか
②一番高画質低圧縮を実現できているのか

比較検討するための元画像はコチラです。

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

その結果、最も手軽に画像を低圧縮できたものが『Optimizilla』でした。
その他にも項目別に検証結果をまとめましたので各ツールの結果をまずは紹介します。

ツールごとの変換対応データと結果概要

変換可能種類

Photoshop ……JPEG、PNG、GIF、SVG対応
I♡IMG ……JPEG、PNG、GIF
Optimizilla ……JPEG、PNG
TinyPNG ……JPEG、PNG
Compressjpeg ……JPEG

画質

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

手軽さ

ネット上のものは大体ドラッグアンドドロップで可能なのでお手軽です。
しかし、Photoshopだけは多少手順が必要なので手軽さには欠ける印象です。

同時変換可能数

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

ツールごとの検証結果詳細報告

各ツールの検証結果を「画質」「圧縮度合い」「利便性」で比較して「★☆☆☆☆」~「★★★★★」の5段階表示で紹介します。

Optimizilla  ★★★★★

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

Optimizillaは、可能な限りの画像圧縮率と画質維持を実現します。

仕組みはゾウさんのサイト(compressjpeg)と似ていますが、ダウンロード前に画質調整が出来るため便利です。
また、一度にアップできるのは20ファイルまでです。

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

Optimizilla 

I♡IMG  ★★★★☆

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

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

1段階目で69%の圧縮ができ、2段階目もこちらは40%さらに圧縮ができました!

ちなみに、画質はこのような感じです↓

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

さきほどのから、さらに圧縮をかけたので、文字もぼやけています。
しかし、細かいところは初めから結構潰れ気味だったため、あまり参考にならないかもしれません。

3名の名前が書いてあるブルーの帯部分の画質が荒れているのが気になります。

I♡IMG 

Photoshop ★★★★☆

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

Photoshopは細かく設定できる上に、見ながら粗さを調整できるので、画質をなるべく落とさずに画像軽量化できる点が評価できます。

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

元画像が196KBなのに対し、

画質80%だと約100KB(約50%圧縮)
画質60%だと約70KB(約65%圧縮)
画質40%だと約45KB(約77%圧縮)
画質20%だと約35KB(約82%圧縮)

となります。

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

ちなみに↓は画質20%約35KB(約82%圧縮)のものです。

Photoshopは、さすがに有料なだけあって、違う形式へのコンバートも可能です。
有料なので、みんなが使えるわけではないというところと、同時に何ファイルも画像軽量化をできるわけではないというところがネックなので★4つです。

一つひとつを細かく設定して軽量化するのであればオススメです。

TinyPNG(TinyJPG)  ★★★☆☆

お手軽で有名な圧縮サイトの1つです。
かわいらしいパンダが目印のサイト。

ドラッグ&ドロップひとつで画像の軽量化が完了できます。
無料版は最大20枚まで同時変換可能で、一括ダウンロードもでき、PNGだけではなく、JPEGも同時に画像軽量化が可能です。

1回目の画像軽量化では46%の圧縮に成功し、196KBから107KBまでサイズを落とすことができました。
圧縮した分少し粗くなりますが、許容範囲と言えるでしょう。

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

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

TinyPNG(TinyJPG) 

compressjpeg  ★★☆☆☆

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

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

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

compressjpeg 

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

Webサイトのローディング時間(読み込み時間)が長くなると、離脱率が上がると言われています。
ローディング時間を短くするための方法の1つが「画像を軽量化すること」です。

画像を軽量化せずに重い状態でページに組み込んでしまうと、なかなか読み込まれずユーザーはしびれを切らして離脱してしまいます。

Webサイト表示に3秒以上かかる場合の離脱率は53%

2017年のGoogleの調査でページ速度が1秒から3秒になると離脱率が32%増加、5秒になると90%増加、6秒になると106%増加、10秒になってしまうと123%増加すると報告がされてういます。

また、表示に3秒以上かかる時点で53%のユーザーが離脱しているとも言われています。

引用:Google『Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed』

上記からも分かるように、ローディング時間が長いことは死活問題です。
ローディング時間を短くするためにも「画像軽量化」は必須事項と捉えておきましょう。

まとめ

画像を軽量化することによってWebサイト読み込み速度が速くなり、ユーザーが見やすい/操作しやすいものを作ることができます。

比較検証の結果、『Optimizilla 』が手軽さ・使いやすさ・圧縮率を考慮すると最も良いと弊社では結論付けました。

また、今回はダウンロードして圧縮するものは省き、ネット上で手軽にできるものを中心に比較検討したに留まります。
他にもより高画質で圧縮できるソフトや、自分にとってはより扱いやすいソフトもあるかと思いますので、是非色々試してみてください。

デジタルアスリート株式会社はトレンドや時代の変化にあわせて、
常に最適なマーケティング戦略を提案します。

最新のマーケティング戦略をまとめたPDF資料はこちらから無料でダウンロードいただけます。
潜在層を熱狂的ファンに引上げ、LTVを高める5つの顧客育成フロー
「育成型マーケティング新戦略」無料ダウンロードはこちら>>

デジタルマーケティングの知見と人脈を深めるコミュニティ

デジタルアスリートCAMPは、各社のデジタルマーケティングに関わる人や経営者、幹部の方が集まり最新の知識や人的交流を促進するコミュニティです。最新のデジタルマーケティングの情報提供や対談、勉強会を通して知見や人脈を深め、実践力を高める事が出来ます。

  • 最新のデジタルマーケティングナレッジの公開
  • 専門家やサービスのレビューと紹介
  • リアル&オンラインの参加者同士の交流

コメント

無料資料ダウンロード

 

1,800社以上の支援実績に裏づけされた
『LPO大全』(実行手順シートつき)

1,800社を支援する中で気づいた『LPO』の重要性と正しい手順・ノウハウを公開します。

資料ダウンロード

 

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

10年間の中小企業支援実績から導くノウハウ、最新の対応策をまとめました。

資料ダウンロード

 

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

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

資料ダウンロード

 

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

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

資料ダウンロード

MAIL MAGAZINE

               

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

青木 萌

デジタルアスリート株式会社
インハウス支援部 次長
前職で販売を経験する中で、もっと広告や販促に関わりたいとの思いが強くなり、株式会社リスティングプラス(現・デジタルアスリート株式会社)に入社。

変化の早いWeb業界ですが、その中でも「ライティング」の重要性は普遍的なもので、「どう書けばユーザーに行動を促せるのか」と考えながら広告やLPを作るのは非常に楽しいです。
自分の作ったもので成果が出て、クライアントから感謝の言葉をもらえたら喜びもひとしおです。
仕事においては前倒しや効率化を考えて取り組めるのですが、家事はなかなかのポンコツで夫にかなり助けてもらっている状態です。
最近はTikTokで美味しそうな料理動画を見つけたら作ってみるようにしていて、家庭でも活躍できるよう奮闘中です!

記事一覧を見る

X

【売れるLPとは?】
1800社以上の支援実績に
裏付けされたLPO大全
CVを増やすLPOのポイントを解説!
初めてのLPOでも大丈夫、リサーチや
コピーライティングですぐに使えるLP改善テンプレート付き!

無料でPDFファイルをダウンロードする