---
id: html-images
title: "HTML Images"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["img tag", "src attribute", "alt attribute", "HTML image size", "image as link", "image float"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "images", "media"]
raw_sources: ["https://www.w3schools.com/html/html_images.asp"]
applied_in: []
github_commit: ""
---

# [[HTML Images]]

## 🎯 한 줄 통찰 (One-line insight)
The HTML `<img>` tag embeds an image via its required `src` (path) and `alt` (alternate text) attributes; images are linked into the page, not technically inserted. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`<img>` tag** — embeds an image in a web page; it is empty (attributes only), has no closing tag, and images are linked to pages rather than inserted into them. [S1]
- **`src` attribute** — specifies the path to the image; the browser fetches it from a web server at load time. [S1]
- **`alt` attribute** — required; provides alternate text describing the image for when it cannot be viewed, and for screen readers. [S1]
- **Size** — set width/height via the `style` attribute or the `width`/`height` attributes (always in pixels); the source suggests using `style`. [S1]
- **Paths** — images can live in a sub-folder (include the folder in `src`) or on another server (use an absolute URL). [S1]
- **Animated GIFs, image links, floating** — HTML allows animated GIFs; nest `<img>` in `<a>` for a link; use CSS `float` to float an image left/right of text. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Embed pattern** — `<img src="url" alt="alternatetext">`. [S1]
- **Sizing pattern** — `style="width:500px;height:600px;"` or `width="500" height="600"`. [S1]
- **Sub-folder / cross-server pattern** — `src="/images/file.gif"` or `src="https://host/path.jpg"`. [S1]
- **Image-link pattern** — `<a href="..."><img ...></a>`. [S1]
- **Float pattern** — `style="float:right;"` / `style="float:left;"`. [S1]

## 📖 세부 내용 (Details)
Images can improve the design and the appearance of a web page. [S1]

**HTML Images Syntax**
The HTML `<img>` tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The `<img>` tag is empty, it contains attributes only, and does not have a closing tag. The two required attributes are `src` (the path to the image) and `alt` (an alternate text for the image). [S1]
```html
<img src="url" alt="alternatetext">
```

**The `src` Attribute**
When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. [S1]
```html
<img src="img_chania.jpg" alt="Flowers in Chania">
```

**The `alt` Attribute**
The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it. The value of the `alt` attribute should describe the image. A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. [S1]
```html
<img src="wrongname.gif" alt="Flowers in Chania">
```

**Image Size — Width and Height**
Using the `style` attribute: [S1]
```html
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
```
Using the `width` and `height` attributes (these always define the size in pixels): [S1]
```html
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
```
> **Note:** Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. [S1]

**Width and Height, or Style?**
The `width`, `height`, and `style` attributes are all valid in HTML. However, the source suggests using the `style` attribute. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
```

**Images in Another Folder**
If you have your images in a sub-folder, you must include the folder name in the `src` attribute. [S1]
```html
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
```

**Images on Another Server/Website**
Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute. [S1]
```html
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
```
> **Note:** External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed. [S1]

**Animated Images**
HTML allows animated GIFs. [S1]
```html
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
```

**Image as a Link**
To use an image as a link, put the `<img>` tag inside the `<a>` tag. [S1]
```html
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```

**Image Floating**
Use the CSS `float` property to let the image float to the right or to the left of a text. [S1]
```html
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
```

**Common Image Formats** [S1]

| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |

**Chapter Summary** [S1]
- Use the HTML `<img>` element to define an image
- Use the HTML `src` attribute to define the URL of the image
- Use the HTML `alt` attribute to define an alternate text for an image, if it cannot be displayed
- Use the HTML `width` and `height` attributes or the CSS `width` and `height` properties to define the size
- Use the CSS `float` property to let the image float to the left or to the right

> **Note:** Loading large images takes time, and can slow down your web page. Use images carefully. [S1]

**HTML Image Tags** [S1]

| Tag | Description |
|---|---|
| `<img>` | Defines an image |
| `<map>` | Defines an image map |
| `<area>` | Defines a clickable area inside an image map |
| `<picture>` | Defines a container for multiple image resources |

## 🛠️ 적용 사례 (Applied in summary)
The Chania, img_girl, HTML5 icon, animated GIF, image-link, and floating examples above are the canonical applied examples from the source. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Basic image (HTML):
```html
<img src="img_chania.jpg" alt="Flowers in Chania">
```
Sized via style:
```html
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
```
Image as a link:
```html
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```
Floated image:
```html
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source notes that `width`/`height` attributes and the `style` attribute are all valid for sizing, but suggests using `style`: [S1]

| Approach | Note |
|---|---|
| `width`/`height` attributes | Valid; always in pixels |
| `style` attribute | Valid; suggested (avoids conflicts with stylesheet `width`/`height`) |

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Links]], [[HTML Favicon]], [[HTML CSS]], [[HTML Attributes]]
- **참조 맥락:** Referenced whenever embedding images, sizing them, linking via images, or floating images alongside text.

## 📚 출처 (Sources)
- [S1] W3Schools — HTML Images — https://www.w3schools.com/html/html_images.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Images" page (Astra wiki-curation, P-Reinforce v3.1 format).
