営業用としてウェブサイト（ホームページ）を活用するとき、表示速度が成否の大きな分かれ目になる可能性があることについては、既に触れました。
表示速度については使うサーバーの処理能力以外にも、ページに配置する画像サイズ（縦横の大きさではなく、KBやMBなどで表されるデーターの大きさのことです）が影響してくることもあります。
写真の見た目を変えずに軽量化する
文字データなら、長文になってもデータ容量的には大したことがないのですが、画像データは結構な容量を食います。重い画像が原因となって、ウェブサイトがなかなか表示されないという状況も起こりがち。
そこで、士業事務所のウェブサイトでは特に大きな画像サイズになりやすいヘッダー内のメイン画像や、各ページで必ず表示される問い合わせバナーなどの共通部品については、軽量化しておくと表示速度の改善に役立ちます。
方法はいくつかありますが、ここではパソコン用のソフトで画像を保存する際にデータ容量を下げる方法と、ウェブで簡単に画像の圧縮ができるサービスを紹介します。
ソフトを使った画像の軽量化
JPG形式の写真をそのままウェブサイトに配置するなら、画像ソフトで写真を保存するとき「画質」「品質」という項目が設定されていることが多いです。
このようなときは、画質を10パーセント程度落とすことで、写真の見た目はほとんど買えずにサイズの軽量化が図れます。
上が元々の画像です。この大きさで45KBくらいです。
こちらが10パーセント画質を落とした画像です。これで約29KBになります。
10パーセント落とす程度では、人間の目ではほとんど違いがわかりません。たかが10パーセントと思われるかもしれませんが、ウェブサイトのヘッダー画像にはもっと大きな写真が使われることが常ですから、1割削るのでも結構な差になることもあります。
もっと画質を落として50パーセントまで持っていくと、上の画像のようにだいぶ粗くなってきます（この状態で、データ容量は7KB程度まで落ちてます）。人間が被写体の画像では、顔のデータが崩壊して印象が悪くなってしまうので、集客を考慮したサイトではここまで落とすのは難しそうです。
※スマホで閲覧されている方は、50パーセント落とした画像でもあまり気にならないかもしれません。
ウェブ上のサービスを使った画像の軽量化
画像編集ソフトを持っていない、使っていないという士業さんも多いと思います。そんなときは、ウェブ上に画像を軽量化するための様々なサービスがありますので、これを活用すれば簡単にサイトの軽量化が図れます。
JPEG画像で有名なのは、JPEGminiというサービスでしょうか。
使いやすいサービスとしては、COMPRESSOR.IOやTinyPNGなどがあります。
どちらも、画像をウェブ上のサービスに放り込めば自動的に圧縮してデータサイズを小さくしてくれるので、簡単です。画像によっては7割近く圧縮されることもあるため、ウェブサイトに配置する主要な画像を圧縮しておけば相当な軽量化が図れることもあります。（無料で使う場合は1日の枚数制限などがあります）
PNG画像の軽量化
JPEGは写真などで利用される保存形式ですが、士業事務所のウェブサイトにおいてはJPEGと並んで、説明で使う図などにPNG形式の画像が使われることが多いです。
PNGもJPEG同様、ウェブ上に軽量化サービスが多く公開されています。先ほど上で紹介したTinyPNGは、名前のとおり本来はPNG画像を軽量化するサービスです。写真と合わせて、図やイメージの画像も放り込んで圧縮することによって、よりサイトの軽量化が図れます。
※余談ですが、写真をJPGではなくPNG形式で保存したり、簡単な図をPNGではなくJPG形式で保存すると、逆にデータ容量が大きくなってしまうことがあるのでご注意。目で見た限りでは分かりませんが、パソコン上のデータ容量は何倍も違うことがありますので、写真はJPG、簡単な図などはPNG形式が無難です。
スマホ対策や画像を多用するトップページで検討
回線が不安定で速度も遅くなりがちなスマートフォンから閲覧する訪問者が多いウェブサイトは、できるだけ画像の軽量化を図っておくほうがよいです。特に、スマホ専用サイトではなくパソコンと画像を共用する作りのウェブサイトでは、1つの画像を軽量化することでPC、スマートフォン問わずサイト表示の高速化につながります。
また、画像を多用する１枚もののランディングページ的な業務特化型ウェブサイトや、ランディングページまでは行かずとも配置画像の多いトップページなどは、使用する画像・写真を全部まとめて軽量化しておけば、ウェブサイト全体が軽くなるのでオススメです。
IWAMOTO
最新記事 by IWAMOTO (全て見る)
- 2024年G. W.期間中の休業日について - 2024年4月26日
- 【制作事例】東京都世田谷区の法律事務所様（総合サイト） - 2023年11月13日
- 【制作事例】宮城県仙台市の税理士法人様（総合サイト） - 2023年11月13日
