ウェブサイト上の画像を圧縮して表示速度の向上を図る

何か調べ物をしていて、検索結果から気になるウェブサイトへ飛んだとき。なかなか画面が表示されず真っ白だと、すぐ諦めて次の検索結果をクリックしますよね?

ウェブサイトを訪れた後でも、ページを移動するたびに待たされてしまうと、次第に面倒になって止めてしまうことも多いのではないでしょうか。

士業事務所のウェブサイトにおいても、訪問者に相談や問い合わせとい最後のアクションまで行き着いてもらうために、ウェブサイトの表示速度は大事です。他人のウェブサイトだと表示速度の遅さ(ウェブサイトの重さ)が凄く気になるのに、自分のウェブサイトだと意外とのんびり待てることも多いので、自分基準になっていないか注意が必要なところでもあります。

ウェブサイトの表示速度の計測

ウェブサイトの表示速度については色々なサービスで計測が可能ですが、一番簡単なものの一つがGoogleのPageSpeed insightsです。

https://developers.google.com/speed/pagespeed/insights/

psi

URL入力欄に貴事務所ウェブサイトのURLを入力し、水色の「分析」ボタンを押したら1分程度で計測完了です。

モバイルでの表示速度とパソコンでの表示速度、いずれも採点と修正提案が表示されます。

JavaScriptやキャッシュを利用しての表示速度向上も効果的なのですが、実装するのにスキルが必要な部分でもあります。そこで、今回は比較的簡単に改善が可能な「画像圧縮による最適化」を行ってみることにします。

ウェブサイトで使用する画像データの圧縮

ウェブサイトを構成するデータのうち、画像データは比較的大きな容量を占めます。特にディスプレイの大型化が進んだ昨今、訪問者の目を引くために大型の画像を配置するケースも増えています。

この画像データを圧縮して容量を小さくすることは、ウェブサイトの表示速度向上に繋がることも多いです。

先ほどのPageSpeed Insightsでも、「画像を最適化する」という項目の「修正方法を表示」をクリックすると、一定の画像に対して圧縮して容量を小さくするようアドバイスが表示されます。

このアドバイス通りに画像を圧縮していくのでもよいですし、貴事務所のウェブサイトを見たとき、大きなサイズで配置されているものや、複数箇所で何度も表示されている汎用性のある画像などから圧縮を図るのもいいと思います。

画像の圧縮方法

画像データの圧縮も様々な方法がありますが、ここもウェブ上から簡単に利用できるTiny PNGといサービスを紹介します。

https://tinypng.com/

使い方はもの凄く簡単で、上の「Drop Your .png or .jpg files here!」と書かれた箇所にPNG画像ファイルまたはJPG画像ファイルを放り込むだけです。単一画像ファイルごとの作業だけでなく、複数画像ファイルをまとめて放り込んでの圧縮も可能です。

たとえばこの女性の画像をTinyPNGに放り込むと・・・

51.8KBだった画像ファイルサイズが、半分以下の25.2KBまで圧縮されます。(圧縮率は画像によって異なります)

圧縮後の画像も、見た目には違いが分からないのではないでしょうか。

woman_panda

場合によっては、圧縮した画像ファイルをさらにTinyPNGへ放り込み、再圧縮をかけるとより小さなサイズになってウェブサイトの軽量化が図れます。

今回は2回目で21KBまで圧縮されました。元の半分以下の容量まで減ったことになりますが、見た目では違いがほとんど分からないですよね。

これは小さな画像を圧縮した例ですが、大型の画像ほど圧縮でのサイズ削減の効果が期待できます。ウェブサイトのヘッダー画像などで大きく使っている画像は、圧縮をかけた後で入れ替えてみて、あらためてPageSpeed Insightsで計測しなおしてみると違いが現れることも。

プロフィール写真を大型サイズでそのまま使うデメリット

士業さんのウェブサイトでの「あるある」としては、プロフィール写真をプロのカメラマン等に撮ってもらって、そのデータをそのままウェブサイトのプロフィール写真として使うとき、サイズ変更していないので実際のファイルサイズがもの凄く大きいというケースがよくあります。

ウェブサイトに表示されているサイズは小さいので気がつかないのですが、実はそれがもの凄く大きなサイズの写真が無理矢理縮小表示されているため、ウェブサイト全体の表示速度の低下を招いてしまいます。たとえば下の風景写真は見た目は小さいサイズですが、右クリックで「画像だけを表示」「新しいタブで画像を開く」などして画像のみの表示にすると、実際はかなり大きなサイズであることが分かるかと思います。

士業さんのウェブサイトで使われているプロフィール写真も、意外とこのような縮小表示になっているだけのことが多いので、この場合にはプロフィール写真の表示で大幅なタイムロスになってしまうこともあります。

以上、今回はウェブサイトの表示速度の改善のうち、画像圧縮に関してでした。ウェブサイトが重い要因としては、そもそも使っているサーバー自体の処理速度が芳しくなく、全体的に重くなってしまっていることも多いです。これは営業ツールである士業さんのウェブサイトとしてはかなり痛い状況だと思うので、レンタルサーバーについてはまた別の記事で詳しく触れる予定です。

WAMO

士業のウェブサイト制作・活用アドバイザー。これまで制作に携わった士業ウェブサイトは、行政書士、司法書士、社会保険労務士、税理士、弁護士、建築士、土地家屋調査士等380件以上。神奈川県横浜市在住。

関連記事

Feedlyで最新情報を確認

ページ上部へ戻る