Webサイトのパーツである画像はその容量の大きさからサイトのパフォーマンスに大きく影響します。このパフォーマンスは、ユーザー体験を重視したコアウェブバイタルの指標にとても重要です。
AVIFやWebPなどの新しい画像のフォーマットの登場や、Internet Exploreの終了によって画像をより簡単に最適化しやすくなりました。サイトリニューアルする際、この辺りも学び直したので自分なりのベストプラクティスをまとめておきます。
この記事の目次
コアウェブバイタルとは？
2021年6月にGoogleのページエクスペリエンスアップデートがありました。これを機に、CoreWebVitals（CWV：コアウェブバイタル）もランキング要素に取り入れられることが発表されました。コアウェブバイタルは、Webページにおけるユーザー体験（UX）・ユーザーの快適度を示す数値で、下記の3つに分類されます。
- LCP（Largest Contentful Paint）：読み込みの速さ
- FID（First Input Delay）：反応の速さ
- CLS（Cumulative Layout Shift）：レイアウトのずれ
これらの指標は、Google Search ConsoleやPageSpeed Insightsなどで確認することができます。
pictureタグを使った画像ベストプラクティス
下記が、現状僕の考える画像のベストプラクティスのコードです。
画像ペストプラクティス
<picture> <source type="image/avif" srcset="https:livalest.com/images/pchero.avif 1x, https:livalest.com/images/pchero@2x.avif 2x" media="(min-width: 600px)" width="1200" height="800"> <source type="image/webp" srcset="https:livalest.com/images/pchero.webp 1x, https:livalest.com/images/pchero@2x.webp 2x" media="(min-width: 600px)" width="600" height="800"> <source type="image/avif" srcset="https:livalest.com/images/sphero.avif 1x, https:livalest.com/images/sphero@2x.avif 2x" media="(max-width: 599px)" width="1200" height="800"> <source type="image/webp" srcset="https:livalest.com/images/sphero.webp 1x, https:livalest.com/images/sphero@2x.webp 2x" media="(max-width: 599px)" width="600" height="800"> <img src="https:livalest.com/images/pchero.jpg" alt="画像の説明" loading="lazy" decoding="async" width="1200" height="800"> </picture>
一つずつ解説しています。
pictureタグを使ってユーザーに最適な画像を出力
Internet Explorerの終了でポリフィルなしで使えるようになったpictureタグで画像を出力します。pictureタグの中でsourceタグ記述することで、
- ブラウザ対応された画像のフォーマットによる条件分岐
- Retinaディスプレイ対応するかの条件分岐
- デバイスによる条件分岐
の3つの条件分岐をさせることができ、無駄なく、ユーザーの使用するデバイス・ブラウザに沿って最適化された画像を出力することができます。ユーザーが見ている画面に適合する画像を出力することによって、ユーザーの使用する通信を最低限にとどめ、LCP（読み込みの速さ）の値を良くする効果があります。
この点、CSSのdisplay:none;での画像の出し分けは、CSS見えなくしていてもブラウザ側で全ての画像が読み込まれてしまうので、LCP（読み込みの速さ）の観点から極力控えた方が良いです。
ベストプラクティスのコードの中では、pictureタグの中にsourceタグとimgタグを使用しています。sourceタグ上から1つずつ順番に読み込んでいき、ブラウザで閲覧しているユーザーの条件に当てはまった画像が出力されます。どの条件にも当てはまらなければ、imgタグの内容が出力されます。sourceタグの属性によって、条件分岐を指定することができます。
以下でその条件分岐を細かく見ていきます。
type属性で画像フォーマットAVIF、WebPを使用
type属性
<source type="image/avif" srcset="https:livalest.com/images/pchero.avif"> <source type="image/webp" srcset="https:livalest.com/images/pchero.webp">
sourceタグの中で、type属性をtype="image/avif"やtype="image/webp"と指定することで、AVIFとWebPを使用しました。画像フォーマットの中でも、標準のjpgやpngではなく、軽量なものを使用することでLCP（読み込みの速さ）の改善になります。ここで少し、AVIFとWebPの画像フォーマットについて解説します。
AVIFについて
AVIF（ウェッピー）は「AV1 Image File Format」の略称で、画像の超圧縮ができる次世代型画像ファイル形式です。現段階では最も画像を圧縮して表示できるフォーマットとなります。jpgと比較すると約95%以上、次に解説するWebPと比較しても30%近くの削減が可能だといわれています。可逆圧縮・非可逆圧縮を選択できるという点でもWebPより強みを持っています。ただし、対応しているブラウザがまだまだ少ないのが現状です。
WebPについて
WebP（ウェッピー）とは、Googleが開発したオープンソースの次世代の画像フォーマットです。圧縮しても画質が落とさず、画像容量を減らすことができるため、Webサイトの表示速度を改善することができます。
以前は対応しているブラウザが限定されていましたが、現在はほぼ全ての主要なブラウザに対応しています。
AVIF・WebP作成ツールについて
AVIF・WebP作成ツールについては、ほぼsquooshで対応しました。Photoshopでjpg/pngに書き出したあと、画像アップロードするだけでAVIF・WebPのフォーマットで画像をダウンロードすることができます。
ただし、画像は1枚ずつだけしか作成できないです。 複数一括処理機能ができたら最高なんですが、今のところは未対応のようです。Photoshopであればプラグインを活用すればWebPのフォーマットで書き出しが可能です。
また、WebPの画像はさらにtinypingで画像の軽量化・圧縮が可能です。こちらは複数一括して軽量化できるのでおすすめです。
srcset属性でRetinaディスプレイに対応
srcset属性
<source srcset="https:livalest.com/images/pchero.webp 1x, https:livalest.com/images/pchero@2x.webp 2x">
srcset属性で、2倍サイズのRetinaディスプレイに対応しています。ただし、画像の大きさも2倍にして書き出す必要があります。
4Kディスプレイに対応する場合、画像を4倍の大きさに書き出し、
srcset属性
<source srcset="https:livalest.com/images/pchero@4x.webp 4x">
とすることで対応は可能です。画像サイズを何倍まで用意するかは作成するサイトの要件と手間に照らし合わせて設定するといいでしょう。
※画像の名称にわかりやすくつけているだけで任意です。
media属性でデバイスごとに画像を出力
srcset属性
<source type="image/webp" srcset="https:livalest.com/images/pchero.webp" media="(min-width: 600px)"> <source type="image/webp" srcset="https:livalest.com/images/sphero.webp" media="(max-width: 599px)">
CSSのメディアクエリと同様に、min-width・max-widthを指定することで、デバイスの横幅を条件分岐によって画像を出力させます。
上の例でいけば、600px以上の場合はpchero.webp画像を表示し、599px以下の場合はsphero.webpの画像を出力します。
今回は、パソコンとスマートフォンで条件分岐をしていますが、media属性の数値をいじることで自分の好みに調整でき、画像さえ用意すれば実質いくらでも条件分岐によって画像を出し分けすることができます。
ちなみに、デバイスの環境に応じて内容の異なる画像を表示させるようにすることを「アートディレクション」と呼ぶそうです。デバイスに沿って画像を最適化することは、LCP（読み込みの速さ）を改善し、コアウェブバイタルのスコアを良くします。
width/height属性を指定してレイアウトシフトを回避
srcset属性
<source type="image/webp" srcset="https:livalest.com/images/pchero.webp" width="1200" height="800"> <img src="https:livalest.com/images/pchero.jpg" width="1200" height="800">
画像のsourceタグやimgタグに、width/height属性に指定しています。width/height属性には設置する画像のアスペクト比を入れます。（画像のサイズじゃなくても問題ないありません。）
width/height属性を指定することで、ページ読み込み中に画像のスペースをより正確に保持できるようになります。これはCLS（レイアウトのずれ・レイアウトシフト）の数値を改善することができます。
loading属性とdecoding属性で遅延読み込み
loading/decoding属性
<img src="https:livalest.com/images/pchero.jpg" loading="lazy" decoding="async">
loading="lazy"を指定することで、ブラウザの非表示領域の画像やiframeの読込処理を遅延読み込みさせます。
decoding="async"は画像のデコード処理を非同期に処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出力するようになります。
（僕も色々見ましたが、あまり理解できていません。）
loading属性とdecoding属性は併記可能で、その場合はloading=”lazy”が優先されます。
重要なことは、loading=”lazy”を指定し、オフスクリーン画像の遅延読み込みを設定しておくことは、LCP（読み込みの速さ）・サイトの高速化に繋がる施策になるということです。
SVG画像の方が良い場合
SVG画像がベクター形式なので、画質を損なうことなく、サイズの拡大・縮小が可能です。サイズの大小に関わらず、完璧な画質を維持できる点において、AVIFやWebPなどの画像フォーマットより優れているともいえます。
また、SVGはXMLコードで形状、線、色などを表現しているので、Webアニメーションと相性が良いとされています。ただし、写真画像には向いておらず、写真画像をSVGにするとかえって画像の容量が大きくなってしまいます。
ですので、
・単色など、色が少ないもの
・グラフや図
・アイコン
などがSVGに向いているとされており、僕のサイトリニューアルにおいてもイラストなどは色をおさえてSVG画像を配置しているところと、AVIF・WebPを使った写真素材とで分けて使用しています。
ちなみに、SVG周りの画像の書き出し方や扱い方法は下記のサイトを参考にさせていただきました。
SVGで背景を作りたい場合は、ジェネレーターなどのツールがおすすめです！
CSSのbackground画像は極力使わない理由
簡単にいえば 、今まで書いてきた機能をCSSのbackgroundプロパティで同じように実装するのが非常に難しいからです。
例えば、AVIFやWebPなどの画像フォーマットによる出力設定、Retina対応の2倍サイズでの出力、デバイスサイズによる出力、画像の遅延読み込みなどです。
pictureタグでできることをCSSのbackgroundプロパティでやろうとするとかなり困難です。（挑戦しましたが、難しすぎて断念しました。）
ですので、僕はCSSのbackgroundプロパティは極力使わず、サイトの構成上必要な画像であったり、画像サイズが大きいものに関しては、pictureタグを使って実装しています。画像を背景で使いたい時も、z-indexをうまく使って背景にしています。
画像ベストプラクティスまとめ
画像ペストプラクティス
<picture> <source type="image/avif" srcset="https:livalest.com/images/pchero.avif 1x, https:livalest.com/images/pchero@2x.avif 2x" media="(min-width: 600px)" width="1200" height="800"> <source type="image/webp" srcset="https:livalest.com/images/pchero.webp 1x, https:livalest.com/images/pchero@2x.webp 2x" media="(min-width: 600px)" width="600" height="800"> <source type="image/avif" srcset="https:livalest.com/images/sphero.avif 1x, https:livalest.com/images/sphero@2x.avif 2x" media="(max-width: 599px)" width="1200" height="800"> <source type="image/webp" srcset="https:livalest.com/images/sphero.webp 1x, https:livalest.com/images/sphero@2x.webp 2x" media="(max-width: 599px)" width="600" height="800"> <img src="https:livalest.com/images/pchero.jpg" alt="画像の説明" loading="lazy" decoding="async" width="1200" height="800"> </picture>
IEが終了したことでpictureタグが使えるようになり、画像の条件分岐による出力が簡単にできるようになりました。AVIFとWebPなどの新しい画像フォーマットも軽量でサイト高速化・コアウェブバイタルのスコア改善に繋がるものの、生成が難しく、扱いにくい側面があるのでまだまだ普及していない印象があります。
このブログ記事を機会に、画像の最適化やコアウェブバイタルの改善に取り組んでいただければ非常に嬉しいです！
読んでいただきありがとうございました！
