<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.
browser support
chrome | firefox | safari | |
---|---|---|---|
loading | 77 | 75 | 15.4 |
aspect-ratio | 88 | 89 | 15 |
object-fit | 32 | 36 | 10 |