High Performance Imagesの「Browser Image Loading」を読んだ

Browser Image Loadingを読みました。タイトルの通り、ブラウザで画像ロードをどのように行うかを知ることができます。

書籍について

書籍は、上記二項目で構成されています。

Referencing Imagesは、ロード処理を説明するための基礎知識についてです。

ロード処理が行われるトリガーとしてよく知られているものにimgタグやCSSのbackground-imageがあります。その他にも、image-setプロパティやpictureタグ。JavaScriptだと、new Image()やHTMLImageElementなどが紹介されていました。

background-imageは、altをサポートしていないことからスクリーンリーダーが対応できません。これは、Userのアクセシビリティを下げるためオススメされていませんでした。

また、background-imageはコンテンツとソフトウェアを分離するというbest practiceから外れるため技術的に可能ならば他の方法を検討すべきだと学びました。

本書で、imgタグでheightとwidthを指定しないとリフローのコストが掛かってしまうことを知りました。

リフローについて調べる過程で、visibility: hiddenとdisplay: noneの違いは、後者はリフロー処理が走ってしまうことであることを学びました。両者に共通してる点は、リペイントを行うことです。

When Are Images Downloaded?は、具体的なロード処理についてです。

IE7以前は、Preloaderという機能が実装されていなかったため非効率なロードでしたがIE8以降はエッジケースを無視することで効率的な並列ロードでJSファイルをロードできるようになりました。

他にも、TCPの混線でパケットロスを防ぐためブラウザが同一ホストでの接続数を制限していることを知りました。これを解決するための手段として、複数のドメインから分けてリソースを取得するドメインシャーディングがあります。

私がWebやブラウザという基礎知識がないこと、画像ロード処理は複雑ということがわかりました。

「Browser Image Loading」は、「High Performance Images」の一部なので全て読みたいです。