You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport.
src attribute, you put it in
data-src — which is the same pattern for responsive images:
srcwhere it belongs
- The browser requests the image and it loads into view
The result is the browser loading fewer images up front so that the page loads faster. Additionally, if the user never scrolls far enough to see an image, that image is never loaded. That equals faster page loads and less data the user needs to spend.
"This is amazing!" you may be thinking. And, you’re right... it is amazing!
That said, it does indeed introduce a noticeable problem: images not containing the
src attribute (including when it’s empty or invalid) have no height. This means that they're not the right size in the page layout until they're lazy-loaded.