アイキャッチ画像
口コミ用キャラクターアイコン

自分のサイトやブログをRetinaディスプレイに対応したのはいいが、肝心のサイトの速度がダウンした。

口コミ用キャラクターアイコン

どうしよう、これじゃ直帰率が上がってしまうよ・・・(泣)

こんな悩み、ありませんか?

画像サイズを振り分けて、Retinaディスプレイでもキレイにできたのはいいですが、サイトの速度が落ちてしまうと、せっかくのSEO対策にも悪影響を及ぼしてしまいます。これでは勿体ないですよね。

今回は、「Retinaに対応したサイト・ブログでも、速度を軽くする方法」について解説していきます。

画像自体を軽くする

元画像のまま使うと、数MB級の重さになることもあり、サーバーの容量がすぐに無くなってしまいます。以下の方法で画像の容量を軽くしていきましょう。

  • 画像サイズの見直し
  • 画像圧縮ツールを使う

画像サイズの見直し

Retinaに対応する場合は、通常の2倍サイズの画像をアップするのが基本ですが、ページ速度の事も考えた場合、全記事の画像を2倍サイズにすると重くなってしまうこともあります。

通常の1.2~1.8倍のサイズでもキレイに表示できる場合がありますので、画像に応じてサイズを設定し直しましょう。

画像圧縮ツールを使う

サイズを小さくしても、画像自体の容量はまだ重いので、画像圧縮ツールを使って容量を減らしていきます。

Squoosh

個人的にはSquooshが一番おすすめです。1枚ずつでしか作業はできませんが、MozJPEGやWebPに変換してくれるので、ほとんどデメリットが無いでしょう。

プロフィール用アイコン
みきてぃ東西線

複数枚の画像を一気に圧縮したい場合は、以下のサイトを使ってね!

WebPを使う

WebPとは、Googleが開発している、JPEGやPNGなどの既存のフォーマットに変わる新しい画像フォーマットです。1枚の画像の容量が、JPEGよりさらに低くなるので、サイトやブログをできるだけ軽くしたい時にオススメです。

これまで未対応だったSafariも、iOS14でようやくサポートされるようになったので、導入を検討するのも良いでしょう。

「Squoosh」では、WebPにも簡単に変換することができます。

Squoosh 設定パネル
Squoosh 設定パネル

設定パネルでは「WebP」「Browser WebP」の2種類がありますが、サイトやブログで使う画像であれば「Browser WebP」の方が簡単な設定でWebPに変換することができます。

画像の遅延読み込みを行う(重要!)

サイトやブログの速度改善を行うには、これが一番重要になっていきます。画像の遅延読み込みを行うことで、ページの読み込み時の負荷を減らすことができます。

HTML5

「lazyload JavaScript」とネットで検索すると、色々と出てきますので、ご自身が使いやすいものを導入しましょう。

なお、JavaScriptによってはjQueryが必要な場合もありますのでご注意ください。

WordPress

画像遅延読み込み機能のあるテーマを使っている場合は、そちらを使うのが望ましいですが、無い場合はプラグインを導入しましょう。

主な画像遅延読み込みプラグイン

なお、WordPress本体も、バージョン5.5から画像遅延読み込み機能がサポートされるようになりましたが、必ずしも画像遅延読み込み機能が適用されるわけではありませんので、当面の間はテーマやプラグインの機能で使った方が良いです。

まとめ

「Retinaに対応したサイト・ブログでも、速度を軽くする方法」について解説しました。

Retina対応化する方法について簡潔にまとめると、

1.Retina用画像と通常ディスプレイ用画像を、それぞれ1枚ずつ用意する

2.Retina用の画像サイズを1.2~1.8倍(できれば2倍)にする

3.画像圧縮ツールで画像を圧縮する(できればWebP画像に変換する)

4.画像の遅延読み込み機能を有効化する

5-1.HTML5:srcset属性を使ってHTML内にコードを入れる

<img src="img/image-1.jpg" srcset="img/image-1.jpg 1x,img/image-1@2x.jpg 2x" alt="xxxxx">

5-2.WordPress:「Simple Image Sizes」などで自動生成した画像を記事に貼り付ける

これだけで、Windowsでは通常の画像を表示させ、MacのRetinaディスプレイでは元画像を軽くした2倍サイズの画像を表示させることができます。

さらに、WebP対応のブラウザではWebPで表示され、画像遅延読み込み機能でページ読み込みの負荷を減らすことができ、スマホでもストレスなくサクサクと動くようになります。

また、何か良い方法がありましたら、随時更新していきます。

スポンサーリンク