Skip to content
Hallway
0:00 / 0:00

#html#css#aspect-ratio

Do This to Improve Image Loading on Your Website

Mozilla Developer

30K subscribers • 1 video on Hallway

YouTube
  • Recommended by 1 person: 1 in engineering communities.
  • Presented by Jen Simmons, Developer Advocate at Mozilla
  • May be out of date. Uploaded 7 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

52K views7 years ago1 recommendation

Web developmentCSS and layoutHow browsers workWeb performance

Jen Simmons explains how adding width and height attributes to HTML images allows browsers to calculate aspect ratios and prevent layout jank.

Ever since responsive web design started, we've had a problem with the way images load on the web. Now, Firefox is fixing the problem. Add width & height attributes to all your images, and see load jankiness disappear. Jen Simmons explains how. Try out the demos for yourself: Fixed-width layout: codepen.io/jensimmons/pen/jOONZaZ?editors=1100 Responsive layout: codepen.io/jensimmons/pen/mddddPw?editors=1100 #webperformance #imageloading #jensimmons

Why it's here

1 person recommends this

What people say. Recommended as a clear explanation of how setting image dimensions prevents layout shifts and improves web performance.

u/natewiebe13in r/programming • Recommends

On “Firefox (75+) now supports native lazy loading of images”

Actually, setting the image dimensions using the width and height attributes is ideal. Firefox and Chrome actually use these values to set a aspect ratio on the img element. You can then use CSS to make the image responsive such as width 100%, but it will now have the proper aspect ratio until the image downloads. Edit: Here's Jen Simmons explaining this a bit more on the Mozilla Developer channel link to this video
60View on Reddit