Lazy loading images is a simple method that can significantly improve the loading speed of your website. The basic implementation of lazy loading involves adding just a single line of code. However, there are more advanced techniques available that can enhance the lazy loading experience. These techniques allow you to display blurred placeholders and achieve a smooth transition from the placeholder image to the full image. In this article, I will explain everything you need to know about lazy loading and guide you on how to create this advanced lazy loading effect.
From this:
To this:
But What is Lazy Loading?
Lazy loading is a technique that delays the loading of certain assets, such as images, until they are actually needed on a webpage. Specifically, when it comes to images, lazy loading ensures that an image is not downloaded until the user scrolls to the point where the image becomes visible on their screen. This approach offers significant benefits in terms of site performance because you are only downloading the images that the user will actually see.
Lazy loading is particularly valuable for websites that contain numerous images because it allows you to save bandwidth by avoiding the unnecessary download of images that are not immediately visible. Even if you have a fast internet connection or typically browse sites with small and optimized images, you might not fully appreciate the advantages of lazy loading. However, for many users, lazy loading can be a game changer, especially those with slower internet connections. Images are often the largest assets that users have to download, so even with a fast connection, lazy loading images can make a substantial difference in reducing the overall load time of your website.
Simple Lazy Loading
As mentioned earlier, implementing lazy loading for images is incredibly straightforward. It involves adding a single attribute to the image tag. By setting the "loading" attribute to "lazy," you enable lazy loading for that particular image. The browser then takes care of determining the optimal time to download the image based on its proximity to the visible part of the screen.
<img src="image.jpg" loading="lazy" />
Downside - The biggest downside to this basic lazy loading is that the user will see a blank space where the image should be until the image is downloaded.
The basic lazy loading technique described earlier may result in a suboptimal user experience because users will see a blank space where the image should be until it is fully downloaded. To enhance the user experience, the remainder of this article will explain how to leverage lazy loading to display a blurred placeholder image until the full image is downloaded. This approach ensures that users have a visual representation of the image while it is loading, leading to a more engaging and seamless experience.
Advanced Lazy Loading
Using Blurry Placeholder Image
To generate a blurry placeholder image, you can create a low-resolution version of the original image. There are multiple approaches to accomplish this. For example, you can utilize services like BlurHash, manually resize the image using design tools like Figma, or employ automation tools like ffmpeg. In this article, we will employ ffmpeg as it provides flexibility and easy automation. To generate the placeholder images, you can execute the following code in the command line, ensuring that you are in the directory where the image is located:
ffmpeg -i imageName.jpg -vf scale=20:-1 imageName-small.jpg
In this command, "imageName.jpg" represents the name of the original image file, and "imageName-small.jpg" denotes the name of the generated placeholder image file. The "scale=20:-1" argument specifies that the width of the placeholder image should be 20 pixels, while maintaining the original image's aspect ratio. You can adjust the width according to your preference, but generally, a width of 20 pixels works well for most images and ensures near-instant loading, even on slower internet connections. The size of the placeholder image created using this method is typically less than 1kB.
After generating the small placeholder image, the next step is to create a <div> element and set its background image as the previously generated super small image. This <div> will serve as the placeholder image displayed until the full image is downloaded. Here's an example code snippet:
<div class="blurred-img"></div>
In the CSS, you can define the styling for the .blurred-img class to set the background image, adjust its appearance, and ensure proper display:
.blurred-img {
background-image: url(imageName-small.jpg);
background-repeat: no-repeat;
background-size: cover;
}
In this code, imageName-small.jpg refers to the filename of the small placeholder image you generated using ffmpeg or any other method. The background-repeat: no-repeat; property prevents the image from repeating, while background-size: cover; ensures it covers the entire <div> element.
To ensure that the blurred placeholder image is properly sized, we can include an <img> tag within the <div class="blurred-img">. By default, we set the opacity of the <img> to 0 to hide it until the full image is loaded.
<div class="blurred-img">
<img src="imageName.jpg" loading="lazy" />
</div>
In the CSS, you can add the following style rule to hide the <img> by setting its opacity to 0:
.blurred-img img {
opacity: 0;
}
The blurred effect is automatically achieved because the super small image is scaled up by the browser. If you desire more blur, you can use the CSS filter property to apply a blur filter to the .blurred-img class. However, additional blur may not be necessary in this case.
.blurred-img {
filter: blur(10px);
}
To further enhance the loading effect, you can add a pulsing animation to the placeholder image. This will make it more noticeable that the image is loading.
.blurred-img::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
animation: pulse 2.5s infinite;
background-color: white;
}
@keyframes pulse {
0% {
opacity: 0;
}
50% {
opacity: 0.1;
}
100% {
opacity: 0;
}
}
By adding the above CSS code, a pulsing animation will be applied to the placeholder image, giving it a fading in and out effect.
To fade in the full image once it is loaded, we need to add some JavaScript code to handle the image load event. Below is the code breakdown:
<div class="blurred-img">
<img src="imageName.jpg" loading="lazy" />
</div>
const blurredImageDiv = document.querySelector(".blurred-image");
const img = blurredImageDiv.querySelector("img");
function loaded() {
blurredImageDiv.classList.add("loaded");
}
if (img.complete) {
loaded();
} else {
img.addEventListener("load", loaded);
}
In the JavaScript code, we select the .blurred-img div and the <img> element within it. We check the complete property of the image to determine if it has already been loaded. If it has, we call the loaded() function directly. Otherwise, we add an event listener to the image for the load event, which will fire once the image is loaded. When the image is loaded, the loaded() function is called, which adds the loaded class to the .blurred-img div.
.blurred-img {
background-repeat: no-repeat;
background-size: cover;
}
.blurred-img::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
animation: pulse 2.5s infinite;
background-color: var(--text-color);
}
@keyframes pulse {
0% {
opacity: 0;
}
50% {
opacity: 0.1;
}
100% {
opacity: 0;
}
}
.blurred-img.loaded::before {
animation: none;
content: none;
}
.blurred-img img {
opacity: 0;
transition: opacity 250ms ease-in-out;
}
.blurred-img.loaded img {
opacity: 1;
}
In the CSS code, we make a few changes. We remove the animation and content from the .blurred-img::before element when the image is loaded, stopping the pulsing animation. We also add a transition property to the .blurred-img img element, so it smoothly fades in when the loaded class is added to the .blurred-img div. Lastly, we set the opacity of the .blurred-img img to 1, making it visible when it is loaded.
By implementing these changes, the final result will be a blurred placeholder image that fades in the full image once it is loaded. You can adjust the network speed in the developer tools to see the loading animation in action.
The End
Lazy loading images is a simple technique to improve website user experience. It involves deferring the loading of images until they are needed, which saves bandwidth and optimizes performance. With just a single line of code, you can implement basic lazy loading. Additionally, you can enhance the loading process by generating low-resolution placeholder images and adding visual effects like blur or animations. To achieve a smooth transition, JavaScript can be used to fade in the full image once it is loaded. By applying these techniques, you can ensure efficient image loading and a positive user experience on your site.