Performance means everything in creative web design and one of the best ways to start with performance conscious design is to optimize your images.
Images are single-handley the biggest degrader in performance. They're large, slow to load, and can cause unexepected layout shifting when not used correctly.
I talked about how to solve the layout shifting issues in another tip. Today, I want to talk about improving image performance via something called lazy-loading.
In the simplest terms possible, lazy-loading allows you to defer or delay when an image gets loaded on the page. Rather than loading at the same time the user visits the page (this is called eager loading), the image loads when the user scrolls down the page and comes across the image (this is referred to as lazy).
Lazy loading can help improve load times and performance by delaying large images from loading in until they're actually needed.
On the flip side, because image loading is delayed, your users might see an unstyled or empty block before the image is loaded in.
To add lazy-loading to your images, simply add the attribute like so:
<img src="..." alt="..." width="..." height="..." loading="lazy" />That's it, you now have better optimized images on your site ✋
