画像容量が及ぼすページ表示速度への影響と最適化方法について

Webサイトにアップする画像の容量はなるべく小さい方が良いです。理由は次の2つです。

• 閲覧者に負荷をかけない
• 検索エンジン対策

本稿では、なぜ画像容量が小さい方が良いかという話と、画像容量を圧縮する方法について解説します。

ページ表示速度を計測するPageSpeed Insightのスコア改善方法は、下記記事にまとめています。

画像容量を小さくしたほうがいい理由と背景

5Gの時代にそこまで神経質になる必要はないとも言えますが、スマホの普及率の高さによって起こる「通信量の壁」がむしろページ容量を圧縮すべき理由となっています。

日本では比較的インターネット環境に恵まれた環境ですが、これは珍しいことです。海外では先進国であっても通信速度が遅い地域はたくさんあるからです。よって、現代でもページ読み込みにかかる負荷はまだまだ小さいほうがいいのです。

読み込みの負荷を減らすには画像の容量を圧縮することが効果的です。読み込み速度が早くなれば、閲覧者のストレスを軽減し、検索エンジンにも好かれます。

ブログを書く時もできるだけ画像の容量を小さくする意識を持っておくことが大切です。

画像作成でやってはいけないこと

ここでは画像作成でやってしまいがちなミスを挙げます。

スマホで撮影した写真をそのままアップ

スマホで撮った写真をそのままブログにアップする人がいますが、閲覧者に大きな負荷をかけることになります。

なぜなら、スマホで撮った写真は1枚あたり2-3MBの容量があるからです。これを1ページあたり10枚使うとしたら20-30MB。ユーザーに負荷がかかるだけでなく、表示速度も遅くなるために検索エンジンからも嫌われます。

Retina対応で、すべての画像を倍サイズで作成

Retinaディスプレイに対応するために、ページ内のすべての画像を2倍サイズで作成することはあまり推奨されません。

どうしてもRetina対応したい場合は、ロゴやヘッダーなど重要な画像のみ倍サイズで作成し、その他は1.2-1.5倍程度に倍率を低くするのがスマートです。

必要以上のサイズでアップする

上記のRetina対応と同じことですが、サイズを大きくすればそれだけ容量も大きくなります。

ブログの場合はコンテンツ幅に合わせて画像を作ることが多いですが、必要以上に縦に長い画像をアップすればそれだけ容量も大きくなるものです。その点も考慮し、必要最低限のサイズにリサイズする必要があります。

画像の圧縮方法いろいろ

画像の圧縮方法は色々あります。ここではメジャーな方法を3つご紹介します。

Photoshopで圧縮

Photoshopで圧縮をかける際は、画像の保存時に行います。次の2つの手順を踏みます。

1. 保存形式を決める
2. 圧縮する

JPEG,GIF,PNGのどの形式が適切かは、画像によって異なります。各画像形式の性質を知り、適宜判断しましょう。

次に圧縮率の最適化を行います。手順は下記ページで解説されています。

・写真の画像サイズ圧縮方法 | Adobe
・JPEG 形式として最適化

画像圧縮ツールを使う

Photoshopを持ってない場合は、次の無料の画像圧縮オンラインツールを使います。ドラッグ＆ドロップだけで使えるのが便利ですね。

WebPに変換する

WordPressサイトの画像を圧縮するには、下記プラグインがもっとも効果的です。

Googleが開発している超軽量な画像フォーマット「.webp」に自動変換しつつも、IE等WebPに非対応のブラウザでは元の画像形式で表示するスグレモノです。

事例から画像圧縮を学ぶ

コリスさん

ウェブサイト制作に関わる情報を発信している「コリス」さん。
サイドの広告バナーはすべて30KB以下、他の画像も50KB程度と徹底されているのがわかります。どのページを開いても表示は軽いです。

コリス

TCDのデモサイト

ビジュアル重視のデザインの場合、ヘッダーサイズも大きく、様々な色味を使うため、どうしてもコリスさんほどの容量を維持することは不可能です。ヒーローヘッダーを入れるだけで300-500KBは超えてしまうからです。

ビジュアル重視でいく場合は、TCDのデモサイトを参考にしてください。TCDのデモで使われているすべての画像は画質と容量のバランスの最適解で作られているからです。

TCDテーマ

まとめ

画像容量を圧縮する重要性とその方法について解説しました。画像圧縮する方法を知ることと、圧縮する場合には画質と容量削減のバランスが重要という話ですね。

ページ容量の圧縮は地味な作業の連続ですが、コツコツ積み重ねることで後々大きな結果の差につながるため、ぜひ知っておきたい情報です。

「表示速度」の関連記事

当記事では紹介しきれなかった、サイトの表示速度や最適感の施策に関する記事一覧です。よろしければどうぞ。