チリも積もれば悪影響。ロスレス圧縮でさくさくサイト？

こんにちは。

スターティアラボ　ブログ編集部です。

マルチデバイス化が進み、WebサイトはPCだけで見るものではなくなりました。スマートフォンやタブレットでも閲覧できる環境において、快適にWebサイトを閲覧できるという点は非常に重要視されています。

そこで、今回のお話はWebサイトで使用している画像ファイルについてです。

1.ページ表示速度の評価

今さらではありますが、Googleはページ表示速度の観点での評価をすでに始めています。「ウェブマスター向けガイドライン」に記述がありますので、ご興味のある方はご一読ください。

▼ウェブマスター向けガイドライン

Googleは、【関連するキーワードに対応したWebサイトを表示する】こと、【優れた利便性を私たちユーザーに提供する】ことを目的としています。その考え方でいくと、アクセスしたWebサイトの表示に時間がかかっている事態は、Googleにとって【ユーザーの利便性を欠く行為】とみなされてしまいます。

結果として、Webサイトの評価に影響が出るとされています。

2.速度を下げる画像ファイルとは？

それはズバリ、「高解像度、サイズの大きな写真」です。

解像度の話は今回の内容と軸が違いますので割愛しますが、解像度が高い画像はファイルの重さに比例します。

最近のデジタルカメラは家庭用のものでも高解像度の写真を撮ることが出来ます。企業のWebサイトご担当者様なども自社製品の写真を撮影してWebサイトにアップするということがあるかもしれません。そして特に画像加工をしないまま「サイズ指定」をしてアップロードしてしまうことも、往々にしてあり得るのです。

これは、その影響と画像加工の手段、デメリットを把握していないがための不利益に繋がるのです。

3.サイズ指定の罠とリサイズ

Webサイトを構成しているhtml言語には、サイズを指定する”width”（幅）、”height”（高さ）を指定する命令文（要素）があります。これを指定することで、実際にWebサイトに表示される写真が「小さく」表示されます。ですが、これはあくまで「表示させるサイズを指定しただけ」で、読み込むファイルサイズは元の大きさの写真サイズなのです。

1つのWebサイトを表示するのに3秒以上かかった場合、約4割のユーザーがそのページから離脱すると言われています。

さすがに1ページの中に5MBの写真を10枚掲載するケースは無いと思いますが、0.5MBの写真を10枚掲載することはあり得る話です。

もし仮に、画像のファイルサイズを0.25MBにすることができれば、それだけページ速度は改善されることになります。

4.質を落とさずにファイルサイズを落とす「ロスレス圧縮」

ファイルサイズを軽くするためには元画像の画像サイズを変更するのが一般的です。

しかし、サイズを小さくし過ぎて訴求できないぐらいにしてしまっては本末転倒です。そこで画像に対して「ロスレス圧縮」を行います。

名前の通り、ロス（喪失）がレス（無い）圧縮ということです。「何」がロスレスなのか。

それは画質です。

簡単に要約すると「見た目は変わらずに画像のファイルサイズが軽くなる」ということです。ファイルサイズが大きい画像はもちろんですが、ファイルサイズの小さい画像も200、300と数が増えれば大きな影響を及ぼしかねません。それらをロスレス圧縮することで、全体のファイルサイズを軽減して読み込みスピードを改善させることができます。

5.ロスレス圧縮可能なサイト

最後に、ロスレス圧縮ができるサイトをご紹介します。

特別なソフトは必要とせず、フォルダ単位で圧縮作業ができますので、ぜひ利用してページ速度の改善を図ってください。

■.jpg、.pngを対象としたサービス

■.gifを対象としたサービス

6.まとめ

Webサイトの展開速度は、ユーザーの印象値を大きく左右する大事な要素です。

さらに、ユーザーに対してストレスを与えるだけではなく、Googleの評価にあるようにWebサイト自体への価値にも影響します。

もし、これまで必要以上にサイズの大きい画像を使用しているかも？と心当たりがある方、是非一度見直してみてください。