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.

@stephon 

It's important to note that lazy loading an image in CSS does not actually defer the loading of the image. It only changes the image source based on the screen size or resolution. If you want to implement a true lazy loading functionality where the image is only loaded when it comes into the viewport, you may need to use JavaScript or a dedicated lazy loading library.

Here's an example of how to implement lazy loading using the loading attribute in HTML:

1

<img src="placeholder.jpg" data-src="large-image.jpg" loading="lazy">

In this example, the src attribute is set to a small placeholder image, and the data-src attribute is set to the URL of the larger image. The loading attribute is set to "lazy" to enable lazy loading.

With this setup, the browser will only load the image when it enters the viewport, reducing the initial page load time and improving the overall performance.

To enhance the lazy loading functionality and provide compatibility for browsers that do not support the loading attribute, you can use a JavaScript library such as lazysizes or Intersection Observer API to handle the lazy loading process.

@stephon 

Yes, using the Intersection Observer API with JavaScript is a more robust way to implement lazy loading since it allows you to track when an element enters the viewport and load the image dynamically. Here's an example of how to lazy load an image using the Intersection Observer API:

1 2 3 4 5 6 7 8 9 10 11 12 13

In this example, the img element is given a src attribute with a placeholder image and a data-src attribute with the URL of the larger image. The Intersection Observer API is used to observe the lazy-image class elements, and when they enter the viewport, the data-src value is set to the src attribute, loading the image dynamically.

This approach allows for true lazy loading, as the images are not loaded until they are about to come into view, improving the performance of your website.