画像サイズの明示

Silktide は、ページ上の画像にサイズが指定されているかをチェックします。これにより、ブラウザーは画像をダウンロードする前に、それぞれに必要なスペースを確保できます。サイズが指定されていない画像は、読み込まれるにつれてページがガタつく原因になります。

<!-- 問題: サイズがないため、ブラウザーはスペースを確保しない -->
<img src="hero.jpg" alt="Spring collection">

<!-- 修正後: ブラウザーは直ちに 1200x600 のスペースを確保する -->
<img src="hero.jpg" alt="Spring collection" width="1200" height="600">

重要な理由

画像ファイルが読み込まれるまで、ページ側で指定されていない限り、ブラウザーは画像の大きさを知る方法がありません。その情報がないと、ブラウザーは隙間のない状態でページを表示し、各画像の読み込み時に他の要素を下へ押し下げます。そのため、文章の途中でテキストが跳ねたり、最後の瞬間に対象が移動して訪問者が誤った場所をタップしたりします。

このような移動はレイアウトシフトとして測定されます。これは、検索順位にも影響する Google のの一部です。サイズが指定されていない画像は、レイアウトシフトの最も一般的な原因です。

修正方法

すべての画像と動画に width および height 属性を追加し、ファイルの実際の比率と一致させます。ブラウザーはこれらを使用して、によって画像がレスポンシブに拡大縮小される場合でも、正しいアスペクト比でスペースを確保します。
レスポンシブ画像では属性を残し、max-width: 100%; height: auto; などの CSS に拡大縮小を任せます。確保されたスペースも画像に合わせて拡大縮小されます。
属性を追加できない場合は、画像またはそのコンテナーに aspect-ratio プロパティを指定して、代わりに CSS でスペースを確保します。
をチェックします。多くの CMS は、エディターから画像を追加するとサイズを自動的に挿入します。そのため、サイズがない場合は、手書きの、テンプレート、または埋め込みコンテンツが原因であることがよくあります。

Silktide によるテスト方法

速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
明示的なサイズなしで表示されるすべての画像を検出します。使用可能な width／height 属性がなく、サイズを固定する CSS もない画像が対象です。
サイズが指定されていない各画像と、ページ上の位置を報告します。

トラブルシューティング

ページを読み込んでも問題なく見えます

画像がキャッシュされている場合や接続が高速な場合、画像が非常に速く読み込まれるため、目に見える移動が起こらないことがあります。低速なネットワークを使用する訪問者には、同じページが少しずつ組み立てられていくように見えます。画像の読み込みが速い場合、スペースを確保してもコストはかかりません。また、読み込みが速くない場合には移動を防げます。

固定サイズにするとレスポンシブデザインが壊れませんか？

いいえ。最新のブラウザーでは、width および height 属性は画像の固定サイズではなくアスペクト比として扱われるため、CSS で画像を任意の画面に合わせて拡大縮小できます。属性と用の CSS は連携して機能します。