再確認:画像imgタグにサイズ指定をする事はSEO上重要です
HTMLソースでimgタグに直接widthとheightの数値を入れる事はSEO上重要です。
各ブラウザが直接記述とCSS設定を併用する新しい機能を導入した事で、ページ読込速度の向上とコンテンツ移動防止が実現できるようになりました。
これによりGoogleがSEOのランキング要因に採用した事も後押ししています。
imgタグにはwidthとheightを直接設定する事はSEO上重要
最近まではimgタグにwidthやheightなど幅と高さの数値を入れずに、CSSでコントロールする流れが主流でした。
しかしGoogleの新しいアルゴリズム「Core Web Vitals」の要素が発表された事で、その状況は一変する事になります。
Googleが導入した新しいアルゴリズムの要素として
・WEBページの読込速度が遅い(特にモバイルデバイス)
・画像レンダリングによる「文章コンテンツの移動」が発生する
上記の現象を持つWEBページについては、改善をしなければ検索順位に影響する事になります。
SEO評価を上げるチャンス
しかし逆に言えば、それらを改善する事でWEBサイトの検索順位が上がる可能性も示唆しています。
このアルゴリズムに対応するためのSEO対策の一つが、画像タグにwidth・heightの数値を直接入れておく事です。
今後検索で上位を目指すWEBサイト制作にとって、imgタグに幅と高さのサイズ設定をしておく事は必須の要件となります。
本記事では、なぜ画像のサイズ指定をしておかなければならないのかを詳しくご紹介します。
画像表示によるコンテンツ移動
そもそも、サイズ指定をする・しないでどのような影響があるのでしょうか。
サイズ指定なしで画像を表示する
それを具体的にご紹介しましょう。以下の様なコードがあったとします。
<h1>タイトル見出し</h1> <p>説明文章が入ります。<p> <img src="image.jpg" alt=""> <p>説明文章が下に続きます。
説明文章が下に続きます。<p>
上記コードの場合、結果として画像が2度にわたりレンダリングされる事になります。
1つはHTMLがダウンロードされる時、そして2番目は画像がダウンロードされる時です。
画像表示スペースが最初に設定されない
先にレンダリングされていた文章の間に画像がダウンロードされる事で、それまで無かった「スペース」が必要になる訳です。
あいだに画像が入る事であとの文章が下に動く。
コンテンツ移動の弊害
突然このように文章が下に移動すると、そこを読んでいたユーザーが文字を見失ってしまいますよね。
また多数の画像が掲載されたWEBページとなれば、それだけ処理量が多くなりデバイスに負荷が掛かる場合がある訳です。
そうなると当然表示に時間が掛かりますので、ユーザビリティ上そして今は何よりSEO上よくありません。
widthとheightによるサイズ指定
これを回避する伝統的な方法は、imgタグにwidthとheight属性を追加する事ですね。
これによりHTMLの読込時点で画像が入るスペースを確保できます。
<h1>タイトル見出し</h1> <p>説明文章が入ります。<p> <img src="image.jpg" width="400" height="200" alt=""> <p>説明文章が下に続きます。説明文章が下に続きます。<p>
こうすると以下の様にレンダリングが行われます。
図:最初から画像の寸法が指定されているため、文章は最初からその分下に表示される。
この場合、画像が表示される前からサイズスペースが確保されているので、文章の下移動は起こりません。
サイズ指定によるCPU負荷の軽減
画像サイズを指定する事はコンテンツ移動によるユーザーへのストレス以外に、CPUへの負荷も軽減します。
widthとheightが提供されている写真を100枚表示する場合と、提供されていないまま100枚表示する場合とでは、明らかな違いが出ます。
GoogleChromeでパフォーマンス計算をする事ができます。
この差は、特にローエンドのデバイスとネットワーク速度が遅い場合にその影響はかなり大きくなります。
幅と高さを設定していないと、読み込み時間が著しく増加する事は明確なのです。
CSSによるサイズ指定
最近は、CSSを使用して画像の幅と高さを制御しようとする場合が多いと思います。
レスポンシブルデザインサイトであれば、レイアウト枠ごとに画像サイズを可変させなければならないからです。
例えば画像をレイアウト幅に合わせる場合、次の様に記述する事がありますよね。
img { max-width: 100%; }
この様にCSSで幅の設定をしておけば、常にレイアウト幅に合わせて画像サイズが可変してくれる訳です。
CSS設定はタグの設定を上書きする
画像の幅をCSSで設定していると、画像タグのwidthの数値はCSSの数値に上書きされます。
しかしheightを設定していないとタグ上に書いたheight値が上書きされないので、画像が縦に引き伸ばされた様になります。
HTMLとCSSの間で画像の寸法が衝突すると、引き伸ばされた画像が作成される可能性がある。
この場合CSSにheight: autoを追加すれば、HTMLタグ上の高さ属性も上書きされます。
img { max-width: 100%; height: auto; }
CSSで一つの画像を使いまわす方向へ
よくよく考えると、imgタグに幅と高さの数値設定をせずにCSSのみでサイズ制御をしていれば、一つの画像を使い回せるという事になります。
画像タグに直接のサイズ指定が無ければ、CSSで幅であればmax-width: 200pxと指定すれば幅が200pxの画像になってくれます。
アスペクト比で自動計算
さらにこうしておけば、height: autoを設定する必要もありません。
ブラウザは画像が表示されれば、そのアスペクト比(縦横比率)で画像の高さを自動的に計算するからです。
端末ごとに画像を用意するのは非現実的
もちろん理想は画面サイズに合わせて適切なサイズの画像を提供する事です。
しかしブラウザごとにイメージのサイズ変更が必要になり、携帯電話などの全デバイスサイズをカバーする事はできませんよね。
結果的に一つの画像を使いまわす事になり、imgタグに直接widthやheightを書かなくなった一番の理由です。
タグ指定とCSSの併用の場合
ならば縦横のタグ設定とCSSによる設定を両方掛けておけばこれがベストと思う事でしょう。
・タグでサイズ設定…読込速度向上・コンテンツ移動防止
・CSSでサイズ設定…一つの画像を使い回しできる
以上を兼ね揃える訳ですからね。しかし実際はそうではありません。
併用ではコンテンツの移動が起きる
例えば次のコードを見てください。両方を併用した記述です。
img { max-width: 100%; height: auto; }
<h1>タイトル見出し</h1> <p>説明文章が入ります。<p> <img src="image.jpg" width="400" height="200" alt=""> <p>説明文章が下に続きます。説明文章が下に続きます。<p>
実際にこのように指定をすると以下のような現象が起きます。
図:コンテンツの下移動が発生している例
先ほどHTMLで画像の寸法を指定する事で、このコンテンツ移動の問題を回避できると説明したのに、これは一体どういう事なのでしょうか。
CSSで元画像のサイズ以下に縮小する場合
仮に画像の元サイズと表示枠が一致していれば、コンテンツ移動は起きません。
ところが、画像が使用可能なスペースを超えない様に、CSSで元画像サイズ以下のサイズに縮小した場合、htmlに直接指定した数値が効かなくなります。
そうするとコンテンツ移動の問題が発生するのです。
元画像は大きめを用意するのが普通
レスポンシブデザインが主流の今、画像を拡大または縮小して常に使用可能なスペースを埋める事は必須の条項です。
ですので元画像は大きいものを用意して、CSSでサイズ調整をしますよね。
つまりより小さな画面のモバイルデバイスで起きやすいという事になります。
特にWEBの通信環境や処理能力の低いデバイスで発生する可能性が高いと言えます。
ではどうするか?
併用してもダメなら一体どうしたらよいのでしょう。迷うところですよね。
しかし研究開発が繰り返された結果、今はっきり言えることがあります。
それは結果「widthとheightをimgタグに指定しつつ、CSSでサイズ制御する事」という事です。
併用しつつ問題を解決できる新しいソリューション
つまりタグとCSSを併用して、かつコンテンツ移動を完全に防止できる新しいソリューションが生まれた訳ですね。
この設定はSEOにも有効であるというGoogleの後押しもあります。
この結論に至る様々な解決策を、順を追ってご説明していきます。
問題を回避する様々な解決策
上記で説明したレスポンシブ画像のサイズ調整によるコンテンツ移動は、実はかなり以前から知られていました。
この問題に対し「パディングボトムハック」などの回避策が提案されていました。
パディングボトムハック
これはpaddingの「%」が常にコンテナの幅に基づいており、高さと幅が異なっていても一貫したパディングを確保する機能です。
これを利用して、幅の比率に基づいて高さが設定されるコンテナを作成できます。
例えばアスペクト比が16:9の画像があるとしましょう。
次のCSSコードであれば、画像に適したサイズのスペースを作成します。
パディングボトムハックの記述例
.img-container { position: relative; padding-bottom: 56.25%; /* 縦横比9÷16で56.25% */ height: 0; overflow: hidden; }
.img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
パディングボトムハック手法の欠点
この手法の3つの主な欠点は次の通りです。
1.各画像ごとの比率を計算する必要がある(この例では9÷16で56.25%)
そのため異なる画像ごとにカスタムされたCSSコードが必要になる場合があります。
2.CSSコード量が増える
CSSコードは全ての画像に対して設定をする必要があり、1行でも忘れたり削除したりすると機能しません。
3.高度な手法が故に、あまりWEB開発者に認識・使用されていない
正直に言うと少し裏技的な(ハック)方法ですので万人受けしません。
その結果様々な標準化団体により、様々な方向からさらなる改善策が研究されました。
aspect-ratio属性
aspect-ratio属性は、CSSワーキンググループ(CSS WG)が提案した属性です。
これは煩雑化するCSSコードを次のように単純化できるとしています。
aspect-ratioの記述例
img { width: 100%; height: auto; aspect-ratio: 16/9; }
これは通常よく使用されるアスペクト比の画像がよく使われる場合に役立ちます。
これならサイズごとに上記のようなクラスをいくつか作成して対応できますよね。
しかし画像寸法がバラバラのページには個別のCSSコードが必要になる事は変わりません。
確かに一歩前進していますが、完全なソリューションでは無いと言えるでしょう。
intrinsicsize属性
WEBインキュベーターコミュニティグループ(WICG)もこれを修正する提案を作成しました。
WICGは、正式な標準化の前に機能するかどうかを確認するためにテクノロジーを実験できるブラウザ開発者、およびその他の利害関係者のグループです。
彼らは提案したのが「intrinsicsize」という属性です。
<img intrinsicsize="400x400" style="width: 100%">
これはHTMLコードであるため、画像ごとに設定できコーディングは比較的簡単です。
問題:intrinsicsizeの認知度の低さ
しかし一番の課題はこの属性の認知度です。
既にimgタグのwidth・height要素は幅と高さを設定する周知の方法です。
「それに変わる新しい要素」としてこのintrinsicsize属性を浸透させる事は困難だとされました。
attrCSS関数の利用
そして満を持して理想的な解決案が登場します。それがattr関数を使った設定です。
attrCSS関数による画像サイズコントロール
img { width: 100%; height: auto; aspect-ratio: attr(width) / attr(height); }
<img src="image.jpg" width="500" height="500" alt="">
これはaspect-ratio自体にサイズ指定するのはではなく、attrのCSS関数を使用してHTMLに記述されたwidthとheight属性に基づいた適切なアスペクト比を作成します。
このattr関数はしばらく前から存在していますが、利用範囲が非常に制限されていました。
全てのブラウザでサポートされていますが、ここで必要な画像の幅と高さのような幅広いユースケースではサポートされていません。
大いなる可能性を秘める要素
しかし上記であれば常に使用されるimg要素のwidthとheightから、自動的にアスペクト比を計算する事ができます。
これによりHTMLやCSSにアスペクト比ごとの設定をする必要がなく、しかも非常に簡単に追加できます。
以下の条件を満たせば、画像がダウンロードされるのを待つ必要がなく、コンテンツ移動もする事なく、正しい画像の寸法計算ができる訳です。
attr関数発動の条件
以下が設定されていない場合はこのCSS計算が無視され、画像がダウンロードされるまで待機する事になるので注意しましょう。
・HTMLのimgタグにwidthとheightが設定されている事
・CSSのimg設定にmax-width: 100%、height: autoが設定されている事
しかしHTMLタグでwidthやheightを入れて置き、aspect-ratioで計算設定しておけば、CSSコード1行でどのようなimgサイズにも対応できるのは画期的ですよね。
これがimgタグにサイズ指定をいれるべき、と断言する理由の根幹です。
attr関数ソリューションの採用促進
この設定を標準で導入しようと各ブラウザが準備に入ります。
レンダリングコードへの採用
これは単なるCSS属性であるため、一番はユーザーエージェントスタイルシートに記載するのが良いとされていました。
ユーザーエージェントスタイルシートは、デフォルトのCSS定義が設定される場所であり、必要に応じて独自のCSSで上書きできます。
これに上記のaspect-ratioを1行追加する事で、基本的に条件を満たす全てのサイトで自動的に有効になります。
しかしattr関数を使用している以上、他にHTMLに対してattr関数でアクセスするCSSプロパティがあればその影響を受けます。
そこでユーザーエージェントスタイルシートに記載するのではなく、直接HTMLにレンダリングコードとして記述する方法が提唱されました。
他のブラウザへのロールアウト
Firefox
まず最初にFirefoxが実験を行い、下位互換において多少の改善が入りましたがFirefox 71で導入を開始します。
Google Chrome系
Chromeもこれを実装する事を決定し、Chrome 79でデフォルトでロールアウト(実装)しました。
今の所Firefoxと同様に、デフォルトのユーザーエージェントスタイルシートにではなく、レイアウトのコード化されたメソッドを使用します。
これにより他のChrome系のブラウザ(Edge、Opera、Braveなど)でも処理がされます。
Safari
最近では2020年1月にAppleがSafariのTech Previewエディションに実装追加しましたので、近いうちに本番バージョンのSafariにも導入されるでしょう。
これにより主要なブラウザのほとんどで実装される事になります。
attr関数設定の課題
導入は進みましたがこの機能はまだいくつかの問題があります。一部をご紹介しましょう。
・アートディレクション(画像自体の切替)
・遅延読み込み
・画像以外の要素
アートディレクション
この設定はwidthとheightに基づいてアスペクト比を計算するのに最適ですが、スペースに応じて画像自体が変更される場合はどうなるでしょう。
利用可能なスペースに応じて異なる写真を使用する事を「アートディレクション」と呼びます。
表示する端末で違う写真を表示する
この場合デスクトップ向けにワイド画像を使用し、モバイル向けに正方形のトリミングされた画像を使用しています。
srcset属性による実装
画像自体の切替は、imgのsrcset属性を使用して実装ができます。
<img srcset="image_800x400.jpg 800w, image_400x400.jpg 400w" sizes="(min-width: 327px) 800px, 400px" src="image_800x400.jpg" width="800" height="400" alt="">
picture要素による実装
または、picture要素を使う事もできます。
<picture> <source media="(min-width: 327px)" type="image/jpeg" srcset="image_800x400.jpg"> <source type="image/jpeg" srcset="image_400x400.jpg"> <img src="image_800x400.jpg" width="800" height="400" alt=""> </picture>
各要素の課題
現在これらの要素の両方に言えるのは、「幅と高さ」はメインとなるimg要素に一度だけしか設定できない事です。
個々のsrcset代替要素にもう一度「幅と高さ」を設定する事はできません。
現在のところはこれが仕様であり、異なるサイズの画像を使用するとコンテンツの移動が発生します。
ここが修正できる様な提案もされています。
遅延読み込み
画像遅延読み込みは、最初から画像が読み込みがされるのではなく、画面視覚内(ビューポート)に画像が入った時点で読み込みがされます。
画像遅延読み込みの一番のメリットであり、この機能は遅延読み込みでの使用には最適です。
正しく機能すれば、読み込みが発生した後のコンテンツ移動は回避されます。
しかしユーザーがスクロールする速さやネットワークによってはそうならない場合があります。
imgタグsrc要素がない場合
問題は遅延読み込みの手法では、img要素自体を使用しないあるいはsrc要素を使用しない場合がある事です。
ブラウザがデフォルトで画像をダウンロードしないように、あえて使わない訳ですね。
こういった面でも、aspect-ratioで確実に制御できるような修正が待たれるところです。
loading=lazy構文
ネイティブの遅延読み込みは最近Chromeチームによってリリースされ、それ以来HTML仕様に追加されました。
他のブラウザでもこれをサポートしようとする中でFirefoxはいち早くこれを取得し、Safariも後から導入する予定です。
記述事例
<img src="image_800x400.jpg" width="800" height="400" loading="lazy" alt="">
画像以外
現時点でブラウザはimg要素だけのためにこれを実装しています。
しかしゆくゆくはvideoタグやiframeタグ、objectタグなどの要素にも導入すべきと議論が進んでいる様です。
このCSSのattr関数とaspect-ratioプロパティがimg以外の要素にも利用可能になれば、Webサイト開発者は必要な要素に対してこれを実装できるようになります。
まとめ:サイズ指定はSEO上必須
WEBサイト管理者が労せずに新機能が導入できる事自体は素晴らしい事ですよね。
もちろんその背景にはブラウザ開発者や標準化チームのハードワークがある訳ですが、実際にはまだ多くの課題がWEBサイトにはあります。
これら改善策は導入するための摩擦が少ないほど採用される可能性も高く、それだけ優れたものである証です。
そして今回のwidth・heightの設定もまさにそうですが、改善策を浸透させるためにSEOのランキング要素にされる事がままあります。
読込速度とコンテンツ移動防止はSEOの重要課題
レスポンシブ画像による読み込み遅延やコンテンツ移動など、ユーザーへの影響を修正する事は、今SEO対策にとって重要な課題の一つです。
WEB開発者は今すぐに、width属性とheight属性をきちんとマークアップしているか確認しましょう。
サイズ指定は今となっては見逃せない設定であり、多くのCMSおよび公開ツールであれば比較的簡単に導入できます。
ブラウザ開発もGoogleもユーザーのために
ブラウザ開発者側も練りに練った上で実装する訳ですから、ユーザーのためにもWEB担当には積極的に利用して欲しいはずです。
タグ設置は任意導入ですが、サイト評価の下落につながるのであれば「SEO面では強制的導入」ですよね。
ブラウザ開発者とGoogleとの利害が一致した形です。
まだ導入率は6割
HTTPArchiveを照会したところ、62%のWEBサイトがwidth・height属性が付いているそうです。
正直に想定していたよりもはるかに高い数値ですが、さらに浸透させていく必要がありますよね。
まだ見直ししていない管理者はぜひimgへのwidth・heightタグの設置を進めてください。
それによりユーザーのエクスペリエンス(UX)が改善されれば、SEO順位向上に必ず結びつきます。