Organizing Your Image Files

Keep your images where you and your code can find them

Learn best practices for naming, sizing, and organizing image files so your projects stay clean and your image links never break.

💡 The Concept

Organizing Your Image Files

Organizing web image files into a consistent folder structure prevents broken image paths and keeps your project easy to work with. Good file organization is a hallmark of professional web development. The standard convention is to store all your images in a folder called “images” at the root of your project.

File structure showing an images folder inside a project directory — Your project file structure should include a dedicated “images” folder for all your image files.

Rules for Image File Naming

Follow these rules to avoid broken images and headaches down the road:

Put your images in a folder called “images”: this is the universal convention.
Use all lowercase letters, you may need to rename files that come from your camera or downloads.
Avoid punctuation symbols and spaces: the only exception is the hyphen (-).
Use hyphens between words: for example: my-cool-image.png
Do not change file extensions: keep them as .jpg, .png, .gif, .webp, etc.

Here are some examples:

✅ Good file names:

sunset-beach.jpg
team-photo.png
hero-background.webp

❌ Bad file names:

Sunset Beach.jpg — spaces and uppercase
team_photo.png — underscore instead of hyphen
HeroBackground.jpg — uppercase with no hyphens

Image Rights and Free Resources

Before you add any image to your project, make sure you have the right to use it. Google Images is not a free image library — just because an image appears in search results does not mean it is free to use.

Need royalty-free images? Here are some reliable sources:

Pixabay.com (free)
Freeimages.com (free)
123rf.com (low-cost royalty-free images)

❓ Frequently Asked Questions

What happens if I use a space in an image file name?

A space in a file name gets encoded in the URL as %20, so a file called Sunset Beach.jpg would be referenced as Sunset%20Beach.jpg. Some browsers handle this automatically, but others will not find the file at all, and you end up with a broken image. Beyond browser compatibility, the encoded URL is harder to read and more error-prone to type. Using hyphens instead of spaces keeps file names clean, readable, and reliable across every browser and server.

What happens if I use capital letters in a file name?

It depends on the web server. Windows servers are case-insensitive, so Sunset-Beach.jpg and sunset-beach.jpg would both work. But most web servers run on Linux, which is case-sensitive — those two file names are completely different files. A file that loads fine on your Windows computer during development can produce a broken image the moment the site goes live on a Linux server. Always use all lowercase to avoid this mismatch entirely.

Why use hyphens instead of underscores?

Underscores technically work and will not break anything, but hyphens are the recommended convention for web file names. Search engines treat a hyphen as a word separator, so sunset-beach.jpg is read as two words: “sunset” and “beach.” Underscores are not treated the same way, so sunset_beach.jpg may be read as a single word. For any file name that ends up in a URL — which images do — hyphens are the better choice for both readability and search engine visibility. Consistent use of hyphens also matches the convention used across web URLs in general.

★ Key Takeaways

Images need to be organized as carefully as your code files. This lesson covered how to set up a folder for your images and keep your file names clean and consistent. Next, you will learn how to embed images directly into your HTML using the img tag. The img tag is one you will use in almost every project you build.

Next Lesson: HTML Embedded Images

← Back to Web Images Lessons

← Back to All Lessons