Images make web pages more visually attractive and informative. HTML uses the <img> tag to embed images into a web page.
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 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 provides alternative text for the image. It is displayed when:
<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="">alt attribute. It is required for accessibility and SEO. Without it, screen readers skip the image entirely.
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">img { max-width: 100%; height: auto; } — this makes images scale down on smaller screens while keeping the aspect ratio.
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>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>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">| 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 |
alt text. Beyond breaking accessibility for screen-reader users, a missing alt also means search engines have nothing to understand the image by.
width/height. Without them, the browser doesn't know how much space to reserve, so the page jumps around as images load in — this is measured as Cumulative Layout Shift (CLS), a Core Web Vital.
Pairing <figure> and <figcaption> with an image gives you a captioned, semantically correct image block — better than a plain <img> next to a stray <p>:
<figure>
<img src="mountain.jpg" alt="Snow-capped mountain at sunrise" width="500" height="300" loading="lazy">
<figcaption>Mount Fuji at sunrise, taken from the 5th station.</figcaption>
</figure>Rendered result (using a placeholder box in place of a real photo):
Q: Should alt be empty for decorative images?
A: Yes — use alt="" (not omitted entirely) so screen readers correctly skip past purely decorative images instead of announcing the file name.
Q: What's the best image format for the web today?
A: WebP or AVIF for most photos — both give noticeably smaller files than JPEG/PNG at similar quality, with wide browser support in 2026.
Q: Does lazy loading hurt SEO?
A: No, as long as you don't lazy-load the very first image visible on page load (that one should load immediately). Below-the-fold images are safe — and recommended — to lazy-load.