画像の遅延読み込み（画像の掲載場所付近までスクロールしない限り画像ファイルを読み込まないようにしてくれるブラウザ側の機能で、HTML5で正式に追加された仕様）は通信量削減に役立つので、最近では問答無用でimg要素にloadiong="lazy"を加えている。ただ、この属性を加える際には注意しないと、ページ内リンクの移動距離が正しくなくなって、ページ内リンクがうまく機能しなくなることがある。その原因は、img要素にwidthやheight属性を書いていないことだ。昨今、レスポンシブなデザインが当たり前になったので、img要素にwidth属性もheight属性も書かないことが多かったのだが（CSSでサイズを指定するからHTMLにサイズを書いても無駄だろうということで）、widthやheight属性を省略してしまうと、実際に画像が読み込まれるまで専有面積が分からないので、ページ内リンクで長距離を移動する際には移動先の座標がズレてしまうのだ。これを防ぐには、とりあえずwidthとheight属性をimg要素に書いておくこと。実際に表示されるサイズである必要はなく、たぶん縦横比が分かれば良いのだと思うので、画像の原寸サイズでも指定しておけば良い。このwidth・heightの両属性がHTMLにあれば、CSSと組み合わせることで画像の表示面積が分かるので、遅延読み込みによって画像が読み込まれていなくてもページ内の座標が確実に決まるから、ページ内リンクがズレることもない。HTML側でサイズの指定がなくても、CSS側でピクセル単位でサイズが指定されていれば問題はないだろうが、レスポンシブWebデザインだとたいてい画像サイズは割合で指定されているから、画像の縦横比が(HTMLから)分からないと実際の表示面積が計算できない。もしかしたら業界では当たり前のことだったかも知れないのだが、私はそこに気付くのに結構な時間が掛かってしまった。