1. The <img> Tag
Images are embedded with the self-closing <img> tag. It requires two attributes at minimum:
<img src="images/dog.jpg" alt="A golden retriever sitting in the park">
src— The path to your image file. Use a relative path for images in your own project.alt— A text description of the image. Required for accessibility and displayed when the image fails to load.
2. Which File Format Should You Use?
| Format | Best For | Notes |
|---|---|---|
.jpg | Photos | Small file size, some quality loss. Best for photography. |
.png | Graphics, logos, screenshots | Lossless quality, supports transparency. Larger files. |
.webp | Photos & graphics | Modern format — smaller than jpg/png at same quality. Preferred when possible. |
.gif | Simple animations | Low color count. Use sparingly; large file sizes. |
.svg | Icons, logos, diagrams | Scales to any size without blurring. Code-based format. |
3. Sizing Images
Never upload a 5000×4000 pixel photo directly to your website. Large images slow your page down significantly. Before uploading:
- Resize to the largest size it will actually appear on screen (e.g., 1200px wide for a full-width banner).
- Compress the file using a free tool like Squoosh (squoosh.app) or TinyPNG (tinypng.com).
- Aim for images under 200KB for most uses; under 500KB for large banners.
Control display size in CSS, not in the HTML width and height attributes:
img {
width: 100%; /* fills its container */
max-width: 800px; /* never wider than 800px */
height: auto; /* keeps the original proportions */
}
4. Writing Good Alt Text
The alt attribute is not optional — it is a legal accessibility requirement and affects search engine ranking.
- Be descriptive and specific: "A golden retriever sitting on a park bench in autumn" is better than "dog photo."
- Do not start with "image of" or "picture of" — screen readers already announce it as an image.
- Decorative images (purely visual, no meaning) should use an empty alt:
alt="". This tells screen readers to skip it. - Functional images (like a logo linking to the homepage) should describe the function:
alt="LIS 458 — go to homepage".
5. Organizing Your Image Files
Keep all images in a dedicated images/ folder at the root of your project. Never leave images loose in your root folder alongside your HTML files.
public_html/
├── index.html
├── css/
│ └── style.css
└── images/
├── banner.jpg
├── profile.jpg
└── logo.png
Remember: all image filenames must be lowercase with no spaces. A file saved as My Photo.JPG will work on your laptop but break on the server.