画像が読み込まれる前にカクつかないようにする(レスポンシブ対応)

imgタグにwidth、heightを指定しないと、画像が読み込まれる際にカクつくことがある(Jankって言うらしい)

<div class='wrap'>
  <img src='hoge.jpg'>
</div>

widthとheightを指定して解決?

解決するけど、数値を絶対指定しないといけないのでレスポンシブ対応がむずい。

モダンブラウザの最近のバージョンではwidthとheightの数値からアスペクト比を計算していい感じにしてくれるらしいから、最新のブラウザ以外は一瞬崩れるくらい知らん！って割り切りもありかも。

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

<div class='wrap'>
  <img src='hoge.jpg' width='320' height='240'>
</div>

擬似要素を使って解決

画像と同じ大きさの透明な擬似要素を設置することで、動的に領域を確保することができます。

<div class='wrap'>
  <img src='hoge.jpg'>
</div>

.wrap {
  position: relative;
}
.wrap:before {
  content: '';
  display: block;
  background: transparent;
  width: 100%;
  padding-top: 75%;  
}
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

padding-top: 75%の部分は画像の縦横比に合わせて調整。
縦/横 × 100%です。

参考

• CSSだけでアスペクト比を固定するテク - Qiita