SEOにもかかわる！？Webサイト内の画像のデータ容量を考える。

良いwebサイトの定義は様々ありますが、
今回は、webサイト内で表示させる画像についての内容をお届けします！


webサイトを訪れた際、webサイトがなかなか表示されなくてイライラした経験ってありませんか？


Googleの調べによると、表示スピードが1秒から３秒に変わると、サイトを訪れているユーザーの離脱率が32%増加し、
6秒に変わると106%増加するそうで、表示スピードが3秒以上かかると53％のユーザーがサイトから離脱してしまうそうです。

また、最近は各社のスマホ料金の値下げもあったり、
格安SIMを使っているユーザーも増えていると思いますので、外出先でのデータ使用料を気にされる方も多いのではないでしょうか。

SEOの観点から考えると、Googleはユーザーの利便性を重要視しているため、
webサイトの表示スピードもランキングに影響するといわれています。

このような状況の中、webサイトでは、画像がサイトのデータ容量の大部分を占めているということはよくあることです。

・会社の様子を知ってもらうために、たくさん写真を載せたい。
・商品の写真をたくさんの載せたい。
・保育園で保育の雰囲気を伝えるために写真をたくさん載せたい。

写真ばっかりになってしまいましたが、こういう事ってよくありますよね。
私自身も、写真がたくさん載っているサイトって雰囲気もよく伝わってきて好きだったりします。


写真、たくさん載せたいけど・・重くなるのか・・。
そんな時！この画像たちをどうやって扱えばよいか・・・。

それは！ズバリ、見た目は変えずに容量を減らすテクニックを使う！＝画像の圧縮です！












上の画像をご覧ください。
これは、私がいつも作業しているコワーキングスペースの窓から見た景色です。
晴れた日は、とっても気持ちよく仕事できて最高です♪

あ、話がそれました・・。

この画像左右で違いがわかりますか？

正直、まったく同じに見えます。
実は、左はオリジナルの画像で右は80％に圧縮した画像です。
元の大きさが横幅1000pxある画像なのですが、オリジナルは507KBあり、80％圧縮のものは263KBです。

半分まではいきませんが、かなり容量が減っています。

画像を圧縮するというのは、その画像が持っているデータの一部を捨ててしまうということだそうです。
捨てるので、その分軽くなるんですね。
上記の画像で分かる通り、80％程度だと実際には人の目にはさほど違いが判らないです。

この圧縮率、下げていくと容量は減っていくのですが、同時に画像が荒れてしまいます。
webサイト内での画像の使い方などを考慮しながら、
『容量が効率よく減らせて、必要な画像の状態を保っている状態』で使用すると良いですね！

画像の形式には、ほかにもpng形式というものや、svg形式というものなどがあります。
色数の少ないイラスト画像などは、こちらのpngにした方が容量を減らせる場合もありますし、
単純な線や文字などの場合はsvgの方が効果的なこともあります。

それぞれの特性を生かしながら、画像を扱うことで、きれいな画像を重くならずにwebサイトで
活用することができますね！

webサイト制作・・デザインや見える部分だけでなく、様々な箇所での工夫が、
「良いwebサイト」に繋がっているんだなぁ。と、しみじみ感じますね・・。