HTML images are used to display pictures on a webpage — like adding spice to plain text! 🍜

The <img> tag is what makes it happen. It’s short for “image,” and it tells the browser, “Hey, show this picture right here.”

Here’s the basic format:

• src → means “source.” It’s the path or URL of your image file.

Example: src="dog.png" or src="https://example.com/dog.png"


• alt → means “alternative text.” This shows up if the image can’t load or for screen readers (important for accessibility).

Example: alt="A cute golden retriever puppy"


You can also add width and height → to control image size.


<img src="car.jpg" width="300" height="200">


Output:



style → to make it fancy with CSS.


<img src="flower.jpg" style="border-radius: 10px; border: 2px solid gray;">


Output:





<img> tag is self-closing, meaning it doesn’t need a closing tag like </img>.




Image Sources (src):


You can load images from different places:



• Local file (same folder):


<img src="cat.png" alt="Cute cat">


Output:





• Subfolder:



<img src="images/cat.png" alt="Cute cat">



• Online (absolute URL):


<img src="https://example.com/cat.png" alt="Cute cat">



💡 If the image doesn’t load, the alt text appears instead — super important for accessibility and SEO.


Clickable Images:

You can make an image behave like a link (perfect for logos or product photos):


<a href="home.html"> <img src="home-links.png" alt="home-links"> </a>


Output:







Image Formats:


Each image format has its own superpower:



Format	Best For	Note	Extension
JPG/JPEG	Photos,gradient	Compressed, smaller size	.jpg/.jpeg
PNG	Transparent images	Higher quality	.png
GIF	Animations	Limited colors	.gif
SVG	Icons,Logos	Scales infinitely	.svg
WEBP	Modern Format	Combines quality + compression	.webp





So yeah — <img> may look tiny, but it’s a powerhouse tag that fuels the beauty of the web. Without it, no memes, no product photos, no art galleries — just text walls. 😬