iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A broken PNG is usually a delivery problem, not a problem with the image format itself. Check the image request in your browser’s Network panel: a 404 points to a missing or misaddressed file, a 403 points to access rules, and a successful response with the wrong Content-Type points to server or storage metadata. Console messages can reveal a content security policy (CSP), cross-origin, or mixed-content block.
Use the response status, headers, and browser error to identify which layer failed before changing code. The fixes below cover the page URL, deployment, origin server, CDN or object storage, and browser-specific problems.
![Computer Networking Bible: [3 in 1] The Complete Crash Course to Effectively Design, Implement and Manage Networks. Including Sections on Security, Performance and Scalability](https://m.media-amazon.com/images/I/41H4YJnxKgL._SL160_.jpg)
Start with the image request, not the broken icon
The broken-image icon tells you that the browser did not display the image; it does not tell you why. Inspect the specific request for the PNG and use its status, response headers, and Console message to narrow down the cause.
Free tools Windows power users keep installed
One-click scans. No signup required.
- Open the page where the image should appear. Open your browser’s developer tools and select the Network tab.
- Reload the page with the Network panel open. Filter by images if your browser offers that filter, or find the request whose URL should identify the PNG.
- Select the request and note its URL, HTTP status, and response headers—especially
Content-Type. - Check the Console for a CSP, CORS, or mixed-content error associated with the image.
- Open the request URL directly in a new tab. Confirm that it is the exact deployed path and filename you intended to serve.
| What you see | What to investigate first |
|---|---|
404 |
URL, relative path, deployment output, and filename capitalization |
403 |
File permissions, origin access, CDN policy, or access rules |
| Successful response, wrong or missing content type | Web-server configuration or object metadata |
| Policy error in Console | CSP, CORS, or mixed-content restrictions |
| Works in another browser or for another user | Browser cache, extensions, security software, or browser settings |
Fix the layer identified by the evidence, then bypass or purge any stale browser or CDN cache and test again. A different browser is a useful check, but it does not replace verifying the failing request.
#1 Best Overall
Fix a wrong path, missing file, or filename case mismatch
A page’s relative image URL is resolved from the page’s own URL. If the page moves to another directory, a relative path that previously reached the image may now point somewhere else. A local development server may also resolve paths differently from the deployed host.
- Compare the URL requested in Network with the image’s actual deployed location. Check every directory in the path.
- Match capitalization exactly. A file named
Logo.pngis not necessarily reachable aslogo.png; behavior depends on the deployed filesystem and hosting layer. - Verify that the build or deployment process includes the PNG at the expected public path. A file present on your computer is not proof that it was uploaded or copied into the deployed site.
- Open the exact image URL directly. If it returns
404, correct the URL or deploy the missing file before investigating browser rendering.
Mozilla’s image troubleshooting guidance includes pathname problems among the reasons an image may not display: MDN: Image file type and format guide. AWS also identifies 404 responses as a condition to investigate in CloudFront delivery: AWS CloudFront: Troubleshooting 404 errors.
Serve the PNG with the correct Content-Type
A PNG response should declare Content-Type: image/png. Check the response header on the actual image request, not just the file extension in your source code. If the browser receives a generic, missing, or incorrect media type, it may handle the response unexpectedly, including downloading it rather than displaying it as an image.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →For Apache, the libpng reference gives this configuration example:
AddType image/png pngUse the equivalent MIME-type configuration for your server or hosting platform, and make sure it applies to the directory and file type serving the image. The historical image/x-png type is obsolete; use image/png. See PNG: The Definitive Guide, web-server chapter and MDN: MIME types.
If the file is served from object storage or through a CDN, inspect the metadata and headers delivered to the browser. Changing a local server configuration will not correct object metadata that still sets a different content type.
Check whether a Content Security Policy blocks the image
A valid, reachable image can still be blocked by the page’s Content Security Policy. The policy’s img-src directive controls allowed image sources. If img-src is absent, the browser uses default-src as the fallback.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →- Look in the Console for a CSP violation that names the image URL or an image source directive.
- Inspect the policy delivered with the page, including any policy set in a response header or a meta element.
- Add the image host or CDN origin to the appropriate
img-srcallowlist, or adjust the policy if the fallback is unintentionally restrictive. - Reload and confirm that the request is no longer blocked by policy.
Do not weaken the policy broadly just to make one image load. Allow the specific origin the page needs. The W3C CSP specification says that when an image source is not allowed, the user agent must act as if a fatal network error occurred and report a violation: W3C Content Security Policy Level 3. MDN describes the img-src directive at MDN: CSP img-src.
Diagnose CDN, object storage, and permissions failures
When an image works at the origin but not through its public CDN URL, investigate the delivery path between the CDN and the origin. A CDN response can fail even though the file exists in storage.
- For a 403: verify that the CDN is permitted to read the origin object and that the object or bucket policy allows the intended access. Check whether the request needs headers, cookies, or query strings that the CDN behavior does not forward.
- For a 404: compare the CDN path with the origin object key and confirm the requested object was deployed. A stale cached error may require invalidation or waiting for its configured cache lifetime.
- For a successful response with the wrong type: set the object’s
Content-Typemetadata toimage/png, then ensure the corrected response is served instead of a cached version. - For a cross-origin failure: check the Console for the browser’s CORS message and configure the origin’s cross-origin response policy for the requesting site where required.
AWS’s CloudFront troubleshooting guidance specifically calls out origin permissions, forwarded request details, CORS, response status, and object metadata; it states that the origin metadata for a PNG should use image/png: AWS CloudFront: Specify how CloudFront accesses your origin.
Separate CORS and mixed-content errors from missing files
A CORS error is not the same as a 404. The image URL may respond, but the browser can reject a cross-origin request under the applicable policy. Read the Console message and inspect the response rather than changing the path at random. Configure the origin to permit the relevant requesting origin when cross-origin access is required.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Mixed content occurs when a secure HTTPS page attempts to load an insecure HTTP resource and the browser blocks it. If the Console reports mixed content, serve the image over HTTPS and update the page to request the secure URL. For both cases, verify the exact URL in the failing request and retest after changing the server or page policy.
When only one browser or user has the problem
If the same deployed image works for another browser or user, check local browser state before changing the site. Mozilla’s troubleshooting guidance identifies cache, extensions, security software, and modified browser settings as possible causes.
- Reload after clearing or bypassing the browser cache.
- Test in a private window or with extensions disabled.
- Temporarily test without security software that filters web traffic, if that is safe and permitted on your device.
- Compare the Network request and Console output in the affected browser with a browser where the image works.
If the affected browser receives a different status or URL, the discrepancy can point back to caching, filtering, or request behavior. If the request and response match but the image still fails only in one browser, continue checking that browser’s settings and extensions. See Mozilla Support: Websites look wrong or appear differently.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot to inspect or document a page while diagnosing an image, ScreenshotNeo is a website screenshot API and MCP server. A basic request returns a screenshot; it does not replace checking the image’s Network response, headers, or Console errors. Use the browser workflow above to diagnose the cause.
Example using cURL; replace the target URL with the page you need to capture. See the ScreenshotNeo API documentation for request options.
Best Value
- Used Book in Good Condition
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Troubleshooting by symptom
| Symptom | Likely cause | Next action |
|---|---|---|
| Image request returns 404 | Wrong path, case mismatch, or image missing from deployment | Open the exact requested URL, compare it with the deployed path, and correct or deploy the file. |
| Image request returns 403 | Permissions or access policy | Check origin and object permissions, plus CDN access and forwarded request requirements. |
| Image downloads instead of displaying | Incorrect or absent response media type | Set the delivered Content-Type to image/png; check origin configuration or object metadata. |
| Console reports CSP violation | Image origin is not permitted by img-src or its default-src fallback |
Allow the required image origin in the applicable policy directive. |
| Console reports CORS or mixed content | Cross-origin policy or insecure HTTP image URL on an HTTPS page | For CORS, check origin response policy; for mixed content, serve and request the image over HTTPS. |
| Only one browser or user is affected | Cache, extension, security software, or browser setting | Bypass cache, test without extensions, and compare the failing request with a working browser. |
Retest after the fix
After changing the URL, server configuration, policy, or object metadata, reload with the Network panel open and verify the result at the same public URL that users visit. Confirm that the request succeeds, the response declares Content-Type: image/png, and the Console no longer reports a blocking policy error. If a CDN or browser is still serving an old response, purge or bypass its cache and test again.
Recommended Free Tools
Frequently Asked Questions
Can a PNG file be valid but still fail to show on a website?
Yes. The browser can be blocked from retrieving it, receive an incorrect response type, or be prevented from using it by a browser security policy.
Does a 404 prove that the PNG is corrupt?
No. A 404 means the requested URL was not found; check the path, deployed file, and capitalization first.
Should I use image/x-png for compatibility?
No. Use the standard PNG media type, image/png; image/x-png is obsolete.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
