It’s very important to include an image to post to make it more interactive and triggering to your audience. As they say “a picture tells a thousand words.” (Yes i know cliché phrase 😉) But when it comes to performance matters you need to be extra careful with size, attributes, etc. Check out is this post Which 3 attributes your images must have?
But there is hope! 🙃
We can make images lazy and get out the way of the rest of the page with some simple attributes!
Add 3 attributes to your Images
Here is a Sample Image:
<img src="this_is_an_image.png" />
1. Add “loading=lazy” attribute
<img src="this_is_an_image.png" loading="lazy" />
Lazy allows the browser to decide when to load the image, which is will do when the user is nearer the content. Meaning we don’t have to load a full page of images straight away, only the ones we can see immediately. It is widely supported from most browsers
2. Add “decoding=”async” attribute
<img src="this_is_an_image.png" loading=lazy decoding="async"/>
This gives the browser a hint on how you want your image to be decoded, either synchronously or asynchronously. Either getting in the way of the rest of your content or not. It is supported by all browsers.
3. Add “alt=Image description” attribute
<img src="this_is_an_image.png" loading=lazy decoding="async" alt=Image description" />
Ok this will not increase your site performance but it takes a huge impact on accessibility. The purpose is to describe images to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image. Including alt text with your images ensures all users, regardless of visual ability, can appreciate the content on your site.
Add these 3 simple attributes and make your images simply work better on your website 😉
That’s it for now.
If you liked this article, then please subscribe to my YouTube Channel for video tutorials.