Understand the idea

A filename can look right at a glance and still differ by one character. Some local filesystems tolerate case differences; a case-sensitive server does not.

Treat URL paths and filenames as exact matches. Hostnames are case-insensitive, but that does not make every part of a URL case-insensitive. How a path maps to a resource depends on the server and application. Do not infer the server’s behaviour from the operating system on your laptop.

Read the example

A supplied diagnostic example. This page deliberately makes no failing image request.

Diagnostic notes · EXAMPLE
Deployed file: /images/morning.svg
Requested URL: /images/Morning.svg
Case-sensitive example server: 404
Corrected request: /images/morning.svg → 200

A convention removes guesswork

For your own new assets, a consistent lowercase naming convention with hyphens is easy to maintain: morning-walk.svg. This is a project convention, not a rule that the web forces on every filename. Existing URLs may already be linked elsewhere, so changing them requires care.

A rename must reach the upload

On a case-insensitive filesystem, a rename that changes only letter case may be awkward, and version-control tools may not record it as expected. If necessary, rename through a distinct temporary filename, then to the intended name. Inspect the recorded change and generated folder instead of assuming success.

Verify more than appearance

Look for the exact request in Network and check both its response and content. An application fallback can return an HTML page with status 200 for an image URL; that does not make the image valid. Keep alternative text useful while fixing the cause.

Solve the capital-letter case.

Continue the diagnostic toolkit

All six lessons and three cases · Next: Is it the upload or the cache?

A small mistake, explained

What goes wrong

The markup uses Morning.svg, the stored file is morning.svg, and the local preview happens to hide the difference.

How to fix it. Compare the full path character by character, including folder names, extension and punctuation. Update the source reference or deliberately rename the file, then rebuild and verify what was actually deployed.

Try it yourself

Compare morning.svg, Morning.svg and morning.SVG. Identify every differing character. Use the guided case to decide what evidence to collect before renaming anything.

Further reading

MDN: Dealing with files (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.