How to lazy load an image in css?

@stephon 

Lazy loading an image in CSS involves using a technique called "Responsive Images" which loads different images based on the device's screen size or resolution. This technique can be used to load smaller, lower-resolution images for devices with smaller screens, and larger, higher-resolution images for devices with larger screens.

Here's an example of how to lazy load an image in CSS using the background-image property:

1
2
3
4
5
6
7
8
9

.lazy-image {
  background-image: url('placeholder.jpg');
}

@media (min-width: 768px) {
  .lazy-image {
    background-image: url('large-image.jpg');
  }
}

In this example, the lazy-image class is applied to an element that will display the image. Initially, a small placeholder image is loaded as the background image. When the screen width is 768 pixels or larger, the large-image.jpg file is loaded as the background image.

This technique is useful for reducing the initial page load time, especially for pages with many images. By loading smaller images initially, the page can load faster, and larger images can be loaded as needed when the user interacts with the page.