# 07 — Images and attachments

🌍 **English** · [Türkçe](../../tr/07-images-and-media/readme.md) · [Deutsch](../../de/07-images-and-media/readme.md) · [Français](../../fr/07-images-and-media/readme.md) · [Русский](../../ru/07-images-and-media/readme.md)

## Putting an image in a document

1. Upload the image next to the document: open the folder, **Add File → Upload File**.
2. Reference it from the Markdown file:

```markdown
![Network topology](topology.png)
```

The text in brackets is the description shown if the image cannot load, and read aloud by screen readers. Write a real description, not "image".

## Where to keep images

A predictable layout that always works:

```
project/
  readme.md
  assets/
    topology.png
    rack.jpg
```

and in `readme.md`:

```markdown
![Network topology](assets/topology.png)
```

## Naming — the one rule to remember

Use lowercase names without spaces for **folders** and image files:

| Fragile | Safe |
|---------|------|
| `Ekran Alıntısı.PNG` | `ekran-alintisi.png` |
| `1-) Inter-VLAN Notes/` | `01-inter-vlan/` |

If a name does contain spaces, write them as `%20` in the link:

```markdown
![Topology](Ekran%20Alintisi.PNG)
```

## Controlling the size

Markdown has no size option, so use a plain HTML tag when you need one:

```markdown
<img src="assets/topology.png" alt="Network topology" width="600">
```

## Linking a file instead of showing it

Drop the exclamation mark and you get a download link:

```markdown
[Packet Tracer file](main.pkt)
```

## Attachments in issues

While writing an issue or a comment, drag a file into the text box. It is uploaded and the link is inserted for you. Use this for screenshots and logs that do not belong in the repository itself.

---

⬅ [Previous: 06 — Markdown basics](../06-markdown-basics/readme.md) · 📚 [Contents](../README.md) · [Next: 08 — Commits and history](../08-commits-and-history/readme.md) ➡