Broken images and files

How files go missing at launch

Moving a site is when references break. A build tool renames stylesheets with a new hash, but a hand-written template still asks for the old name. Uploads are copied from staging without one folder. A path that worked on a case-insensitive laptop disk fails on a Linux server because Hero.JPG and hero.jpg are different files there. A page cache or CDN keeps serving old HTML that names files the new deployment deleted. And content edited on staging after the final export never makes it to the live site.

A missing stylesheet can leave a whole page unstyled; a missing script can quietly disable a menu, slider or form; a missing image shows an empty box or a broken-image icon. None of it stops the page from answering 200, so it does not show up as an error in most uptime monitors.

How Skewcheck detects it

Skewcheck collects the img src, script src and stylesheet link href values from the audited page, resolves them against the page URL, and keeps those on the same site, ignoring a leading www. It probes up to twelve unique files, four at a time, with a HEAD request, falling back to a GET whose body is never downloaded when HEAD answers with an error, because many servers mishandle HEAD. Every request goes through the same safety checks as the page fetch, follows at most three redirects, and the whole batch gets three seconds. When the page has more than twelve same-site files, the detail says it checked the first twelve of the total.

Any file that answers with HTTP 400 or above, cannot be reached at all, or sits on a local or private address that no visitor could load, fails the check with medium severity and removes 5 points. The detail line says how many of the checked files failed and names up to three with their status. Files on other sites, such as a font or analytics CDN, are not probed, and the pass detail says so. Answers of 429 (rate limited) and 503 (unavailable) mean "try later", so those files are reported as not checked. A file that has not answered when the time budget runs out is also reported as not checked rather than broken, and if none answered, the whole check passes as not checked and deducts nothing. Images in srcset, CSS backgrounds and files that scripts load later are not checked.

curl -sI https://example.com/css/main.v2.css | head -1

Fixing missing files

For each file in the detail line, decide whether the file or the reference is wrong. If the file should exist, upload or redeploy it at that exact path, minding letter case. If it was renamed, update the reference in the template or CMS field, or let the build tool write the reference so names cannot drift. If nothing needs it any more, remove the tag. After publishing, purge any page cache or CDN so visitors get the new HTML, then re-check, and open the browser's network panel on one page of each template to catch files outside the twelve Skewcheck samples.

Before and after

<img src="/images/Team-Photo.JPG" alt="The team">  <!-- file is team-photo.jpg -->

<img src="/images/team-photo.jpg" alt="The team">