PageSpeed Insightsの「適切な画像サイズ」の改善に使用できるpictureタグについて解説！

2023年10月27日
コラム
サイト構築

コラム

1 はじめに
2 「適切な画像サイズ」が改善項目に出てくる理由
3 改善項目から「適切な画像サイズ」を消す手段
4 <picuture>タグの使い方
5 <picture>タグのメリット
- 5.1 cssのメディアクエリを使用する方法よりページスピードの改善が見込める
6 まとめ
7 他のページスピード関連の記事

はじめに

ウェブサイトのページスピード最適化は重要な課題となっております。実際にページスピード対策をしてほしいというご依頼もいただいています。「PageSpeed Insights」は、ウェブサイトの読み込み速度を評価するツールであり、その中で「適切な画像サイズ」という項目の改善手段として、<picture>タグが活用できるので解説していきたいと思います。

「適切な画像サイズ」が改善項目に出てくる理由

単純に画像のサイズが大きいため改善項目として出てくるのですが、

PCで表示する画像をそのままスマホでも使用した時に

PCの点数では改善項目に出てこなくても、スマホの点数では改善項目に出てしまいます。

例えば、PCで表示されている画像が1000pxを超えているのに、その画像を横幅400px程度のスマホでも使用してしまうと、「適切な画像サイズ」が改善項目として出てしまいます。

改善項目から「適切な画像サイズ」を消す手段

スマホ用にも適切なサイズの画像を作成しましょう。

そして画面幅でPC用の画像をスマホ用の画像を切り替えればOKです。

その切り替えに使用するのが今回冒頭でお伝えした。<picture>タグです。

<picuture>タグの使い方

<picture> タグは、HTML5で導入された要素で、特に異なる画像ソースを異なる条件で提供するために使用されます。通常、レスポンシブ対応に使用されます。

<picture>
    <source srcset="images/image-PC.webp" media="(min-width: 768px)" width="1000" height="750" type="image/webp">
    <source srcset="images/image-SP.webp" media="(max-width: 767px)" width="400" height="300" type="image/webp">
    <img src="image.jpg" alt="image" width="1000" height="750">
</picture>

上記例では、

画面幅768px以上では「image-PC.webp」を表示、画面幅767px以下では「image-SP.webp」、webpに対応していないブラウザでは、「image.jpg」を表示します。

widthとheightを指定しないと「画像要素でwidthとheight明示的に指定されていない」という改善項目が出るので、しっかり指定しましょう。

<picture>タグのメリット

cssのメディアクエリを使用する方法よりページスピードの改善が見込める

画像を切り替える方法はcssのメディアクエリを使用した方法があります。この方法でも「適切な画像サイズ」の項目を改善することはできますが、ページ読み込み後に非表示にしたい画像の方も一度読み込まれてから、cssで画像を非表示にするので、その分ページスピードに影響を与えます。

<picture>タグを使用すれば、非表示にしたい画像の方は読み込まれないのでよりページスピードの改善が見込めます。

<img class="pc" src="images/image-PC.jpg" alt="image" width="1000" height="750">
<img class="sp" src="images/image-SP.jpg" alt="image" width="400" height="300">

@media screen and (min-width: 768px) {
    .pc {
        display: block;
    }
    .sp {
        display: none !important;
    }
}
@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block;
    }
}