メニュー
画像を軽くする方法とは?容量を軽くして読み込み速度を向上させよう!
  • 中野貴登:Webクリエイター

画像を軽くする方法とは?容量を軽くして読み込み速度を向上させよう!

こんにちは、イデアックスの「中野」です。

web制作を行う中でよく使用するのが画像ですよね。しかし画像を軽くせずにそのまま使用していませんか?

webデザイナーとして画像を軽くしないのはNGです。今回は画像を軽くする必要性と具体的な方法を紹介したいと思います。

なぜ画像を軽くしなければいけないのか

先ほども記載した通り、webサイト上に載せる画像は可能な限り容量を軽くしなければいけません。

容量を軽くしなければいけない理由は大きく2つあります。

読者の離反につながる

画像の容量を軽くしないと読者の離反に繋がってしまいます。

画像の容量が大きくなると、ページを読み込む時間が長くなります。ページの読み込み時間が長くなると読者は不満を感じてサイトから離脱してしまいます。

サイトページの読み込みが1秒から3秒に落ちると、直帰率は32%上昇すると言われています。(参照:Think with Google

そのため画像の容量を減らしてサイトの読み込み時間を短縮するように心がける必要があります。

Googleからの評価が下がる

サイトページの読み込み時間が長くなるとSEOが下がります。

Googleは自社のアルゴリズムの中にサイトの読み込み速度も含んでおり、読み込み速度が早ければ検索順位も向上すると言われております。

そのためSEOのためにも、ページの読み込み時間を短縮させる必要があります。

画像を軽くするには?

ではどのようにして画像を軽くするのか、紹介したいと思います。

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

画像のサイズを小さくすると容量も小さくなります。

webサイトに画像を載せる際、実際に使用するサイズ以上の画像を埋め込んで圧縮している方はいませんか?

そのやり方だと無駄に容量が増えてしまい、もったいないです。

そうならないために、実際に使用するサイズに画像を小さくしてください。

画像のサイズ変更はイラストレーターやフォトショップで行うことができます。

これらのツールを使用して画像を必要最小限のサイズまで小さく加工してください。

画像圧縮ツールを使用する

実は無料で画像を圧縮してくれるツールがあります。

このツールを使用することで画像をさらに軽くすることができます。

僕が使用しているのは、iLoveIMGという画像圧縮ツールです。

画像を選択して圧縮するボタンを押すだけで、画像の容量が圧縮されるとても使いやすいツールです。

画像サイズを変更して、上記のツールで圧縮してから画像をサイトに挿入してみてください。

一点気を付けて欲しいのは、画像を圧縮すると画像の質が下がります。

そのためポートフォリオやヘッダー画像など、その画像で何らかの印象を与えたい場合は圧縮せずにそのまま使用してください!

最後に

以上が画像を軽くする理由とその方法の紹介でした。

webデザイナーやこれからwebデザインの仕事をしたいという方は、ぜひ上記の内容を忘れずに作業に取り組んでください。

最後まで読んで頂きありがとうございました!