WordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける - 魔ッドアングラーWordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける スマホ用にメディアクエリを設定してひと息ついた頃、PageSpeed Insightsを確認してみたら「モバイル」の速度がガタ落ちしていました。記憶では80点くらいあったのに、50点になっていました。 原因は画像。特にアイキャッチに使用している「722 × 234」ピクセルの元画像が大きすぎるようです。 メディアクエリで「max-width: 100%;」にしているだけなので毎回読み込みに時間が掛かっているようです。 PageSpeed Insightsはこれを『横幅 320px にリサイズしろよ』と迫ってきます。 ご丁寧にもリサイズされた画像のダウンロードすらできます。非常に親切です。 しかしそう簡単に置き換えるわけにもいかない、PC用の画面で見ると今度は小さくなってしまうからです。 さらに考えてみれば、この
