In HTML img element is used to display every types of images like:jpg, png, jpeg...
It can also display svg.
img has many attributes but the most common ones are:loading, src, srcset, height, width and alt.
When we wanna to put image into website we have target the path or address of that image we interested in it.
It's implementation looks like below:
<img src='yourimagepath/yourimagename.png'/>
Inside src attribute we can put local images path or online path.
The second important attribute is alt attribute, you have to always include this attribute into your img element because sometimes your image path isn't correct so the text is written inside alt attribute instead displays.
Your text should be meaningful that conveys the purpose or aim of your image to users.
When your user has slow internet connections your images won't load properly in that case alt attribute plays crucial role.
For example
<img src="https://www.freecatphotoapp.com/yourcatphoto.jpg" alt="my cat photo eating food"/>
One thing keep in mind that HTML is not case sensitive language you can write it's elements into capital case or camel case it doesn't shows any error message.
Google chrome developers recommend us to use loading attribute to speed image loading process.
Looks like this
<img src="https://www.freecatphotoapp.com/yourcatphoto" loading="lazy-loading"/>
We can control the width and height of images using width and height attributes.
Look at this:
<img src="https://www.freecatphotoapp.com/yourcatphoto" width=200 height=150/>
I hope you enjoy the tutorial.
If you have any suggestions or criticism please let me know.
Please share let others to know
Top comments (0)