Webサイトを開く時、遅いと感じることはありませんか？
または、Webサイトを開いた時、写真や画像がまだ表示されず数秒経ってから表示される、そんな経験をしたことはありませんか？
“実はそれ、画像（=写真）のせいかもしれません。”
実はWi-Fiなどのネット環境の他に、サイト内にある画像が原因でWebサイトの表示速度が遅くなることもあります。表示速度が遅いと、訪問してくれたユーザーが離れてしまう傾向が強いです。またこういった傾向だけでなく、GoogleやYahooの検索アルゴリズムからも不親切なWebサイトと判断されてしまい、検索結果にも悪影響が出かねません。
画像や写真を最適化して、訪問ユーザーにとって親切で、検索されても上位表示されやすいWebサイトにする方法はきちんとあります。今回はこの『画像（写真）の最適化』について、ご紹介していきます。
画像の最適化とは
画像の最適化を行うことで、画像を使っているWebサイトやLPの顧客満足度が向上します。
例えば、Webサイトに使う文字にサイズがあるように、画像にもサイズがあります。そして、画像のサイズには次の二つがあります。
見た目の大きさを示す画像の大きさ（表示サイズ）
データの量や大きさ（ファイルサイズ）
これらのサイズが大きいほど、Webサイトの読み込みに時間がかかります。読み込み時間はユーザの待ち時間となります。そのため、読み込みが遅いと「遅いサイトだな・・もういいや」と離脱することに繋がってしまいます。また読み込まれた場合でも大きな表示サイズの場合、写真だけが未表示となる場合もあります。
サイトの見た目と表示速度を改善するために、「画像の大きさ（表示サイズ）」と「画像のファイルサイズ」を最適化することは必須となります。
画像最適化が重要な理由
Webサイトは画像を最適化しなくても表示されます。しかし、最適化することがベストです。ここからその理由を解説していきます。
アクセスユーザーの離脱防止に
大きいファイルサイズの画像がある場合、大きい分だけ読み込みに時間がかかり、ページの表示が遅くなります。ページの表示速度が5秒を超えると約65％のユーザーが離脱すると言われています。魅力あるWebサイトでも表示が遅いという理由だけでユーザは離れてしまいます。そしてこの『遅い』と感じられてしまったWebサイトへ、同じユーザーに訪問してもらうことは非常に難しいです。
画像や写真は、Webサイト内を占めるデータとして割合が非常に大きく、画像のデータ量を軽くするだけでページの表示速度は大きく向上します。そのため画像を多く使用しているWebサイトでは、最適化は必須となります。
デバイスに合わせた画像設計
画像の表示サイズを適正サイズにすることで、ユーザにとって見やすいWebサイトとなります。ユーザーにとって見やすいWebサイトというのは、ユーザーがよく利用するデバイスを想定して設計されたWebサイトを指します。そのため、PC用の表示サイズ、スマホ用の表示サイズなど、各デバイスに合わせた画像設計をすることも重要です。
画像の最適化はSEOの向上に繋がる
画像の最適化はユーザビリティの向上に繋がる、重要なSEO対策の一環です。
Googleの理念の中に「Fast is better than slow（遅いより速い方がいい）」という理念があります。この理念により、表示の遅いWebサイトは検索結果の上位に表示されにくいと言われています。
Web1ページあたりのデータ量は1.6MB以下が推奨されています。しかし、Webサイトのデータ量は年々増加傾向にあり、コンテンツの割合も画像が多くを占めることが多くなってきています。そのため、画像のデータ量やファイルサイズを最適化することが表示速度の改善となり、SEO対策にも繋がる結果となります。
表示速度の調査
Webサイトの表示速度を調べるツールとして、 Googleの「PageSpeed Insights」があります。しかもこのツールは、１ページあたりだけではなく、Webサイト全体の表示速度も含めた計測も可能です。Googleのアカウントを持っていれば無料で利用できるためぜひ、取り入れましょう。
さらに画像サイズの最適化として、次世代フォーマットのWebPフォーマットへの対応もあります。WebPフォーマットの写真や画像は従来の最適化よりも画質のクオリティを高く保ったまま行なってくれるため、多く取り入れられるようになってきています。
WebPフォーマットについて
画像最適化に重要な次世代フォーマット、WebPを解説していきます。
WebPとは、Googleが開発している画像フォーマットで、拡張子は「.webp」。Webサイトのトラフィック軽減とパフォーマンス向上を目的として作られているため、「.Jpg」や「.png」に代わる次世代の画像フォーマットとして注目されています。ちなみに「ウェッピー」と読みます。
WebPで画像圧縮を行うと、オリジナルの画質を保ったまま、JPEG形式と比べて約24～41％のデータ量圧縮が可能となり、低容量のサイズで保存・使用することが可能です。
WebP変換ソフト
画像のWebP変換は、基本的に画像変換ソフトやサービスを用いて行います。
WebP変換に対応した代表的なソフト／サービスとしてGoogleのSquooshや、WebP Shopを導入済みのPhotoshopが上げられます。この記事では、インターネットが繋がっている環境ならどこでも使うことがSquooshを解説していきます。そのため、Squooshはソフトというよりも、Webサービスといった方が的確です。
WebP ShopはPhotoshopを購入していないと利用ができないため割愛します。これからWebP変換を行いたいと考えているようでしたら、ぜひ参考にしてください。
Squooshの使い方
手順としては以下の通りとなります。
ブラウザで「Squoosh」にアクセス
圧縮したい画像をドラッグ＆ドロップ
編集画面で「Edit」から圧縮形式の選択・画像の品質を調整
変換後の画像の確認
右下のダウンロードボタンをクリックする
ブラウザで「Squoosh」アクセスして、変換したい画像をドラッグ＆ドロップします。そうすると、画面中央に青い線が表示された編集画面となります。
左側がオリジナルの画像、右側が圧縮後の画像となるため、比較しながら編集ができます。右側の「Edit」から圧縮形式の選択（Compressのプルダウン）や画像の品質調整（Qualityスライダー）で編集します。
圧縮形式ファイルはWebPの他に、JPGやPNGなど9種類のフォーマットが用意されています。編集が終わり、問題がなければ、右下のダウンロードボタンをクリックしましょう。編集後の画像がダウンロードされます。
他の画像圧縮方法
TinyPNGについて
Squoosh以外の画像圧縮方法として、TinyPNGがあります。Squooshと同様に、TinyPNGはjpgやpng形式の画像を圧縮して軽量化してくれます。TinyPNGもツールではなく、Webサービスになります。そしてサービス名に「png」とありますが、拡張子はjpg形式でも圧縮できます。私の使用感として、TinyPNGの圧縮率は大体60%~70%ほど小さくなります。
ただ、Squooshと違って、TinyPNGは圧縮のみです。画質の調整はできませんが、圧縮する画像がとても多い場合に重宝するサービスです。
さいごに
Webサイトを多くのユーザに見てもらうために、SEO対策は非常に重要です。Googleやヤフーなどの検索エンジンは検索結果において「ページの読み込み速度」を順位付けの重要な要素の一つとしています。しかしここで注意したいことは、読み込み速度が速いのが良いということではなく、読み込み速度が遅いと減点対象、と捉えた方がより理解度は深まるかと思います。
Webサイトに来てくれたユーザーが快適にサイトを見たり、使ったりできるように設定し構築することがWebサイトを制作し運用することが必須です。そのためにも使用している画像や写真を最適化して掲載するようにしましょう。
今回の記事が貴社サイトのお役にたてば嬉しく思います。
最後までお読みくださり、ありがとうございます。
HS広告スタジオでは、作るだけでなく、検索順位も上がりやすくなるコンテンツ制作や、本格的なSEO対策を取り入れたWebサイト制作をしています。ぜひ、専用ページをご覧ください。
