What are Images?
The <img> tag adds pictures to your webpage.
Basic Image:
<img src="photo.jpg" alt="Description of photo">
Two important attributes:
Attribute | What it does | Why it's important |
|---|---|---|
| Source (where the image is located) | Without this, image won't load |
| Alternative text (shown if image fails) | Blind users hear this. Google uses this for SEO |
ACCESSIBILITY TIP: Always add
altattribute. Blind people using screen readers hear this text. Google also uses it to understand your image!
File Paths (How to find your images):
Simple words: File path is the address of your image file, just like your home address.
Path Type | Example | What it means |
|---|---|---|
Same folder |
| Image is in the SAME folder as your HTML file |
Sub-folder |
| Go into "images" folder first |
Parent folder |
| Go ONE folder UP (.. means parent) |
Root path |
| Start from the main folder (/) |
Full URL |
| Image on another website |
Visual example of folder structure:
1your-project/
2│── index.html
3│── cat.jpg ← Same folder: "cat.jpg"
4│── images/
5│ └── cat.jpg ← Sub-folder: "images/cat.jpg"
6│── parent-folder/
7│ └── your-file.html ← From here, "../cat.jpg" goes up one levelExamples:
1<!-- Image in same folder -->
2<img src="profile.jpg" alt="My profile picture">
3
4<!-- Image in "images" folder -->
5<img src="images/banner.jpg" alt="Website banner">
6
7<!-- Image one folder up -->
8<img src="../logo.png" alt="Company logo">
9
10<!-- Image from another website -->
11<img src="https://placekitten.com/200/300" alt="Cute kitten">Responsive Images (for different screen sizes):
<img src="default.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px" alt="Fully responsive image" loading="lazy">
What this does: Mobile phones get small image, desktops get large image. Faster loading!