Indicating native image dimensions with the width & height attributes and an inline placeholder image prevent content reflow while the data-src attribute stores the path of the real/final image:
(If the <img> is inside a link, place the <noscript> fallback outside the <a>.)
Image placeholders can be styled as desired:
~70% support loading="lazy" Chrome, Firefox, Edge (Blink), Opera
~21% support IntersectionObserver (but not loading="lazy") Safari, Edge (pre-Blink)
~9% support neither IE, older Safari & other old browsers
This setup can also support <iframe>s by adding an iframe[data-src] selector, however many uses of <iframe>s may have a better alternative, for example on-demand loading for embedded videos like YouTube.
Lazy loading these images saves up to 240KB of initial-load page weight:
Even More Speed
Lazy loading is just one of several important strategies to reduce initial-load page weight and streamline the loading process. Complete the full page speed checklist to take advantage of every opportunity to maximize speed and in turn, user experience.