- 表示高速化
- 更新日:
Webサイトを運営する上で、ページの表示スピードは非常に重要な要素です。
自身がWebサイトを閲覧する際、表示されるまでの読み込み速度が遅いと読む気をなくしたり、場合によっては、表示されるまでに離脱してしまったりすることもあるのではないでしょうか。
これは実際にデータとして検証されており、クリックからWebサイトが表示されるまでの読み込み時間に時間がかかるほど直帰率が上がると言われています。そして、この表示速度は1秒遅くなるだけでも、直帰率に大きな影響を与えます。
その大きな原因として、Webサイト内に挿入している画像サイズが挙げられます。画像サイズが大きいことによってWebサイト全体に負荷がかかり、読み込み速度に悪影響を及ぼしている可能性が高いです。
そこで本記事では、Webサイトに挿入する画像の容量を軽量化するために便利なツールを12つご紹介します。画質を落とさず容量のみを軽量化できるため、本記事を参考に画像の軽量化を試してみてください。
目次
画像の軽量化とは
画像の軽量化とは、その名の通り、画像を軽量化することです。画像の軽量化と聞くと「画質も落ちてしまうのではないか」と心配される方も少なくありません。しかし、その点に関しては画質を保持したまま画像の持つ容量のみを軽量化することが可能です。
画像の軽量化は、画質を下げる以外にも容量の大きい箇所を削減することで軽量化という軽量化している箇所としては、画像に付与されているメタデータなどが挙げられます。
画像軽量化のメリット
画像軽量化により、Webサイトの読み込み速度が早まるという効果があります。冒頭でもお話した通り、表示速度が1秒遅くなるだけでも直帰率が上がります。
- 読み込み時間2秒:9%が離脱
- 読み込み時間5秒:38%が離脱
このように、表示されるまでの時間が3秒を超えた時点で直帰率が上がり、5秒かかると約4倍の38%にまで増えてしまいます。つまり、直帰率を抑えるためにも画像の軽量化は必要不可欠だと言えるでしょう。
また、画像軽量化により、サーバーデータの節約にもなります。Webサイト運営のためにサーバーをレンタルしますが、このサーバーにもストレージに制限があります。
デジカメやスマホで撮影した画像は1枚で相当な容量になっていることが多いため、そのままWebサイトに挿入するとストレージも圧迫してしまいます。ストレージが足りなくなり、大容量プランに変更することがないように、画像軽量化はしておきましょう。
そして、画像軽量化を行うことでSEO対策にもなり、場合によっては売上アップにも繋がります。Webサイトの表示速度が遅いと直帰率が高まりますが、反対に表示速度が早まることで直帰率を下げる効果があります。
直帰率の低減はSEOからも良い評価を受け、さらに表示速度が早まることでユーザーにもストレスを感じさせずにWebサイトを閲覧してもらえるため、ユーザビリティの向上にも繋がります。
特に、LP(ランディングページ)では主に画像で商品訴求を行います。1ページの大半が画像になるため、読み込みに時間がかかります。そこで、画像軽量化することで直帰率を下げ、集客のチャンスを取りこぼすリスクを防げます。
3秒遅くなることで53%も離脱率が高まる
Googleは2017年に、モバイルサイトの読み込みに3秒以上の時間を要する場合、離脱率が53%も高まるというデータを発表しました。上記では表示速度が直帰率と関係している旨を解説しましたが、これは離脱率も例外ではありません。
特に、近年ではモバイル端末からWebサイトやコンテンツを閲覧するユーザーが非常に増えています。画像が軽量化されていないことで、表示スピードの低下や離脱率が悪くなっていまうと、本来獲得できたであろうユーザーを取りこぼすことにも繋がります。
画像の軽量化は地道で手間のかかる作業ではありますが、そのひと手間を加えることで閲覧数やWebサイトの評価は大きく変わるため、必ず毎度行うことを忘れないことが大切です。
画像軽量化ツールのまとめ表
ここからは、後述する画像軽量化ツールの名前と特徴をまとめた表をご紹介します。それぞれ特徴が異なるため、用途に合わせて利用することを検討しましょう。
ツール名 | 特徴 | リンク |
---|---|---|
Optimizilla | 同時に20枚までの軽量化が可能 | 公式サイトはこちら |
Tiny PNG | 圧縮後の画像をDropboxに直接保存できる | 公式サイトはこちら |
Kraken.io(Zipに対応) | クラウド上に保存している画像も軽量化が可能 | 公式サイトはこちら |
ImageRecycle | PDFも軽量化できる | 公式サイトはこちら |
JPEG Optimizer | 画像のリサイズまで適応している | 公式サイトはこちら |
iLoveIMG | 最も有用な軽量化ツール | 公式サイトはこちら |
Squoosh | Googleが推奨する画像軽量化ツール | 公式サイトはこちら |
Recompressor | SVG形式にも対応 | 公式サイトはこちら |
Compressnow | JPGやPNGだけでなくGIFも圧縮できる | 公式サイトはこちら |
mozjpeg | 画質を維持した状態で容量のみを圧縮できる | 公式サイトはこちら |
Photoshop | 画像の作成から可能 | 公式サイトはこちら |
BULK RESIZE | 150枚まで一括で圧縮可能 | 公式サイトはこちら |
画像軽量化おすすめツール12選
ここからは、画像軽量化に使えるおすすめツールを12つ紹介していきます。紹介するツールは以下の通りです。
- Optimizilla
- Tiny PNG
- Kraken.io(Zipに対応)
- ImageRecycle
- JPEG Optimizer
- iLoveIMG
- Squoosh
- Recompressor
- Compressnow
- mozjpeg
- Photoshop
- BULK RESIZE
上記12つのツールについて解説していきます。また、紹介するツールはすべてブラウザに画像をアップロードするだけで画像軽量化できるようになっています。様々なツールを利用して、相性の良いものを選びましょう。
Optimizilla
「Optimizilla」は、同時に20枚まで画像の軽量化が可能です。また、軽量化した画像の画質を保ちつつ、軽量化後の画像を細部まで確認できます。軽量化の度合いまで選ぶことができるため、クオリティを微調整できます。
また、複数の画像を軽量化した場合は、軽量化済のファイルをZip形式でまとめてダウンロードできるため、複数の画像でフォルダを圧迫することがないので便利です。
Tiny PNG
「Tiny PNG」おそらく、もっとも有名かつ定番の画像軽量化ツールです。TinyPNGという名称ではありますが、PNGだけでなくJPGにも対応しています。画像の圧縮率を変更することはできず、自動的に軽量化されます。
5MB以内の画像であれば、1度にまとめて20枚まで圧縮可能です。WordPress用のプラグインもあり、そちらでは月に100枚までの制限がありますが、有料版に課金すれば制限は解除されます。
PNGの透明性を維持した状態で、24ビットから8ビットに減色することで画像を軽量化しています。あくまで減色による軽量化であるため、画質や透明度に大きな影響はありません。圧縮後の画像をDropboxに直接保存できるなど非常に便利なツールです。
Kraken.io(Zipに対応)
「Kraken.io」はクラウド上に保存している画像も軽量化が可能です。GoogleドライブやBox、Dropboxなどのクラウドから直接画像をインポート・アップロードができるうえに、フォルダから一括で複数の画像を軽量化できます。
また、まとめて軽量化した複数ファイルはZip形式でダウンロード可能です。無料版では1MBまでのファイル制限がありますが、有料版では制限が解除され、画像のURLで軽量化ができるなど様々な機能を持ったツールです。
ImageRecycle
「ImageRecycle」は、画像だけでなくPDFも軽量化できるツールとなっています。利用するには会員登録が必要であり、有料版のみしか存在しません。しかし、登録から15日間は無料で利用できるため、試しに利用してみてはいかがでしょうか。
有料だからこそできる機能としては、Webサイト上の画像の軽量化を行う前後の軽減度合いを数値にして分析、分析結果をPDF形式のレポートにして発行してくれることが挙げられます。
画像を軽量化した場合の画質の維持という面では、他のツールの方が優れています。ただし、複数ファイルの軽量化に制限がないため、大量のファイルを軽量化したい場合にこそ効果を発揮するツールです。
JPEG Optimizer
「JPEG Optimizer」は、他の画像軽量化ツール同様に、画像を圧縮して軽量化するためのツールです、しかし、他のツールにはあまりない特徴として、画像のリサイズまで適応しているという点が挙げられます。
リサイズとは、画像の大きさを変更する機能のことを指します。横幅のピクセル数を指定しておくだけで、そのピクセルに対応した縦横比のままサイズだけが変換されます。
ただし、他のツールのように大量のファイルをまとめて軽量化や、クラウド上のファイルを直接アップロードなどはできません。極めてシンプルにローカルフォルダから1枚の画像を軽量化します。
iLoveIMG
「iLoveIMG」は非常に使いやすいUIをしているうえに、機能面も充実している非常に評価の高い画像軽量化ツールです。プランが3パターンあり、有料版もありますが、課金なしでも十分に使えるツールとなっています。
- 未登録の無料版
- 登録済の無料版
- プレミアム版(780円/月)
このような3つのプランがあります。また、このプランによる違いは一括で軽量化できるファイル数や対応可能な画像サイズ・広告表示の有無のみなので有料・無料と問わず、利用できる機能自体に変わりはありません。
- 画像の圧縮
- 画像のサイズ変更
- 画像の切り抜き
- JPGに変換
- JPGから変換
- 写真エディター
- 透かし画像
- ミームジェネレーター
- 画像の回転
これらすべての機能が無料でも使えるため、利便性を考えると頭一つ抜けて優秀です。しかし、無料版の場合は複数ファイルを15枚までしか一括で軽量化できないため、大量の画像を軽量化したい場合には、他のツールを使うことをおすすめします。
Squoosh
「Squoosh」は、Googleが推奨する画像軽量化ツールです。それもそのはず、SquooshはGoogleが開発した画像軽量化ツールとなっており、使い勝手も良いため利用しているユーザーも多いです。
また、ブラウザ上でも利用できるSquooshですが、インストールも可能でWebアプリとして活用することもできます。Webアプリとなっていますが、軽量化の作業はローカル作業であるため、インストールさえしておけばオフライン環境でも軽量化が可能です。
また、画像の圧縮前後の画質を比較しながらの調整が可能です。数値を変更するなどの自動で圧縮される画像軽量化ツールがほとんどですが、Squooshは圧縮後の画像を見ながら仕上がりを調整できます。
つまり、画質をこだわりたい方にこそSquooshは向いていると言えるでしょう。画像を軽量化しつつも細部まで操作可能であるため、画質を重視する場合はSquooshが有効です。ただし、Squooshは複数ファイルを一括して軽量化できないことだけは理解しておきましょう。
Recompressor
「Recompressor」は、SVGファイルにも対応した画像軽量化ツールです。SVGとは画像フォーマットの1つであり、CSSと相性が良いことでも有名です。また、ベクタ形式の画像ファイルでもあるため、拡大や縮小をしても画質が劣化することがなく、地図やアイコン、平面イラストなどで利用されています。
SVG形式の画像ファイルに対応した画像軽量化ツールは数少ないため、SVG形式に対応したツールを探している方はRecompressorを利用してみると良いでしょう。
Compressnow
「Compressnow」は、すでに紹介した画像軽量化ツール同様、複数ファイルを一括で軽量化できたり、圧縮済のファイルをZip形式でダウンロードできたりするなどの基本的な機能はすべて搭載されています。
また、JPGやPNGだけでなくGIFも圧縮できるなど、多機能で使い勝手も良いツールです。さらに、Squooshのように画像の圧縮度合いを0~100%の中から、圧縮後の画像を見ながら画質の調整が可能です。
しかし、多機能ではあるものの、画質を確認するためのプレビュー画面が小さい、圧縮後の形式が元画像の拡張子が維持されずJPGに統一されるなど不便な点も多いため、今後に期待という画像軽量化ツールとなっています。
mozjpeg
「mozjpeg」は、ここまで紹介した画像軽量化ツールとはまったく異なる方法で画像を圧縮して軽量化するツールです。画像軽量化には、少なからず画質を犠牲にして容量を小さくするというものでしたが、mozjpegは画質を維持した状態で容量のみを圧縮します。
そもそもmozjpegとは、現在の画像拡張子の大半を占めるJPGの質をさらに高めようと始動したプロジェクトの名前です。内容としては、JPGの画質を落とすのではなく、エンコードの方式により今までよりも容量を軽減していくというものです。
しかし、2021年現在でも未だに開発途中の段階となっているため実用性はありません。ですが、mozjpegが正式に実装された際には、画質を維持したまま容量を軽減可能というメリットしかないものが誕生するため続報を待ちましょう。
Photoshop
「Photoshop」は、Webサイトやコンテンツで使用できる画像から作成できるツールです。色の変更から複数画像を組み合わせた画像を作れたり、医療や科学など画像解析が必要な分野でも使われたりしています。
Photoshopには「ドロップレット」と呼ばれる機能が搭載されています。ドロップパレットでは、画像の解像度の変更や画像サイズの縮小化が可能です。当然ながら、Photoshopでオリジナル画像を作成し、その画像のサイズをそのまま圧縮することもできます。
また、MacでもWindowsでも一括リネーム機能が搭載されているため、複数の画像を一括で圧縮することも可能です。
BULK RESIZE
「BULK RESIZE」は、画像ファイルをブラウザ上で任意のサイズにリサイズできるWebアプリです。JPEGとPNGに対応しており、Googleが発表した画像フォーマットである「WEBP」もサポートされています。BULK RESIZEでは一括で150枚までの画像をリサイズでき、%指定、幅×高さを指定、ファイルサイズ指定、幅指定、高さ指定、最長の辺指定からリサイズ方法を選べます。
また、BULK RESIZEではエキスパートモードを選択でき、こちらでは画質やバックグラウンドまで指定できるようになります。
リサイズにも軽量化の効果あり
ここまで、画像の軽量化に有用なツールを解説しましたが、画像のリサイズであっても軽量化の効果があります。もちろん使用する画像によって異なることは前提ではありますが、たとえば「1,000×800」の画像を「500×400」にリサイズした場合、後者のほうが画像のサイズが軽量化されるということです。
また、リサイズとは少し異なりますが、WordPressに「EWWW Image Optimizer」と呼ばれるプラグインがあります。こちらは、WordPressにアップロードした画像を自動で軽量化してくれるため、手間をできる限り軽減して軽量化したい方におすすめです。
目的別におすすめの画像軽量化ツール
ここまで、12つの画像軽量化ツールを解説しました。ここでは、下記4つの項目に分けて、おすすめの画像軽量化ツールを紹介します。
- 細かな情報(EXIF情報)を残す
- 複数の画像を圧縮する
- 1枚ずつ圧縮する
- 圧縮+加工をする
それぞれ順番に見ていきましょう。
細かな情報(EXIF情報)を残す
まず、EXIF(エグジフ情報)等の細かな情報を残したい場合は「Kraken.io」がおすすめです。なお、EXIF情報とは位置情報や撮影情報等、デジタルカメラやスマートフォンで撮影した場合に付与される情報のことです。
Kraken.ioではクラウド上から直接画像を圧縮できることに加えて、複数画像をZipファイルにまとめてダウンロードできるため、EXIF情報を残したい場合にに限らず、様々な用途で活躍するツールだと言えるでしょう。
複数の画像を圧縮する
続いて、複数の画像を圧縮したい場合は「Optimizilla」がおすすめです。OptimizillaはPNG形式に対応しているため、比較的画像を軽量化しやすいメリットがあり、またクオリティをアップロード後に調整できるメリットもあります。
したがって、コンテンツに挿入する画像や小規模のブログであれば、Optimizilla1つあれば問題ないと言えるでしょう。
1枚ずつ圧縮する
画像を1枚ずつ圧縮したい場合は「Squoosh」がおすすめです。Googleが推奨している画像軽量化ツールであり、仕上がり前後の画質を比較しながら圧縮できるため、ユーザーからの見られ方も重要視できます。
1枚ずつ圧縮するのは面倒に感じるかもしれませんが、Squooshでは軽量化に加えて画質も調整できるため、より画像全体の質にこだわりたい方にもおすすめです。
圧縮+加工をする
最後に、圧縮+加工をする場合は「iLoveIMG」もしくは「Photoshop」がおすすめです。それぞれの使い分けとしては、Webサイトや記事コンテンツの画像を軽量化したい場合はiLoveIMGを、記事LPやLPに使用する画像を軽量化したい場合はPhotoshopを利用すると良いでしょう。
また、Photoshopでは1から画像を作成できるため、被リンクを獲得する目的で競合と差別化を図った画像を作成し、そのまま軽量化して記事コンテンツで使用してみるのもありでしょう。
Webp画像の使用もおすすめ
ここまでjpgやpngなどの既存の画像形式の軽量化方法をお伝えしてきました。
ただ、そのままのファイルを軽量化するだけでなく、画像のファイル形式をより効率的な形式に変更するという方法もあります。
GoogleのPageSpeed Insightsというサイトの表示速度を計測するツールの改善項目にも上がっている次世代フォーマットの画像形式、というものです。
代表的な画像形式として「Webp」や「AVIF」「JPEG XL」などが挙げられます。
現在最も普及しているのがWebpで、jpgやpngなどとほぼ変わらない感覚で使用でき、画像容量をかなり削減できる可能性があるため、既存の画像をWebpに変更するのもオススメです。
Webpに関しては、以下の記事も参考にしてください。
まとめ:目的別に画像軽量化ツールを使い分けましょう
本記事では、画像軽量化についての概要や、画像軽量化のおすすめツールを紹介しました。紹介しただけでも12つありますが、それ以外にも画像軽量化ツールはたくさんあります。また、ブラウザツールのみを紹介しましたが、スマホアプリなどでも画像軽量化は可能です。
画像軽量化にはユーザビリティの向上だけでなく、SEO対策にもなるということでメリットが非常に大きいです。すでにWebサイトに大量の画像を挿入しているという場合でもWordPressプラグインなどを活用すれば一括で軽量化が可能です。
また、画像軽量化によるWebサイトの読み込み速度、軽量前後で計測しておくことで違いを実感できます。読み込み速度の改善だけで検索順位やCVRが向上することもあるので、紹介したツールを活用して画像軽量化を行ってみてはいかがでしょうか。
なお、CVRの向上が現在の課題、という場合には、こちらの記事も参考にしてみてください。
Webサイト全体の表示スピードを診断!低速ページを一気に検出!
デジタルアイデンティティでは、お客様のWebサイト全体の表示スピードを診断し、低速ページを検出するサービスを提供しています。
主要なページはもちろん、サイト内の全ての低速なページの改善をおこなうことで、SEOやアクセシビリティに好影響があると考えられます。
しかし、サイトの規模が大きくなるほど、すべてのページを手動で診断することは現実的ではありません。
弊社の「低速ページ検出サービス」では、ドメイン内のすべてのURLの表示速度を診断し、低速ページの一覧とともに50項目以上の診断で低速になっている要因を分析。また、ご希望に応じて具体的な改善施策のご提案もいたします!
こんなお悩み、ありませんか?
- サイト内のすべてのページの表示速度を調査したい…
- サイト全体のUI/UX、アクセシビリティを向上させたい…
- サイト全体のSEO対策を強化したい…
- どこから改善をすれば良いかわからない…
様々なWebサイトの高速化を達成してきた技術とノウハウで、貴社サイトを診断いたします!