画像の軽量化でWebサイトの表示速度を改善するツールを知ろう

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

アイキャッチ

ホームページを見る際、表示が遅い事が原因で見てもらえなかった、なんて経験のある方がいらっしゃるかと思います。表示が遅い原因がそもそも分からなかったり、どうしたら良いか分からないという方も多いでしょう。今回、画像の軽量化に必要なポイントを確認しつつ、実際に利用すべきツールのご紹介をしたいと思います。

画像の軽量化で表示速度が上がる


画像のファイルサイズは、Webサイトの表示速度を上げるのに重要です。容量の大きい画像をそのままWebサイトに使用すると表示が大幅に遅くなるため、画像の軽量化をしましょう。容量は大きくないと思っている場合でも、大量の画像を使用するWebサイトであれば画像の軽量化が必要になってきます。

 

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

画像の軽量化での速度改善の目安



GoogleのSteve Souder氏が2013年に公表したデータでは、Alexaトップ1000サイトで2012年から2013年におけるWebページのデータ容量は約24%の増加が見られます。インターネットの通信速度は年々上がっていますが、Webページのデータ量も年々上がっているのが実情です。

Webサイトの理想的な表示速度とページ容量とは

2018年7月以降、Webサイトの表示速度は検索結果で上位になるために必要な要素です。質の高いWebページであっても表示速度の改善は必要ですが、具体的に必要な速度の目安が気になるところです。GoogleDevelopersによれば、閲覧したユーザーはWebサイトの表示が0.1秒ですぐに結果が得られたと感じ、0.3秒で少しの遅れを感じ、1秒以上で実行したタスクについて関心を失うとされています。

また、Googleはモバイルサイトを閲覧したユーザーの53%はWebサイトの表示に3秒以上かかると離脱しているという調査結果も出しています。スマホなどのモバイル端末で閲覧する場合、高速な4G回線が使えないユーザーも考慮して、3G回線で離脱しない速度を意識しましょう。Googleによると、Webサイトの容量は1ページあたり1.6MB程度が推奨となっていますので、ページ容量にも注意が必要です。

ツールで画像サイズを軽量化しよう



画像サイズを圧縮するツールは大きく分けると、インストールなしにブラウザ上で実行可能なもの、アプリにより実行するものの2つです。ブラウザ上で実行されるものは手軽である反面、データを外部に送っているため、セキュリティ面でリスクがあります。また、インストール型は対応できるファイルの種類や機能が多い傾向にあります。

おすすめの画像軽量化ツールを紹介

・I♡IMG
WEB上での画像の軽量化ができるサービスです。対応するファイル形式がJPEG、PNG、GIFと豊富で、画像の圧縮だけではなく、リサイズや切り抜き、回転や加工などまとめて作業ができます。例えば、写真を切り抜いた上で圧縮するのに適しています。

・Optimizilla
I♡IMGと同じくWEB上での画像の軽量化ができるサービスですが、対応ファイル数がJPEG、PNGのみで、ファイル形式が対応しているか注意が必要です。最大で20ファイルを同時に、画質を可能な限り維持して圧縮できる事が利点です。圧縮のみ、WEB上での利用では一番良いでしょう。
例えば、元画像が600KBの場合、圧縮後は342KB程度になるなど大幅な画像軽量化が可能です。

・Recompressor
SVGファイルを直接、簡単にオンライン上で画像圧縮して軽量化できるツールです。JPEG、PNGの画像圧縮にも対応しており、異なるファイル形式を同時に一括で処理してくれる点も魅力。
GIF画像には非対応、画像編集はできないので、圧縮専門として使うようにしましょう。

・フォトショップ
有料アプリで誰でも使えるわけではないですが、元々のファイル形式とは別の形式への変換にも対応する高機能さが魅力です。一度に1ファイルのみの軽量化になりますが、画質を細かく設定する事ができるため、ギリギリまで軽量化できる点がメリットになります。

・LINE
コミュニケーションツールとして有名なLINEで送信される際の画像は、実は圧縮されています。自動圧縮の仕様を利用して、手軽に画像圧縮が可能です。スマホで撮影した写真などをPC版LINE宛てに送ることで約5%にまで画像が圧縮され、モバイルサイト向けなど小さく表示する画像であれば画質が気になることはありません。画像データの共有ができる面でも、利用価値は高いでしょう。

Webサイトでの画像軽量化のやり方は簡単

Webサイトでは、4ステップで簡単に画像の軽量化ができます。

1.データサイズの大きい画像を特定する
2.画像軽量化できるWebサイトにて、特定した画像をアップロード
3.アップロードした画像を選択した状態にする
4.ボタンをクリックして処理開始

最後に、ダウンロードした画像をホームページにアップロードして公開すれば、軽量化する以前より早くなったのが実感できるでしょう。

ファイル形式の変更でも画像は軽量化できる

画質の劣化を抑えての画像の軽量化だけではなく、ファイル形式自体を変えることでも画像は軽量化できます。JPEG形式の画像は他のファイル形式よりも軽量で、データサイズが小さいことが特徴です。BMPやPNG、RAWといった高解像度の画像を使用している場合はファイル形式自体を見直すことが画像の軽量化につながるでしょう。特にRAW形式は圧縮が全くされていない画像なので大幅な軽量化が期待できます。

詳しい違いを知り、最適な画像を選ぶのであれば「PNGとJPEGの違いとは?あなたの画像に最適な保存形式を!」という記事を参考にすると良いでしょう。

Exif情報の削除で画像をさらに軽量化

JPEG形式の画像にはExif情報が入っていることがあります。Exif情報とは、撮影時の日付、端末、位置情報などのデータであり、削除することで約10KB前後の画像データの軽量化になります。Exif情報の削除はソフトで一括処理できますので、最後の仕上げに行うようにしましょう。

・ImageOptim
Mac対応の一括処理できるExif情報削除ソフトです。初期状態でExif情報の削除設定がされているので、すぐに処理開始できます。

・Free EXIF Eraser
Windows対応の一括処理できるExif情報削除ソフトです。インストール不要ですぐ使える上、シンプルですので簡単に使いこなせます。

画像の軽量化後は速度も測定しよう



改善後の表示速度の確認が必要ですので、主な計測ツールを紹介します。

1.PageSpeed Insights
Googleが無料で提供している、読み込み速度、ユーザーエクスペリエンスをスコアで診断、修正の必要性を3段階で評価してくれるサイトです。

2.Googleアナリティクス
一部機能を除き、無料で利用可能、サイト速度のレポートでサンプルに設定したページビューの表示時間を計測できます。ブラウザ別、国別など複数の観点から確認が取れることが特徴です。DOM速度という項目ではユーザーが操作可能になるまでの時間も確認できる上、ユーザー設定速度の項目ではクリックなどのユーザー操作の読み込み時間も確認できます。

3.Test My Site
Googleが提供しており、無料で利用できます。モバイルサイトでの読み込み速度の確認ができる他、想定離脱数、業者別平均速度との比較、さらに速度改善の方法の提案をしてくれるサイトです。

4.GTmetrix
英語サイトであるため使いずらい反面、通信環境やブラウザ、国などの設定を入れて速度計測ができるのが利点です。また、スコアでの評価は画像や文章など個別に確認できるため、表示速度低下の原因を特定しやすい特徴があります。

5.Pingdom Website
英語サイトですが、Webサイトの表示速度を計測し、速度を遅くしている原因を特定するのに便利です。ファイルダウンロードの時間や順番に関する速度低下の調査に優れています。

画像の軽量化はツールを見極めよう



画像の軽量化による表示速度改善の重要性、表示速度の目安、使用するツールがお分りいただけたかと思います。軽量化したい画像に合わせてツールを選ぶようにしましょう。

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
ツール
tree