A blog for technology, SEO tips, website development and open source programming.

Which 3 attributes your images must have?

0 3,835

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!

Before that you need to ensure that your images are as small as possible. You can use online tools like Tinypng or  Squoosh that can help you optimise your images.

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 😉
Happy coding!

Follow me on Instagram

😉  That’s it for now. 

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.

Leave a Reply

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More