이미지가 가져야 할 3가지 속성!

They say a picture tells a thousand words. It certainly costs a thousand words when it comes to performance!
Images tend to be quite large files, so take a while to load. They also block rendering so they have to complete before content further down the page can load.

But there is hope! We can make images lazy and get out the way of the rest of the page with some simple attributes!

Here's a current image on a website:

<img src="some_image_file.png" />

We can improve the loading of this image with a few attributes, like so:

<img src="some_image_file.png" loading="lazy" decoding="async" alt="A Description of the image" />

Easy!!

Lets dig into those attributes.

Background images are a bit more tricky to be lazy loading.

In summary, these 3 attributes improve the performance of your website with minimal effort!
There is no browser support issues or any reason not to use them, so add them to your images now!

These attributes also work is you are using a picture element, just set them on the image element as normal.
Here's an example of using a picture element for switching images based on dark mode or not.

<picture>
    <source srcset="/images/linkedin-white.webp" media="(prefers-color-scheme: dark)" />
    <img class="linkedin" src="/images/linkedin.webp" alt="LinkedIn Profile" loading="lazy" decoding="async" />
</picture>

They also work is you are using a image element, with multiple sized images via srcset attribute.

Add these 3 simple attributes to your images right now!

Happy Building!