<img>

the <img> html element embeds an image into the document. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.

object-fit

please compare it with the original image.

lazy loading

please scroll down. you can check lazy loading with chrome developer tools and so on.

all photos from unsplash

browser support

chrome firefox safari
loading 77 75 15.4
aspect-ratio 88 89 15
object-fit 32 36 10
← back to home