For a general link or social preview, start with a 1200 × 630 pixel image. That 1.91:1 landscape canvas is a practical convention, not a universal Open Graph rule. If Google Discover is an important source of traffic, create (or crop) a 16:9 image that is at least 1200 pixels wide and contains more than 300,000 total pixels. In every case, keep the subject away from edges so a platform’s automatic crop does not remove it.
The correct asset also depends on where it will appear. A social share image in og:image is metadata; an image rendered inside your page should use responsive candidates such as srcset and sizes. They solve different problems and should not be treated as one universal file.
There is no single required size for every web preview
The Open Graph protocol requires an image URL through og:image, but it does not mandate one pixel width, height, file size or aspect ratio. Its optional properties—og:image:width, og:image:height, MIME type, secure URL and image alt text—describe the supplied file; they do not establish a platform-wide minimum.
Each destination can resize, crop or ignore the image. A messaging app may show a narrow card, a social network may use a landscape crop, and a search surface may select a different image from your page. Therefore, “best size” means a deliberate default for the surfaces you care about, followed by testing the actual URL in each destination.
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 →#1 Best Overall
The safest starting points by preview surface
| Surface or use | Recommended starting image | What to watch |
|---|---|---|
| General social and link previews | 1200 × 630 px (about 1.91:1) | Practical convention, not an Open Graph requirement. Cropping varies by service. |
| Google Discover large images | At least 1200 px wide, more than 300,000 total pixels, 16:9 | Enable max-image-preview:large or use AMP. Google may crop automatically. |
| In-page responsive image | Several widths chosen for the rendered slot | Use srcset, sizes and a fallback src; do not reuse a single social card blindly. |
For a 16:9 Discover image, 1200 × 675 pixels is the straightforward minimum-width canvas. Larger source files can preserve detail, but they still need a 16:9 composition and sensible delivery size.
How to design a preview image that survives cropping
Keep the focal subject in the safe area
Place faces, product screenshots, logos and short labels near the center, with generous margins on every side. Assume that a consumer may remove part of the top, bottom or sides. Never put a critical word against an edge. A design that is attractive only at exactly 1200 × 630 can fail when a service displays a square or 16:9 crop.
Use a representative, high-quality image
Google’s image guidance favors an image that accurately represents the page. A generic site logo is a weak choice unless the page itself is about that brand. Avoid dense paragraphs, tiny type and decorative text that becomes unreadable on a phone. A clear photograph, illustration or product view generally communicates better than a text-heavy poster.
Choose an aspect ratio with tolerance
Landscape compositions are the most flexible for link cards and Discover. Extreme panoramas, tall posters and narrow strips leave little room for another service’s crop. If your source artwork is portrait-oriented, create a separate landscape metadata asset instead of forcing the portrait file into og:image.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchRank #2
Export an appropriate format
PNG is useful for sharp interface captures, transparency and line art; JPEG is often smaller for photographs; WebP can reduce transfer size where your publishing pipeline supports it. Whatever format you choose, verify that the declared MIME type and the actual response agree. An oversized file can make previews slow even when its pixel dimensions are correct.
Implementing Open Graph metadata
Put the basic properties in the document’s <head>. The dimensions below describe a 1200 × 630 file; they do not force a platform to render at that size.
<meta property="og:title" content="How to choose a preview image">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guide">
<meta property="og:image" content="https://example.com/images/guide-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="A browser window showing the guide">Use an absolute, publicly reachable HTTPS URL. Do not put a caption in og:image:alt; describe the image’s content instead. Keep the page’s canonical URL in og:url, and make sure the image is not blocked by authentication, robots rules or a firewall that prevents crawlers from fetching it.
Google Discover requirements and controls
Google’s published Discover recommendation is explicit: use an image at least 1200 pixels wide, with more than 300,000 total pixels and a 16:9 aspect ratio. The large-image display also requires max-image-preview:large or AMP. A 1200 × 675 image satisfies the pixel threshold and ratio; a 1200 × 600 image does not satisfy the 16:9 recommendation even though it is wide enough.
Google can select from several signals, including og:image and schema.org image metadata, and the selection is automated. Supplying one carefully composed landscape image improves your odds but cannot guarantee that every result or Discover card will use it. Keep the important content visible in the center and provide a higher-resolution original when practical.
<meta name="robots" content="max-image-preview:large">Keep preview metadata separate from responsive page images
An article hero image has a rendered slot whose width changes with the viewport. Give the browser candidates that match those conditions and retain a fallback src for older clients and crawlers.
<img
src="/images/guide-1200.jpg"
srcset="/images/guide-480.jpg 480w,
/images/guide-800.jpg 800w,
/images/guide-1200.jpg 1200w,
/images/guide-1600.jpg 1600w"
sizes="(max-width: 700px) 100vw, 800px"
width="1600"
height="900"
alt="A browser window showing the guide">The width and height attributes reserve layout space and reduce cumulative movement; they do not determine which candidate is downloaded. Use <picture> when you need alternate crops or formats for particular capabilities. The metadata image can remain 1200 × 630 while the in-page image uses a 16:9 1600 × 900 source, provided both represent the same page accurately.
Performance: quality without unnecessary weight
- Export at the largest useful dimensions for the target surface, then compress and inspect the result at phone size.
- Serve modern formats where supported and keep a compatible fallback.
- Do not send a multi-megapixel original to every mobile article slot; let
srcsetandsizesselect a smaller candidate. - Set long-lived caching for immutable filenames, and change the filename when the artwork changes.
- Reserve the displayed aspect ratio so the page does not jump while the image loads.
There is no evidence that one universal byte limit applies to every social network or messaging app. Check the current documentation of a high-priority destination before imposing a platform-specific limit, and validate the actual fetched response rather than relying on the file extension.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →A practical workflow for choosing and validating the file
- List your priority surfaces. If they are general social cards, begin at 1200 × 630. Add a separate 16:9, at-least-1200-pixel-wide composition when Discover matters.
- Compose for the crop. Put the subject in the center, remove edge-dependent text and preview the design at landscape, square and narrow crops.
- Export and optimize. Choose JPEG, PNG or WebP according to the content, then compress until text and fine details remain clear.
- Add metadata. Set
og:title,og:type,og:imageandog:url; add dimensions, MIME type and descriptive alt text. - Enable Discover’s large image option. Add
max-image-preview:largewhen that traffic is relevant. - Build responsive in-page variants. Supply
srcset,sizesand a fallbacksrcindependently of the social asset. - Fetch the published URL. Confirm HTTPS, status 200, correct content type, no login requirement and no accidental redirect to an HTML error page.
- Refresh caches after changes. Social crawlers can retain an earlier image; changing the filename or using the destination’s current refresh/debug mechanism is more reliable than repeatedly editing the same cached file.
Troubleshooting common preview failures
The card shows an old image
Cause: the platform cached the previous metadata or image response. Fix: verify the live HTML, purge your CDN if applicable, publish a versioned filename, and use the destination’s official URL inspection or refresh tool.
The image is blank or replaced by a logo
Cause: the crawler cannot fetch the URL, the response is blocked, or the page exposes no valid og:image. Fix: request the image without cookies, follow redirects, confirm a 200 response and image MIME type, and check firewall, robots and hotlink rules.
Important text is cut off
Cause: automatic cropping or a mismatch between your canvas and the destination’s card. Fix: move the focal content inward, reduce text, and test a 1:1 and 16:9 crop before publishing.
Discover does not show the large image
Cause: the file is below 1200 pixels wide, has 300,000 or fewer total pixels, is not 16:9, or large previews are not enabled. Fix: meet all three image thresholds and add max-image-preview:large; selection remains automated.
Recommended Free Tools
The page loads a huge image on a phone
Cause: the page has only one large src or an inaccurate sizes value. Fix: generate width-based candidates, describe the actual slot in sizes, and keep the fallback src.
Or skip the browser setup
If you need to generate preview assets or verify how a live page renders, ScreenshotNeo returns a screenshot or PDF from one GET request. It accepts consent banners like a visitor, removes more than 60 known consent platforms plus newsletter popups and chat widgets before capture, and bills only clean shots: bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed. Responses identify the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Use the ScreenshotNeo API documentation for all options. A basic call is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython and Node.js equivalents:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes full-page and element captures, dark mode, device presets, retina scale, PDF controls, custom CSS and JavaScript, click and wait actions, request blocking, headers, cookies, geolocation, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. The parameter names used by other screenshot APIs also work, which can simplify migration. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Should the Open Graph width and height tags be omitted if my image is larger?
No. They are optional descriptors. If included, set them to the actual pixel dimensions of the file returned at the og:image URL.
Can one image serve both Discover and social cards?
Yes, if it is composed at 16:9 and also works acceptably in the crops used by your social destinations. Many publishers keep a 16:9 source and generate a separate 1200 × 630 metadata crop for greater control.
Does a larger pixel count guarantee that Google will choose my image?
No. Google says image selection is automated and can use multiple page signals. Size and composition make an image eligible and useful, but do not force selection.
The Bottom Line
Use 1200 × 630 px as the practical default for general web link previews. For Google Discover, use a 16:9 image at least 1200 px wide with more than 300,000 pixels and enable max-image-preview:large. Compose for cropping, optimize delivery, and keep metadata assets separate from responsive in-page images.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
