Why Large Images Break Social Previews

By ShareScan.ioPublished 5 min readCategory Technical SEOUpdated

When you share a link on LinkedIn, Twitter, or Slack, a preview card appears — but only if the image behind it meets strict size and format requirements. Here's why large images are often the culprit when previews fail.

Technical SEO
An image breaking the preview because it is above the limit of a platform

The Promise of the Link Preview

When someone shares a URL on social media or in a messaging app, the platform fetches the page and renders a rich preview card: a thumbnail image, a title, and a short description. Done well, these cards dramatically increase click-through rates. Done poorly — or not at all — the link appears as a bare URL that most people scroll past.

The Open Graph protocol (and Twitter/X Cards) is the mechanism behind these previews. You add <meta> tags to your page's <head>, and crawlers read them. The og:image tag points to the image that should appear in the card.

So far, so simple. The problem is that social platforms impose strict constraints on that image — and file size is one of the most commonly violated ones.

Why Platforms Reject Oversized Images

Social media crawlers are not browsers. They are lightweight, time-limited bots that fetch your page and its assets under tight resource budgets. When they encounter an image that is too large, one of several things happens:

  • The crawler times out before the image finishes downloading, and the preview is skipped entirely.
  • The image is rejected because it exceeds the platform's declared maximum file size.
  • The preview renders with a broken image placeholder, even though the image URL is technically valid.

None of these outcomes are visible to you as the publisher — the page looks fine in a browser. The failure only shows up when someone actually shares the link.

Platform Limits You Need to Know

Each platform publishes its own image requirements, and they differ in important ways:

Facebook / Open Graph

  • Maximum file size: 8 MB (though Facebook recommends staying well under 1 MB for reliable rendering)
  • Recommended dimensions: 1200 × 630 px
  • Supported formats: JPG, PNG, GIF (static)

Twitter / X Cards

  • Maximum file size: 5 MB for summary cards with large images
  • Recommended dimensions: 1200 × 628 px (minimum 300 × 157 px)
  • Supported formats: JPG, PNG, WebP, GIF

LinkedIn

  • Maximum file size: 5 MB
  • Recommended dimensions: 1200 × 627 px
  • Supported formats: JPG, PNG

Slack / iMessage / WhatsApp

  • These apps use their own crawlers and tend to be more lenient, but images above 2–3 MB frequently fail to render in Slack unfurls.

The practical takeaway: aim for under 1 MB, regardless of platform. A well-optimised JPEG or WebP at 1200 × 630 px should comfortably land between 100–300 KB.

The Hidden Cost of Modern Photography

Here is where things go wrong in practice. A photo taken on a modern smartphone or DSLR is typically 4–12 MB straight out of the camera. Designers working in tools like Figma or Photoshop often export at maximum quality "just to be safe." CMS uploads frequently skip compression entirely.

The result: a beautiful, high-resolution hero image that renders perfectly on the page — and silently breaks every social share.

This is especially common with:

  • Blog post hero images uploaded directly from a camera roll
  • Product images exported from design tools at print resolution
  • Event banners created at poster dimensions (A3, A2) and never resized for web

It's Not Just File Size

File size is the most common culprit, but it's not the only one. Social crawlers can also fail because of:

  • Wrong aspect ratio — an image that is too tall or too narrow gets cropped awkwardly or rejected
  • Incorrect MIME type — a file saved as .jpg but actually encoded as PNG can confuse crawlers
  • Missing or misconfigured og:image tag — the image URL is wrong, relative instead of absolute, or points to a protected resource
  • Slow server response — even a correctly sized image fails if the server takes more than 2–3 seconds to respond to the crawler

How to Check If Your Image Is the Problem

The fastest way to diagnose a broken social preview is to use a dedicated validation tool:

  • Facebook Sharing Debugger (developers.facebook.com/tools/debug) — shows exactly what Facebook's crawler sees, including any errors
  • Twitter Card Validator (cards-dev.twitter.com/validator) — previews how your card will render on X
  • LinkedIn Post Inspector (linkedin.com/post-inspector) — validates Open Graph tags for LinkedIn shares
  • ShareScan — checks your image dimensions, file size, format, and Open Graph tags in one pass, across all major platforms simultaneously

These tools will tell you whether the image was fetched successfully, what size it was, and whether it met the platform's requirements.

Fixing the Problem

Once you've identified an oversized image as the cause, the fix is straightforward:

  1. Resize the image to 1200 × 630 px (or the closest platform-appropriate dimensions)
  2. Compress it — use a tool like Squoosh, ImageOptim, or your CMS's built-in image pipeline. Target under 300 KB for JPEG, under 500 KB for PNG.
  3. Use a modern format — WebP offers significantly better compression than JPEG at equivalent quality. Most platforms now support it.
  4. Use an absolute URL in your og:image tag — never a relative path
  5. Re-validate using the platform debuggers above after making changes. Facebook in particular caches previews aggressively; you may need to force a re-scrape.

Prevention Is Better Than Debugging

The best time to catch an oversized social image is before the post goes live. Build image validation into your publishing workflow:

  • Set maximum upload sizes in your CMS
  • Use an automated Open Graph checker as part of your CI/CD pipeline
  • Run a pre-publish check with a tool like ShareScan to catch issues before your audience does

A broken preview is a missed opportunity. Given that social sharing is often the primary distribution channel for blog content, getting this right is worth the few minutes it takes to validate.

TRY SHARESCAN

Run a free 10-URL scan on your pages

Paste a few URLs (or a domain/sitemap) and run the same metadata checks we use for social preview QA and regression monitoring.

See a sample report

No signup for your first scan. Open the report, review issues, then connect Slack if you want alerts.

After scan completion, connect Slack and send a test report.

Up to 10 URLs. We will dedupe and validate automatically. Prepared 0 / 10 unique URLs.