OnlineCBT
1. Organizing Image Directories
In production web projects, never place image files in the root folder alongside HTML files. Establish a structured directory hierarchy:
project-root/
├── index.html
├── courses.html
└── assets/
├── images/
│ ├── banners/
│ ├── icons/
│ └── thumbnails/
└── css/
2. Choosing the Right Modern Image Format
| Format | Best For | Transparency | Animation |
|---|---|---|---|
| WebP / AVIF | Modern photos & illustrations (30-50% smaller than JPEG). | Yes | Yes |
| SVG | Logos, icons, vector graphics (infinitely scalable). | Yes | CSS-driven |
| PNG | Screenshots and graphics requiring lossless transparency. | Yes | No |
| JPEG / JPG | Photographs and complex gradients. | No | No |
3. Image Best Practices Checklist
- Compress all images using tools like TinyPNG or Squoosh before committing them to production.
- Use descriptive, lowercase filenames separated by hyphens (e.g.,
physics-mock-test-card.webprather thanIMG_0042.jpg). - Always test relative file paths across both Windows backslashes and Linux forward slashes (web servers always require forward slashes
/).
