画像を最適化してウェブページの表示速度を上げよう

 

ウェブページの表示速度が遅いと、ユーザの離脱率の増加につながります。

ウェブページの表示速度に大きく関与するのは、テキストよりもファイルサイズが大きくなりがちな画像や動画です。

画像を適切な形で配信することで、ページの表示速度が上がることが期待できます。


※この記事のマンガ内の文字が読みづらい場合は、端末を横に向けて画面を回転させてからご覧いただくと改善される場合がございます。

みーちゃんたすけて!ど、どうした!
みーちゃんたすけて!
どうした!
ぼくのブログの画像の表示がとてつもなく遅いんだよ!全体が表示されるまでに10秒ぐらいかかるんだよ!
ぼくのブログの画像の表示が
とてつもなく遅いんだよ!
全体が表示されるまでに
10秒ぐらいかかるんだよ!
ふむむ、これは画像のファイルサイズを小さくしなくちゃね
ふむむ
これは画像のファイルサイズを
小さくしなくちゃね

画像のサイズを小さくする

まず、この画像、表示領域に対してサイズが大きすぎるよね。わぁ、気にしてなかったーっ
まずこの画像
表示領域に対してサイズが大きすぎるよね
わぁ
気にして
なかったーっ

 

画像は結局は表示領域に収まるように表示されるので、大きすぎる画像は意味がありません。

画像サイズを小さくするだけでも、ファイルサイズはかなり小さくなります。

一辺の長さを半分にすると面積は1/4になるので、単純に計算すればファイルサイズも1/4になります。

(実際は圧縮がかかるのでこんなに単純ではありませんが、だいたい半分にはなります。)

画像のリサイズやトリミングは、一般的な画像編集ソフトでは対応していると思うので、簡単にファイルサイズを削減できますよ。


次世代画像フォーマットを導入する

次世代画像フォーマット WebP を知っていますか?

これは画像のフォーマットのひとつなのですが、JPEG や PNG と比べてもかなりファイルサイズを小さくできます。

ロスレス データの欠損がない圧縮 で出力しても PNG の半分ぐらいになったりもするからすごいよね…!
みーこ

 

JPEG/PNG から WebP へ変換できるサイトもあり、画像編集ソフトで対応しているものもあるので、

ページの読み込み速度を上げたいなら、ぜひ取り入れてみてください。

ただ、ブラウザによっては対応していないことがあるので、その場合に応じた対処は必要になります。

関連記事

ウェブサイトに WebP を導入する方法

ウェブサイトに WebP を導入する方法


圧縮率を上げる

画像編集ソフトで画像をエクスポートするときに、どのくらい圧縮するか決められると思うんだけど

きれいさが気にならないぎりぎりまで圧縮をかけてもいいと思うよ

みーこ

 

当然、圧縮率が高いほうがファイルサイズは小さくなります。

高画質である必要がないなら、画質を下げる代わりにファイルサイズを削減しましょう。

TinyPNGなど、画像をアップロードすると圧縮をかけてくれるサイトもあります。

関連記事

ブログの公開は早いほうがいい

ブログの公開は早いほうがいい


ぜひ今回の内容を参考に、画像の配信を最適化して、ページの表示速度を上げてみてください。

お役に立てたなら幸いです。

では👋