img {
   content-visibility: auto;
}

TL;DR Explanation about What Does This...

The content-visibility property in CSS indicates to the browser whether or not an element’s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser not to load the contents of an element until it’s needed.

Think of it sort of like lazy loading in the sense that an off-screen element’s children are not rendered until they enter the viewport.

.element {
  content-visibility: hidden;
}

The main point of using content-visibility is performance. It can help to speed up page load because the browser is able to defer rendering elements that are not in the user’s viewport until the user scrolls to them. The results can be dramatic. Here are the results of a performance test that Una Kravets and Vladimir Levin put together showing the difference that content-visibility can make on a typical webpage.

The content-visibility property accepts one of three values:

1. hidden: The element bypasses its contents (kind of similar to applying display: none; to the contents).
2. visible: There is no effect and the element is rendered as normal.
3. auto: The element has layout, style, and paint containment. The browser gets to determine if this content is relevant to the user and, if it isn’t, then the browser will skip it. At the same time, the element is still focusable, selectable and accessible to things like tabbing and in-page search.