Text is great, but the web would be pretty boring without images. The <img> tag lets you embed pictures right into your page. Unlike most HTML tags, <img> is self-closing — there is no closing tag. Everything it needs is in the attributes.
The img Tag and src Attribute
The src attribute tells the browser where the image file is located. It works just like the href on a link — you can use a relative path or a full URL.
<img src="images/photo.jpg" alt="A description of the photo">
The alt Attribute — Why It Matters
Always include the alt attribute. It serves two purposes: it describes the image for screen readers (helping visually impaired users) and it shows up when the image fails to load. Think of it as the image's backup plan.
<img src="cute-dog.jpg" alt="A golden retriever puppy playing in the grass">
Do not stuff keywords in there just for SEO — write a genuine description of what the image shows.
Setting Width and Height
You can control how big an image appears using the width and height attributes. If you only set one, the browser automatically scales the other to keep the aspect ratio.
<img src="landscape.jpg" alt="Mountain view" width="600" height="400">
Setting both width and height prevents the page layout from jumping around while the image loads. That makes for a much smoother experience.
Supported Image Formats
Browsers support several image formats. JPEG is best for photos, PNG for graphics with transparency, GIF for simple animations, and SVG for icons and logos that need to scale perfectly at any size. WebP is a newer format that often gives smaller file sizes.