なんのために画像を最適化するの？
どうすると画像を最適化できるの？
Blogのアイキャッチ画像や、記事に入れる画像をそのまま貼り付けていませんか？
サイトへの流入は、約60～70％がモバイルでのアクセスとなっています。
そのため、Googleでもモバイルを優先したブラウジングを強化しているので、モバイルでのアクセスを意識したWebサイトの構築をすべきです。
どんなサイズの画像でも、PCやスマホのブラウザでは、キレイに表示してくれます。
でも、その画像を読み込むのは、画像のサイズが大きければ大きいほど、時間がかかってしまうのです。
記事の中にたくさんの画像が含まれていたとき、そのページを表示させるのに時間がかかってしまうと、ユーザーは「このサイトはなかなか表示されないから見るのをやめよう」と離脱しかねないのです。
たとえ、それがどんないい内容が書かれていたとしても、最後まで根気よく見てくれるユーザーは少ないのです。
なので、画質を劣化させることなく、画像サイズを小さくすることがWebサイトでは大切な１つとなっています。
画質をきれいなままで、画像サイズをどのようにして小さくしていけばよいかがわかります。
画像を最適化するとは？
画像を最適化するということは以下のような内容です。
- 画像の品質に大きな劣化をさせることなく、ファイルサイズを小さくすること
- 画像の最適な種類（保存形式）・画質・解像度を選ぶこと
- 端末の種類に合わせて適切に拡大縮小される方法で構築すること
画像の形式には様々なものがありますが、用途によって適切な画像の形式を選択する必要があります。
よく利用する画像形式を３つ上げましたので、どういった形式を選択するのかを参考にしてください。
【推奨される画質・解像度】
・写真ならjpg形式
・透過部分があるならpng形式
・図形や階調の少ないイラストならgif形式
・アニメーション画像ならgif形式
jpg形式は写真によく使われる形式で、高画質でありながら容量が小さいので写真などに向いてます。
圧縮するときにデータの一部を破棄されてしまうデメリットがあります。
png形式はWebでの画像表示に使われ、透明や半透明の画像も作成できます。
jpg形式とは異なり圧縮してもデータが損なわることがありません。
画面表示用の色設定（RGB）しか対応していないので、印刷するとPCで表示されていた色と変わってしまいます。
gif形式はアニメーションやイラストに適しています。
表示色はjpg形式やpng形式と比べると少ないので、グラデーションがキレイに表現されません。
画像を最適化する４つのメリット
１．Webページの読み込み速度が向上する
画像を最適化することで、ページを読み込む時間を短くすることができます。
画像を最適化しておくことで、いろんな種類のブラウザや端末で表示しやすくなるので、より優れたサイトとして認識されやすくなります。
２．SEOを改善できる
Googleは、Webページの表示速度は重要な１つの要素としています。
モバイルでのページ速度が検索ランキングの要素となりますので、遅いページはランキングが下がります。
画像の最適化は、SEOの観点からいっても重要な役割を果たしてくれます。
３．UX（ユーザーエクスペリエンス）を向上することができる
ユーザーが実際にサイトを訪れて、体験・体感できることです。
・サイトデザインが美しい
・フォントが見やすい、読みやすい
・ほしい情報がどこにあるかが分かりやすい
・ページの読み込み速度が速い
ユーザーによりよいUXを提供するうえで、最適化された画像は欠かせなくなっています。
４．Webサイトのディスク容量を軽減できる
クラウドサーバーであっても、オンプレミスサーバーであっても、ディスク容量は限られています。
容量を増やすことは可能ですが、その分のコストがかかってしまいます。
画像を最適化することで、大幅にディスク容量を軽減させることができるので、ランニングコストを下げることができます。
画像を最適化するには
この記事のアイキャッチ画像を圧縮してみます。
オリジナルの画像は、大きさが横2240px × 縦1260pxで、ファイルサイズが1,906KBとなっています。
TinyPNGというサイトで、画像を圧縮させます。
ここに圧縮させたい画像をドラッグ＆ドロップします。
この記事のアイキャッチ画像は、約58%圧縮されて、ファイルサイズが818KBになりました。
画像名の右端の「download」をクリックすると、圧縮された画像を個別にダウンロードできます。
さらに・・・
PCのアイキャッチ画像のサイズを確認します。
PCのアイキャッチ画像のサイズは、709px × 398pxだということがわかったので、まずはペイントを使ってサイズを変更します。
サイズ変更のボタンをクリックします。
ピクセルを選択して、水平方向の欄に「709」と入力したあと、OKボタンをクリックします。
画像のサイズが変更されたら、この画像を保存します。
サイズ変更した画像の大きさは、709px × 398pxになりました。
この画像を先ほどの画像圧縮サイトにて、圧縮します。
この記事のアイキャッチ画像は、ファイルサイズが105KBまで小さくなりました。
ココに注意
圧縮された画像が劣化しすぎて見づらくなる場合もありますので、適度なサイズでの圧縮を行うようにしましょう。
画像を比較してみましょう
こちらはオリジナル画像です。
オリジナル画像を、TinyPNGにて圧縮させた場合
オリジナル画像をサイズ変更して、それをTinyPNGにて圧縮させた場合
今回の場合は、サイズ変更して画像圧縮しても、さほど劣化していないので、サイズが一番小さくなったこのサイズを利用することにします。
まとめ
画像をWebサイトにアップする前に、ひと手間だけ加えてあげましょう。
サイトが素早く表示されるようになるということは、離脱率が下がって管理者にメリットがあるだけではなく、あなたのサイトを見に来てくれたユーザーにとって、すごく使いやすいサイトとなります。
あなたにとっても、ユーザーにとっても、両方ともに大きなメリットとなります。