What File Format Should an Open Graph Image Use?

Use a static JPEG or PNG for an Open Graph image. Choose JPEG for photographs and photo-heavy artwork where a smaller file is useful. Choose PNG for graphics with sharp text, logos, flat colors, or transparency. This is the safest broad-compatibility choice; individual platforms can impose their own limits.

The Open Graph Protocol models og:image as a URL representing the page or object. Its example declares the MIME type as image/jpeg and includes dimensions and alternative text. Read the Open Graph Protocol specification.

Quick format decision

Format	Use it when	Practical caution
JPEG/JPG	Photos or photo-heavy graphics	Do not use it when you need transparent pixels or perfectly sharp small text.
PNG	Text-heavy graphics, logos, flat colors, or transparency	Large photographic PNGs can be much heavier than JPEGs.
GIF	A static preview when GIF is already your source asset	Do not assume a link preview will animate.
WebP	Only when every target platform has confirmed support	General media-upload support does not prove link-preview support.
SVG	Keep as an authoring format, then rasterize	The reviewed official guidance does not establish SVG support for Open Graph previews.

Recommended implementation

Export one public, directly fetchable raster image and reference it in the document head. Add the optional metadata fields shown below so crawlers know the type, dimensions, and accessible description.

<meta property="og:image" content="https://cdn.example.com/social/article-cover.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="A dashboard preview showing monthly revenue">

The URL should return the image itself, without an HTML page, login challenge, or expiring permission that prevents a crawler from fetching it.

LinkedIn-specific constraints

For LinkedIn website sharing, the cited sharing guidance specifies a minimum of 1200 × 627 pixels, a recommended 1.91:1 ratio, a 5 MB maximum, and JPG, PNG, or GIF file types. These are LinkedIn requirements, not universal Open Graph rules. See LinkedIn’s website-sharing guidance.

LinkedIn’s separate general media table shows WebP support varying by device. That table is not evidence that WebP works when LinkedIn scrapes an og:image, so use JPEG or PNG when predictable link previews matter.

How to choose JPEG quality or PNG output

For photographs

• Export JPEG at a quality that keeps faces, gradients, and fine detail clean while staying comfortably below the target platform’s limit.
• Use the sRGB color space for consistent rendering across clients.
• Check the final byte size after export; dimensions alone do not determine file size.

For logos and text

• Use PNG when small lettering, hard edges, or transparency must remain crisp.
• Flatten unnecessary layers and remove metadata if your export tool permits it.
• If the design is entirely opaque and photo-like, compare a PNG export with JPEG and keep the smaller file that remains legible.

Validate the file before publishing

Check that the URL is public, the HTTP response identifies an image, and the dimensions and size meet each target platform’s rules.

cURL

curl -I https://cdn.example.com/social/article-cover.jpg

Look for a successful status, an image Content-Type such as image/jpeg or image/png, and a sensible Content-Length.

Python

import requests

url = "https://cdn.example.com/social/article-cover.jpg"
r = requests.get(url, timeout=30)
r.raise_for_status()
content_type = r.headers.get("content-type", "")
size = len(r.content)
print({"status": r.status_code, "content_type": content_type, "bytes": size})
open("og-image-check.bin", "wb").write(r.content)

Node.js

const res = await fetch('https://cdn.example.com/social/article-cover.jpg');
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const bytes = Buffer.from(await res.arrayBuffer());
console.log({ status: res.status, contentType: res.headers.get('content-type'), bytes: bytes.length });

These checks confirm delivery. Use an image editor or an image-metadata library to verify pixel dimensions and that the file decodes successfully.

Common failure modes and fixes

Symptom	Likely cause	Fix
No preview appears	The crawler cannot fetch the URL, or the image is in a protected directory.	Make the URL publicly reachable, remove authentication, and check server access logs.
Preview is stale	The platform cached an earlier response.	Use the platform’s inspection or debugging facility to request a refresh, then verify the current HTML and image URL.
Image is rejected for size	The asset exceeds a platform’s byte limit.	Re-export the JPEG at a lower quality, simplify the PNG, or resize while preserving the required ratio.
Image is cropped unexpectedly	The platform applies its own card crop or the source ratio differs from the target.	Keep essential content away from edges and create a version matching the target platform’s documented ratio.
Text looks blurry	A photographic JPEG was used for crisp typography, or the preview was downscaled.	Use PNG for text-heavy artwork and render type at the final intended size.
Transparent areas turn black or white	The consumer does not preserve the PNG alpha channel.	Flatten onto an intentional background color before export when transparency is not required.
SVG does not render	Support for SVG link previews is not established by the reviewed official sources.	Rasterize the artwork as JPEG or PNG and point og:image to that file.

Reliability, performance, and caching

• Host the image on a stable HTTPS URL with enough bandwidth for crawler requests.
• Return the correct Content-Type and avoid redirects that require cookies or authentication.
• Keep a versioned filename or query strategy when replacing an image so you can change the URL if a platform continues serving an old cache.
• Generate the image once and reuse it for the page; do not create it on demand behind a slow request unless your cache is reliable.
• Stay below the strictest platform limit you support. LinkedIn’s cited limit is 5 MB.

Or skip the browser setup

If you need to inspect how a page actually renders before choosing or reviewing its social image, ScreenshotNeo provides a website screenshot API. It accepts a URL and can return PNG, JPEG, WebP, or PDF. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Create a free ScreenshotNeo account with 1,000 screenshots per month and no card.

FAQ

Is JPEG or PNG officially required by Open Graph?

The protocol describes an image URL and documents JPEG in its example; it does not create one universal format rule for every platform. JPEG and PNG are the conservative choices.

Can I use an animated GIF?

LinkedIn’s sharing guidance lists GIF, but the reviewed material does not promise animation in a link preview. Treat it as a static asset unless your target platform documents otherwise.

Should I include og:image:type?

Yes. It is documented by the protocol and makes the asset’s MIME type explicit, although the image URL and a valid response remain essential.

What if I only have an SVG logo?

Export a raster JPEG or PNG for the preview, then reference that raster file in og:image.