Lazy Loading & Code Splitting

<img src="placeholder.jpg"
     loading="lazy"
     data-src="actual-image.jpg"
     alt="Description"
     onload="this.src=this.dataset.src">

Using only JavaScript to load images
Loading all images immediately
Using the native loading="lazy" attribute
The native loading="lazy" attribute is the recommended strategy for lazy loading images in modern browsers because: 1) It's built into the browser and doesn't require JavaScript, 2) Browser can optimize loading based on viewport and scroll position, 3) Provides better performance than JavaScript-based solutions, 4) Falls back gracefully in unsupported browsers. While JavaScript solutions were previously necessary, modern browsers have standardized image lazy loading through this attribute. For older browsers or more complex scenarios, you can still implement JavaScript-based solutions or use libraries like Intersection Observer API for more control.
Using CSS background images