Open Graph Images and Link Previews: Sizes and File Size

What an Open Graph image is

When you paste a link into a chat, a social network or a messaging app, the app often shows a preview with a title, a description and a picture. The picture usually comes from a meta tag in the page called og:image, part of the Open Graph protocol that Facebook introduced and that many other services have adopted. Some platforms also read their own tags, such as the Twitter card tags, and fall back to Open Graph when those are missing.

The preview image decides whether a shared link attracts attention. A missing, cropped or blurry image makes the link look unfinished, while a clear one makes it stand out.

The common size

The most widely used size for a large preview image is 1200 by 630 pixels, which has an aspect ratio of about 1.91 to 1. Facebook's documentation recommends images of at least 1200 by 630 pixels for the best display on high-resolution devices, and many other platforms crop or scale to similar proportions. Some platforms prefer a 2 to 1 ratio for large cards, and some show a square image in a small preview.

Because rules differ and change, use 1200 by 630 as a sensible default, keep important content in the center, and test the result with the sharing preview tools of the platforms that matter to you.

File size

Preview images are fetched by the platform's servers, not displayed to a visitor on a slow connection, but they still should not be heavy. Platforms set their own limits, and an image that is too large may not be shown at all. A good target is well under 1 MB; many designs work at 100 to 300 KB when compressed at a moderate quality.

Large files also slow down the creation of previews, and some platforms stop waiting. If the image is a JPEG, compress it with a quality of 75 to 85 and check the size in the compressor's list. A PNG kept as PNG is usually not made smaller by the compressor, so reduce its pixel size or, for photographic content, convert it to JPEG.

Format

JPEG and PNG are accepted by all platforms and are the safe choices. Use JPEG for photographs and PNG for graphics with text and sharp edges. WebP is accepted by many but not all services that create previews, and support in older clients and some platforms is uneven, so for the preview image, JPEG or PNG is a more cautious choice than WebP.

Avoid animated images for previews, and avoid transparency, since platforms place images on different backgrounds. If you use a PNG, give it a solid background.

Safe areas and text

Different platforms crop the image differently, and a small preview may show only the center. Keep the logo, the title text and the main subject in the central area, with margins of at least 5 percent of the width on every side. Use large text, because the image is shown small in a feed, and check that it is legible at a width of about 300 pixels.

Do not rely on the image for information that must be read, such as a date or a price, because it can be cropped, and because people using screen readers cannot see it. Put that information in the page title and description.

Using the tags correctly

Add the tag in the head of the page, with an absolute address that includes the full domain, not a relative path. Add the og:image:width and og:image:height tags, so that platforms can use the image without downloading it first. Provide alt text with og:image:alt where the platform supports it. The image address must be publicly reachable, without a login.

Platforms cache previews. If you change the image later, the old version may stay in use until the cache expires or you refresh it with the platform's debugging tool. Use a new file name for a new image, to avoid problems.

A quick workflow

Design the image at 1200 by 630 pixels. Add it to the compressor with the maximum size set to 1600 or 1280 pixels to keep it from being larger than needed, and a quality around 80. Check that the file is well under 1 MB. Upload it, set the tag, and test the link in the preview tool of the platform.

Do this for the key pages of your site, such as the home page and the most shared articles, and give each article its own image where possible.

Testing the preview

Most platforms provide a tool to test how a link will look when it is shared, and some of them let you refresh a cached preview. Use these tools after you publish a new image, and test on a phone as well as on a computer, because the crop can differ. A quick test takes less time than finding out from a customer or colleague that the preview of an important page is broken.

Also check that the image address does not redirect to a login page, that the file is served over a secure connection, and that the server returns it quickly. A slow server can cause the preview to be skipped, even when the file itself is small.