In HTML img element is used to display every types of images like:jpg, png, jpeg...
It can also display svg.
img element 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="" 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="" loading="lazy-loading"/>

We can control the width and height of images using width and height attributes.
Look at this:

<img src="" 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




I am a web developer who writes web development content for you to make web development easier

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

PIM-Enabled Instructions: A Low-Overhead, Locality-Aware Processing In-Memory Architecture

Address Book (MVC)

Netflix — “See what’s next”


Calculating a suggested compensation or percentage in PowerApps

How we developed cloud-based TOS for maritime SME’s (stevedores)

Warehouse Management System (Marine Digital)

Day 48 of Game Dev: Improving Performance with Occlusion Culling in Unity!


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


I am a web developer who writes web development content for you to make web development easier

More from Medium

css reset vs normalize.css

How does Bootstrap help with Web Development?

Sephora Website Cloning

HTML Lesson 8: Block & Inline Content in HTML