The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →A missing image can fail in two different places: on the web page itself, or in a shared-link preview generated by Facebook, X, Slack, LinkedIn or another service. Identify the failing fetch first. For a page image, inspect the selected URL, network response, file, browser security messages and lazy-loading state. For a social preview, inspect server-rendered Open Graph metadata, make sure the crawler can retrieve the image, and refresh the platform’s cached data.
First, identify which preview is broken
Open the page directly in a browser. If the image is absent there, follow the browser diagnosis. If it appears normally but disappears when you paste the URL into a social or messaging app, follow the social-preview diagnosis. These are separate requests: your browser loads an image element, while a platform crawler reads metadata and fetches an image for a link card.
When the image is missing on your website
1. Verify the URL the browser actually selected
Inspect the element in DevTools and check both src and srcset. A <picture> element can select a different source based on viewport width or format support. The fallback shown in your HTML may not be the request that failed.
<picture>
<source type="image/avif" srcset="/hero.avif">
<source type="image/webp" srcset="/hero.webp">
<img src="/hero.jpg" alt="Product dashboard" width="1200" height="630">
</picture>In the Elements panel, copy the final currentSrc value from the image. Check for an empty value, a relative path that resolves to the wrong directory, a typo in capitalization, or a URL that accidentally points back to the page itself. MDN lists empty or null sources, a source matching the document URL, corruption and unsupported formats as common loading or rendering causes.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
2. Inspect the network response
Open DevTools, choose Network, reload the page, filter by Img, and select the failed request. Record its status, redirects, response headers and request URL.
- 404: the deployed server cannot find that path. Correct the filename, upload the asset, or fix the hosting/CDN rewrite.
- 403: permissions, hotlink protection or authentication is blocking the request. Allow the intended origin or serve the asset publicly.
- 5xx or timeout: investigate the origin, CDN, DNS and server logs rather than changing HTML.
- 200 with a broken image: inspect the response body and
Content-Type. A login page, HTML error document or truncated file can be returned with a successful status.
Paste the exact image URL into a private browser window. This distinguishes a public asset problem from a session or referrer-dependent one. Test the deployed hostname, not only a local development path.
3. Confirm the file and format are valid
Open the downloaded file in an image editor or use a trusted image validator. Re-export a damaged file and check that the server sends a matching MIME type such as image/jpeg, image/png, image/webp or image/avif. If browser support differs across your audience, provide a working <img src> fallback inside <picture>; do not rely on a single newer format.
4. Read console and policy errors
The Console identifies causes that a 404 cannot. A cross-origin image used with crossorigin requires an appropriate Access-Control-Allow-Origin response header. A Content Security Policy can also block an otherwise valid image when its host is absent from img-src. Correct the server header or policy only when the error names that restriction. Removing security controls blindly can create a larger vulnerability.
5. Check lazy loading and layout
loading="lazy" intentionally delays offscreen requests until an image approaches the viewport. Scroll to the image and watch the Network panel. MDN notes that lazy images may not be loaded when the window load event fires. Also inspect its rendered box: an element with zero width or height may never intersect the viewport. Add dimensions to reserve layout space, but remember that dimensions do not repair a bad URL, blocked request or corrupt file.
<img src="/photos/team.webp" alt="Team" width="800" height="450" loading="lazy">When only a shared-link preview is missing or stale
1. Put the intended image in server-rendered metadata
Social crawlers often do not execute the same JavaScript that eventually updates your page. Emit absolute Open Graph tags in the initial HTML response:
<meta property="og:title" content="Example article">
<meta property="og:description" content="A useful summary">
<meta property="og:image" content="https://example.com/images/article-card.jpg">
<meta property="og:url" content="https://example.com/article">Inspect View Source, not only the live DOM, and remove duplicate or outdated tags. Platform parsing differs: OpenGraphImage’s platform summary says Facebook reads Open Graph image metadata, X uses Twitter Card fields with Open Graph fallbacks, and Slack combines Open Graph and Twitter Card data. Add platform-specific card fields where that destination requires them, then verify the final HTML from the public URL.
2. Make the image retrievable by the crawler
An image that works while you are logged in can fail for an unauthenticated crawler because of access controls, a private bucket, firewall rules, robots or delivery configuration. Use an absolute HTTPS URL, avoid expiring query signatures for a long-lived card, and confirm that the response is publicly retrievable without cookies. The source material does not establish one universal crawler test or identical access rules for every platform, so check the destination’s current documentation when access is uncertain.
Recommended Free Tools
3. Refresh cached preview data
Platforms cache title, description and image independently of your page. For Facebook, WordPress.com directs publishers to the Sharing Debugger: submit the URL, inspect the details and choose Scrape Again. That action requests a fresh Facebook fetch; it does not guarantee that X, Slack or another service will discard its own cache. Change the source only after confirming the metadata and image URL are correct.
4. Match the destination’s dimensions and file limits
WordPress.com’s 2026 Facebook guidance lists 200 × 200 pixels as a minimum, 600 × 315 pixels as larger-image guidance, and 1200 × 630 pixels for high-resolution displays, with an aspect ratio close to 1.91:1 and an 8 MB maximum. These are Facebook-specific recommendations, not universal browser requirements or guarantees for every social service. Keep important text away from edges and export a valid JPEG or PNG within the stated limit.
A practical diagnostic checklist
- Decide whether the failure is in the page or only in a shared card.
- For a page failure, inspect the selected
currentSrc, then the Network status and response body. - Open the asset directly and validate its bytes, MIME type, permissions and redirects.
- Read Console messages for CORS and CSP blocks; fix the named policy or header.
- For a card failure, inspect initial HTML for one correct absolute
og:imageURL. - Fetch that URL without a login session and verify its dimensions and size for the target platform.
- Use the destination’s debugger or refresh control, then test again after its cache expires.
Performance and reliability considerations
Do not treat a historical transfer-size statistic as a failure threshold. MDN’s lazy-loading overview cites median resource weights from 2011–2019 of 100–400 KB on desktop and 50–350 KB on mobile; these figures are historical context, not current requirements. Optimize images for the actual design, provide responsive candidates, preserve intrinsic dimensions, and monitor origin and CDN errors. A smaller file cannot fix a 404, blocked host or stale metadata.
For important cards, publish a stable image URL and keep the old asset available while caches expire. When changing an image, update metadata and then request a re-scrape on the destination that displays the stale card. Keep a known-good fallback in <img src> so unsupported formats do not produce an empty result.
Or skip the browser setup
If you need a reliable image of the rendered page rather than a social crawler card, ScreenshotNeo provides a website screenshot API and MCP server. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status.
One GET request returns PNG, JPEG, WebP or PDF. The API supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets, retina scale, PDF paper and page controls, custom CSS and JavaScript, clicks, selector waits, network-idle waits, ad and tracker blocking, custom headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTL, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification. Parameter names used by other screenshot APIs also work.
cURL
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));See the ScreenshotNeo documentation for options and response headers. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is included on every plan. Sign up free.
Common errors and fixes
“The URL is correct, but the image is still blank”
Check the selected srcset candidate, response body and MIME type. A successful status can still contain HTML or a truncated image.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors“It works locally but not after deployment”
Compare deployed paths, filename case, hostname, CDN rewrites and permissions. Test the production URL directly and inspect its Network request.
Best Value
“The browser console reports a policy violation”
Read whether it is CORS or CSP. Add the precise origin to the server’s CORS response or the policy’s img-src; do not disable protections globally.
“The social card still shows yesterday’s image”
Inspect the current source HTML and then use that platform’s refresh/debugger flow. Facebook’s documented route is Sharing Debugger followed by Scrape Again; other services maintain separate caches.
“The preview is cropped or rejected”
Apply the destination’s own dimensions, aspect ratio and file-size guidance. Facebook’s WordPress.com guidance is 1200 × 630 for high-resolution displays and 8 MB maximum, not a universal rule.
Frequently Asked Questions
Why does an image show in my browser but not in a social preview?
The browser may render the page image while the social service relies on server-rendered metadata and a separate crawler request. Check the absolute og:image URL, public access and the platform’s cache.
Should I remove loading=”lazy” from every image?
No. First confirm the image is near the viewport and actually requested. Remove or adjust lazy loading only for images that must be available immediately, such as a visible hero image.
Will changing the filename force every platform to update?
No. A new URL can help distinguish an asset, but each platform still controls its own metadata cache and refresh process.
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.
