ページの表示速度は画像で決まる!? 画像を最適化する5つの方法
- 画像
- 画像圧縮
画像圧縮とは、ファイルのデータ量を最小化するために画像を圧縮させることです。
画像圧縮には以下のような2種類の圧縮形式があります。
・可逆圧縮:圧縮しても元のデータに完全に戻すことができる圧縮(zipなど)
・不可逆圧縮:一度圧縮したら完全には元に戻すことができない圧縮
■圧縮をする目的
Webサイトのユーザーがサイトにアクセスするときに使うPCやスマホ、タブレットは必ずしもスペックが高いとは限りません。そのためユーザーが使うデバイススペックが引く場合はWebサイトのコンテンツが表示されるまで時間がかかる可能性があります。
画像のデータ量が大きいと、いくら素晴らしい画像を掲載していたとしても読み込みに時間がかかるためユーザーのストレスになってしましいます。このように、ユーザーにとってストレスなく使えるWebサイトを開設するためには画像圧縮が必要になるのです。
■画像の種類
画像圧縮を正しく行うためには、画像についての理解を深めておくとよいでしょう。画像には2つの種類があり、その特徴は以下の通りです。
・ベクター画像
ベクター画像は直線や曲線、塗りつぶしたものを集めて計算式でWeb上に表示する形式の画像です。svgという拡張子がそれにあたります。
拡大したときに画質がそのままなので、データ量が大きくなる傾向にあり、コンテンツに使用すると読み込みが遅くなります。
・ラスター画像
ラスター画像はドットやピクセルなどが集まってできた画像をWeb上に表示する形式の画像です。pngやjpeg、gifなどの拡張子があります。
拡大すると画質が少々荒くなるという特徴があるため、画質を良くしようとすると画像のデータ量が大きくなります。
・Adobe Photoshop
・PSD
・SVG
・UI/UX
・画像編集