遅いウェブサイト表示速度。ファイルを圧縮してスピードアップ!

ノートパソコンでネットサーフィン

こんにちは、タクローです。

みなさんは、何かのウェブサイトを見ていて、表示速度が遅くてイライラした経験はありませんか?

回線速度などが影響して表示速度が遅くなっている場合もあるでしょう。
あるいは、ウェブサイトで使用している写真などの画像ファイル容量が大きいことも、原因として考えられます。

ウェブサイトの表示速度が遅ければ、待ちきれずに他のウェブサイトへ移動することもありますよね。

みなさんがウェブサイトやブログを制作しているならば、そのような事態にならないよう表示速度について、注意すべきでしょう。

また、ウェブサイトの表示速度が遅ければ、SEO対策にも不利になるでしょう。

今回はウェブサイトやブログを制作する際、対策しておきたい「表示速度」についてまとめました。

ブログに撮った写真を載せたいけど、ページが重くならないか心配。
ウェブサイトに写真などの画像を載せる時、表示速度が遅くならないよう具体的に何をすればいいの?

そんな不安や疑問を感じている方にとって役立つ情報だと思います。

どうぞ最後までお付き合いください。

https://takro-blog.com/about-services-for-creating-website-simply-and-inexpensively/

重要なウェブサイトの表示速度

表示速度が遅いために、せっかく見に来てくれたユーザーをイライラさせ、結果として他のウェブサイトへ

ウェブサイト制作やブログ制作に携わっていれば、これほど残念なことはないでしょう

ユーザーが貴重な時間を使って、見に来てくれたわけです。
真心込めて制作したウェブサイト、最後まで見てもらいたいですよね。

ですから、表示速度は必ず対策しておきましょう。

ウェブサイトにおける写真などの役割

もしレンタルサーバーを使ってウェブサイトを公開している場合、レンタルサーバーのスペックなども表示速度に影響するでしょう。
また、回線速度の表示速度に影響するでしょう。

ただ、今すぐできる表示速度対策として、今回は写真などの画像ファイル容量にフォーカスを当てて解説していきます。

ウェブサイトにファイル容量の大きな画像をたくさん載せれば、当然、全体のファイルサイズが大きくなり、表示速度は遅くなります。

とは言うものの、写真などの画像データは見ている人に情報を伝える重要な役割を果たすものです。

見やすくてわかりやすいウェブサイトにするため、写真などの画像データは必要不可欠と言えるでしょう。

そんな必要不可欠な写真ですが、最近はスマートフォンで撮影するという方も多いのではないでしょうか?

スマートフォンであれば、気がついたときに手軽で、簡単に撮影できるから、とても便利ですよね。

そのスマートフォンのカメラ画素数がコンパクトデジカメに劣らないほど進化しています。
画素数が大きければ、ファイル容量も大きくなります。

簡単、手軽なスマートフォンだからといって、ファイル容量が小さいわけではないのです。

スマートフォンで撮影した写真をウェブサイトやブログにたくさん載せれば、表示速度が遅くなってしまうでしょう。

スマートフォンで写真を撮る女性

スマートフォンのカメラ画素数

では、最近のスマートフォンのカメラ画素数はどのくらいなのでしょうか?

私のスマートフォン「iPhone 8」を例に挙げてみます。

iPhoneには2種類のカメラがついています。

iSightカメラFaceTimeカメラです。

iSightカメラ」とは、メインで使用する外側(画面側ではない)のカメラのことです。
コンパクトデジカメにも劣らないクオリティです。

FaceTimeカメラ」とは、自撮りするときに使う内側(画面側)のカメラのことです。
自撮り以外にも、ビデオ通話などに使用します。

私の「iPhone8」の場合、「iSightカメラ」が1,200万画素「FaceTimeカメラ」が700万画素です。

スマートフォンであってもこれだけ画素数が大きければ、撮影した写真データの容量も大きくなります。

下の画像は実際に私の「iPhone8」で撮影した画像です。
ファイル容量は「4.47MB」でした。

CompressorIo水槽サンプル画像

ウェブサイトなどに載せるファイル容量にしては、大きいでしょう。

そこで、ウェブサイトなどに載せる前に必要となる処理があります。

それが「ファイルの圧縮」です。

写真など画像ファイルの圧縮方法

写真など容量が大きい画像ファイルを圧縮し、ファイル容量を減らすことは、ウェブサイトの表示速度を上げる効果が期待できます。

今回、説明する圧縮方法は下の2種類です。

  • 非可逆圧縮
  • 可逆圧縮

非可逆圧縮

ファイル容量を減らすためには、その画像のさまざまな不要な情報を削る必要があります。
この不要な情報を削ってファイル容量を少なくする圧縮方法を「非可逆圧縮」といいます。

画像に含まれる情報を削ってしまいますので、ファイルを元に戻すことができなくなってしまう特徴があります。

つまり、一度圧縮してしまうと画像ファイルを圧縮前に戻すことができなくなってしまうのです。

「非可逆」と呼ばれるのはそのような理由からです。

ファイル容量が少なくなる(高い圧縮率を得られる)メリットがある一方、その分画質が劣化するというデメリットがあります。

ただ、人間の感覚に伝わりにくい部分を中心に情報を削っていくので、それほどデータの劣化は目立ちません。

情報を削ることから「LOSSY圧縮」とも呼ばれます。

ウェブサイトやブログに写真など画像データを載せる場合は、この方法で圧縮したファイルを使うとよいでしょう。

可逆圧縮

圧縮したデータを完全に元に戻すことができる圧縮方法を「可逆圧縮」といいます。

不要な情報を削ってしまうわけではないので、「非可逆圧縮」に比べると、ファイル容量が少なくなりません。

画質が劣化しないメリットがある一方、ファイル容量が大きくなる(非可逆圧縮には劣る圧縮率)というデメリットがあります。

情報を削らず残すことから「LOSSLESS圧縮」とも呼ばれます。

Compressor ioについて

圧縮についてわかったところで、具体的な圧縮方法について説明します。

私が実際に使っている圧縮ツール「Compressor io」がおすすめです。

インストール作業が不要でウェブ上で処理が完了できます。
また、使い方も非常に簡単なのが大きな特徴でしょう。

しかも圧縮率が高く、ファイル容量を軽くしてくれます。

実際の効果と使い方について解説していきます。

まずは、下記リンクから「Compressor io」のサイトを表示してください。

https://compressor.io/

圧縮処理を開始する

「Compressor io」のサイトを表示したら、「TRY IT!」をクリックします。

CompressorIo処理開始画面

ファイルを選択する

圧縮したファイルを選択します。
まず、「Choose your compression」の箇所で「Lossy」を選択してください。
次に「SELECT FILE」をクリックして、圧縮対象ファイルを選択します。

CompressorIoファイル選択画面

処理を待つ

ファイルを選択すると、読み込み処理を経て圧縮処理を行います。
ファイル容量が大きいほど、時間がかかるようですが、そこはじっと待ちます。

CompressorIoファイル読み込み画面

圧縮したファイルをダウンロード

しばらく待つと、圧縮率が表示され処理後のファイル容量を確認できます。

DOWNLOAD YOUR FILE」をクリックすると、処理後のファイルをダウンロードできます。

続けて処理を行いたい場合は、「Compress another picture」をクリックします。

CompressorIoファイルダウンロード画面

実際のファイル圧縮率

今回ご紹介した「Compressor io」で圧縮するとどのくらいファイル容量が小さくなるのでしょうか。
実例を挙げてみたいと思います。

CompressorIo水槽サンプル画像

私が「iPhone 8」で撮影した写真です。

圧縮前 圧縮後 圧縮率
4.47MB 1.92MB 57%

次は著作権フリーの写真素材サイトからダウンロードしてきたファイルです。

CompressorIo花畑サンプル画像

圧縮前 圧縮後 圧縮率
1.73MB 302.06KB 83%

まとめ

このブログ記事の写真など画像データはすべて「Compressor io」で圧縮したものを載せています。
圧縮率が結構大きくて、毎回、驚かされることが多いです。

ぜひ、試しに使ってみてください。

写真などのファイル容量を小さくする効果が目に見えて得られるはずです。

これを機会にぜひ参考にしていただければ幸いです。

最後までお付き合いいただき、ありがとうございました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする