Why does Microsoft Edge fail to display a WebP image from my Cloudflare-hosted site only in certain locations, while Safari and Firefox load it fine?

Devin Moris 0 Reputation points
2026-11-09T07:06:22.3133333+00:00

I run a WordPress site on Hostinger with Cloudflare in front of it. I’m trying to understand an image problem that only happens in Microsoft Edge, and I’d like to learn how to diagnose it properly instead of guessing.

What’s happening The featured image at the top of this page sometimes doesn’t display in Edge: https://towalisoviejo.com/blog/how-to-check-power-steering-fluid/

Image URL: https://towalisoviejo.com/wp-content/uploads/2026/11/how-to-check-power-steering-fluid-aliso-viejo.webp

  • From my usual location, the image loads fine.
  • When I visit from a different location (new network or VPN), the image fails in Edge. It shows [blank space / a broken icon / a partial image].
  • Safari and Firefox load the same image correctly from the same locations.

My setup

  • Edge version: [from edge://version]
  • OS: [Windows 11 / macOS / etc.]
  • Host: Hostinger (WordPress)
  • CDN: Cloudflare ([Free/Pro]); Polish/Mirage/Rocket Loader: [on/off]
  • Image: WebP, 1200×800

What I’ve tried so far

  • [Hard refresh and clearing the cache]
  • [InPrivate window with extensions disabled]
  • [Purging the Cloudflare cache]

What I want to learn

  1. Which tools or settings in Edge DevTools (Network tab, Console) should I use to find out why an image fails to render, and how do I read the result?
  2. Can Edge treat a cached or transformed WebP from a CDN edge location differently than Safari or Firefox? What would cause that (for example, a partially cached file or a different response header)?
  3. Which response headers should I compare between a working and a failing location to find the cause?
  4. Are there Edge settings, such as Tracking Prevention or Efficiency mode, that can block or delay an image from a third-party or CDN source? How do I rule them out?
  5. Is there a good order of troubleshooting steps to follow so I can tell whether the cause is the browser, the CDN, or the server?I run a WordPress site on Hostinger with Cloudflare in front of it. I’m trying to understand an image problem that only happens in Microsoft Edge, and I’d like to learn how to diagnose it properly instead of guessing.
Microsoft Edge | Website issues | Windows 11
0 comments No comments

Answer accepted by question author

AI answer

2026-11-09T07:08:16.35+00:00

Capture the image request in Edge with DevTools cache disabled at both locations, then compare the response body and Cloudflare headers; location-dependent differences in CF-Cache-Status, CF-Ray, Content-Type, or Vary point to CDN variant handling, while identical successful responses point toward an Edge decode or page-rendering issue.

1. Separate page behavior from image delivery

At the failing location:

  1. Navigate directly to the image URL in Edge.
  2. If it displays directly but not on the page, investigate page CSS, lazy-loading JavaScript, the selected srcset, or request blocking.
  3. If it also fails directly, keep that tab open and press F12.
  4. Select Network, enable Preserve log and Disable cache, clear the request list, and reload.

Disable cache affects Edge’s browser cache while DevTools is open; it does not bypass Cloudflare’s edge cache. Edge’s Network tool can inspect request headers, response headers, response content, size, Preview, and Timing information.^1^ ^2^

Since hard refresh, cache clearing, InPrivate, extension isolation, and a Cloudflare purge have already been tested, the next useful step is collecting the actual failing response rather than repeating those actions.

2. Read the failed request

Select the .webp request and inspect:

  • Status
    • 200: a body was returned; continue with headers and Preview.
    • 206: verify that the Content-Range is valid and the response contains the expected bytes.
    • 304: the response still involved browser cache validation; repeat with Disable cache enabled.
    • 4xx/5xx: this is an HTTP/CDN/origin failure, not an image-decoder diagnosis.
    • (blocked:...), ERR_BLOCKED_BY_CLIENT, or no network request: investigate Edge policy, tracking prevention, security software, or request-blocking rules.
  • Preview: if DevTools can display the image here, fetching and decoding succeeded; the page’s HTML/CSS/JavaScript becomes the primary suspect.
  • Response: an HTML error page returned under the image URL indicates a CDN/origin response problem, even if the status is 200.
  • Timing: a stalled, cancelled, or incomplete request suggests a transport or network-path problem.
  • Console: look for Failed to load resource, HTTP status errors, mixed-content messages, CSP errors, or tracking-prevention messages. The Console can link a failed resource directly to its Network entry.^3^

Also open the Network request’s Initiator information. This helps determine whether the image came from the original <img>, lazy-loading code, CSS, or a service worker.

3. Compare working and failing locations

Record the raw request and response headers from both locations:

Header/value What a difference suggests
CF-Ray Which Cloudflare data center handled the request
CF-Cache-Status HIT, MISS, or BYPASS behavior at that edge
Age Whether and how long a cached object has been served
Content-Type Must describe the image rather than HTML or another type
Content-Length Different representations or responses; by itself, it does not prove truncation
Content-Range Incorrect or incomplete range response
Cache-Control Whether the object is cacheable
Vary Whether format selection varies by request headers
Cf-Polished Whether Cloudflare Polish processed or skipped the image
Content-Encoding A content-coding/compression difference
Set-Cookie Can affect whether Cloudflare bypasses caching
Request Accept Whether each browser advertises different supported image formats

Cloudflare caching is local to data centers or cache-tier paths, so one location can return a HIT while another returns a MISS; differing Age values alone are normal.^4^

The stronger evidence is a difference in the body, Content-Type, Content-Range, or format-selection headers. If image optimization or content negotiation is enabled, verify that Vary and Cloudflare’s image-variant configuration prevent representations intended for different browser capabilities from being mixed.^5^ Polish can also be skipped when the origin supplies a non-image content type or non-cacheable response characteristics; inspect Cf-Polished for its status.^6^

Compare actual downloaded payloads where possible. Equal Content-Length values do not guarantee equal or valid files, and different lengths can be legitimate when different encodings or optimized variants are served.

4. Rule out Edge controls

Tracking Prevention: Open the Console, reload, and search for:

Tracking Prevention blocked access to storage for

Also inspect the page-information icon beside the address bar for blocked trackers. For a controlled test only, add a site exception through the page-information flyout or edge://settings/privacy/trackingPreventionExceptions, retest, and then remove the exception. Edge can block classified third-party resource loads, particularly under Strict mode.^7^

Because this image uses the same site hostname, tracking prevention is less likely unless the page redirects it or loads another optimized URL. The Network request’s final URL will reveal that.

Efficiency and sleeping tabs: These are unlikely for an actively viewed page. Edge prevents a visible tab—and a tab currently inspected by DevTools—from sleeping. Adding the site under Settings → System and performance → Performance → Always keep these sites active is therefore only an optional control test, not a likely fix.^8^

5. Interpret the result

  • Different Cloudflare headers or bytes by location: investigate Cloudflare cache rules, Polish/Mirage, Vary, range responses, and origin headers.
  • Same valid response, but Edge Preview/direct navigation fails: preserve the exact Edge version, OS, response headers, and sample file for an Edge compatibility report.
  • Direct image works but page image fails: inspect src, srcset, CSS, lazy loading, service-worker behavior, and Console errors.
  • Request is blocked before transmission: isolate Tracking Prevention, security software, proxy/VPN, or managed Edge policy.
  • All browsers receive the same bad response at the failing location: treat it as CDN, origin, or network-path behavior rather than Edge-specific behavior.

Export a HAR from each location if escalation is needed. HAR files can contain cookies, authorization data, tokens, query parameters, request bodies, and identifiers. Capture from a signed-out or disposable session where possible, sanitize those fields, and share only through the vendor’s approved secure support channel.


References

  1. Inspect network activity
  2. Network features reference
  3. Fix JavaScript errors reported in the Console
  4. Cloudflare cache responses · Cloudflare Cache (CDN) docs
  5. Vary for images · Cloudflare Cache (CDN) docs
  6. Cf-Polished statuses · Cloudflare Images docs
  7. Tracking prevention in Microsoft Edge
  8. Learn about performance features in Microsoft Edge | Microsoft Support
AI-generated content may be incorrect. Read our transparency notes for more information.

Was this answer helpful?

1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.