How to Organize and Name Website Image Files So You Find Them Later

You gathered the images, dropped them on your site, and moved on. Six months later you want to swap the hero photo on your services page, and you're staring at download (4).png, Untitled-1-final-v2.png, and three near-identical files you can't tell apart. The fix isn't a fancy system. It's a small naming habit you set up once.

This post is the maintenance step for the consistent image library this keeps usable. If you've built that library, a few minutes of naming work now saves you the hunt later.

Why messy filenames cost you time later

Cryptic filenames feel harmless when you have ten images. They stop being harmless when you have eighty, spread across a downloads folder, a desktop, and your site's media library.

The cost shows up at the worst moment: you're mid-edit, you need the image you used in the pricing section, and you have no way to find it except opening files one by one. Duplicates make it worse, because you can't tell which version is actually live.

A good filename answers three questions without opening the file: where does this go, what is it, and which version is it.

A simple folder structure

Start with folders that match how you think about your site. Two patterns work for most small sites. Pick the one that matches how you navigate your own pages.

If you've used which image belongs on each page, the by-section approach maps straight onto it. A hero is a hero whether it sits on the home page or a landing page, so grouping by section keeps reuse obvious.

Inside whichever you choose, keep two top-level folders that matter more than the rest:

• /originals — the full-resolution files exactly as you downloaded them
• /web — the resized, compressed versions you actually upload

More on why this split matters below.

A naming pattern that sorts itself

Here's a pattern you can copy. It's built around the same three axes Picdrome uses to organize images: section, business or style, and version.

section-business-style-version.ext

Concrete examples:

hero-bakery-warm-01.jpg
background-saas-minimal-02.jpg
team-clinic-bright-01.jpg
product-jewelry-dark-03.jpg

Why this works:

• Lowercase and hyphenated. No spaces, no capitals, no underscores. Spaces break in URLs and capitals trip up some servers. Hyphens read cleanly as word separators.
• It sorts itself. Because the section comes first, every hero file lands next to every other hero file alphabetically. Scanning a folder becomes scanning by purpose.
• It's descriptive. hero-bakery-warm-01.jpg tells you what you're looking at before you open it. Descriptive, readable filenames are also generally considered good practice for image SEO, since the filename is one signal search engines can read. Treat that as a tidiness bonus, not a ranking lever — don't expect filenames alone to move your position.

You don't need every axis on every file. If style doesn't matter for a given image, drop it: team-clinic-01.jpg is fine. The point is a consistent order, not maximum length.

Once your files are named, putting them in place is its own small step. See placing the named files on your site for that part.

Match the filename to the alt text

A descriptive filename and good alt text describe the same thing, so do them together while the image is fresh in your mind. The guide on writing filename-friendly alt text walks through phrasing; the short version is that hero-bakery-warm-01.jpg and alt text like "warm-lit bakery counter with fresh bread" should feel like the same image described twice.

Handling versions, sizes, and originals

This is the part most people skip and later regret.

Keep originals separate from web exports. When you download a high-resolution image, it lives in /originals untouched. The version you compress and resize for the page lives in /web. If you only keep the small, optimized file and later need a larger crop or a retina version, you can't recreate it — the detail is gone. Keeping the original means you can always re-export.

For versions, the trailing number does the work:

• hero-bakery-warm-01.jpg — first option you tried
• hero-bakery-warm-02.jpg — the replacement you switched to

Never overwrite 01 with a new image and keep the old name. If you do, your filenames stop telling the truth, and any cached or linked reference to the old image now points at something else.

If you export multiple sizes of the same web image, append the width:

hero-bakery-warm-01-1600.jpg
hero-bakery-warm-01-800.jpg

That keeps the sizes grouped under the same base name and obvious at a glance.

Track where AI-generated images came from

Picdrome images are AI-generated. That's worth noting in your own records, especially if a page or platform asks you to disclose AI imagery. A lightweight habit: keep a plain text or spreadsheet note in /originals listing each file, where you got it, and that it's AI-generated. You don't need anything heavier than that — just enough to disclose honestly later if you're ever asked, and to remember which files came from the Image-pack planning guide.

On usage: Picdrome images are free to use for personal and commercial website projects, subject to the Picdrome license terms (see Picdrome Image License). Your folder note is about provenance and disclosure, not a substitute for the license itself.

Keeping the system tidy as you add images

A naming system only helps if new files follow it. Three small habits keep it from drifting:

• Rename at download. The moment a file lands in your downloads folder, rename it to the pattern and move it to its folder. Renaming download.jpg takes ten seconds now and saves a hunt later.
• Empty downloads weekly. Treat the downloads folder as a doormat, never a home. Nothing image-related should live there.
• Delete dead versions. When you replace 01 with 02 and 02 goes live, decide whether you still need 01. If not, delete it from /web (you still have the original). Fewer files, less confusion.

You don't need a full asset-management app for this. For a solo founder or a small site, folders plus a consistent filename are enough to stay maintainable for years.

Set it up now: create your /originals and /web folders, pick page-based or section-based subfolders, and apply the section-business-style-version pattern. Then keep every new file tidy as you pull it from the Image-pack planning guide.

In Plain English

This is a lightweight way to name and store your website images so you can find and swap them later. It's for non-designer founders and small teams who already have their images and don't want a heavyweight tool. Use it the moment you start downloading images, or right now if your current files are already a mess. To start: make two folders, /originals (untouched source files) and /web (resized exports); inside each, group by page or by section; and name every file section-business-style-version in lowercase with hyphens, like hero-bakery-warm-01.jpg. Note that Picdrome images are AI-generated and jot down where each came from. This keeps the image library you built usable a year from now, with no special software required.