HTML Images

Images make web pages more visually attractive and informative. HTML uses the <img> tag to embed images into a web page.

---

The <img> Tag

The <img> tag is an empty element — it has no closing tag. It requires at minimum two attributes: src and alt:

<img src="image.jpg" alt="Description of image">

Attribute	Description
src	Path or URL to the image file
alt	Alternative text if image cannot be displayed
width	Width of the image in pixels
height	Height of the image in pixels
title	Tooltip text shown on hover
loading	lazy to defer loading off-screen images

---

The src Attribute

The src attribute specifies the path to the image. It can be an absolute or relative URL:

<!-- Relative path (image in same folder) -->
<img src="photo.jpg" alt="Photo">

<!-- Relative path (image in subfolder) -->
<img src="images/photo.jpg" alt="Photo">

<!-- Absolute URL (image from internet) -->
<img src="https://www.example.com/images/photo.jpg" alt="Photo">

---

The alt Attribute

The alt attribute provides alternative text for the image. It is displayed when:

• The image cannot be found or loaded
• The user is using a screen reader (visually impaired)
• The browser has images disabled

<img src="logo.png" alt="RedoHub Logo">
<img src="cat.jpg" alt="A fluffy orange cat sitting on a windowsill">

<!-- Decorative image — empty alt is fine -->
<img src="divider.png" alt="">

---

Width and Height

Always specify width and height so the browser can reserve space for the image before it loads — preventing layout shifts:

<img src="photo.jpg" alt="Landscape" width="600" height="400">

---

Image as a Link

Wrap an image with an <a> tag to make it clickable:

<a href="https://www.redohub.com">
    <img src="logo.png" alt="RedoHub" width="120">
</a>

---

Image Floating

Use CSS float to wrap text around an image:

<img src="photo.jpg" alt="Photo" style="float: left; margin-right: 15px;">
<p>This text wraps around the image on the right side.</p>

---

Lazy Loading

The loading="lazy" attribute defers loading of off-screen images until the user scrolls near them — improving page speed:

<img src="large-photo.jpg" alt="Large photo" width="800" height="600" loading="lazy">

---

Common Image Formats

Format	Extension	Best For
JPEG	.jpg / .jpeg	Photographs — small file size, lossy compression
PNG	.png	Graphics with transparency, logos, icons
GIF	.gif	Simple animations, limited to 256 colors
SVG	.svg	Vector graphics — scalable without quality loss
WebP	.webp	Modern format — smaller than PNG/JPEG, supports transparency
AVIF	.avif	Newest format — best compression, great quality