Guides / Finipix / Putting it online

How to Design a Link Preview Image (1200×630) That Reads Well

By the Qorlize team · Last reviewed

Finipix guide · Resize and compress images for the web. Open Finipix

The preview image is the largest thing people see when your link lands in a chat or a feed, and it is usually the last thing anyone designs. Often it is the hero photo from the page, cropped by whatever app happens to show it, with the headline cut in half. A few minutes of planning makes it read properly at the size it is actually shown, which on a phone is much smaller than the file.

This guide is about the picture itself. The tags that point to it, such as og:image, are covered in adding a favicon and link preview to your page.

Start from 1200×630

Meta's documentation for link sharing recommends an image of at least 1200×630 pixels, close to a 1.91:1 ratio, and treats 600×315 as the minimum for the large preview layout. Most other apps that read Open Graph tags handle that size well, so it has become the common default. Set your canvas to 1200×630 from the start, or to exactly double (2400×1260) if your design tool exports sharper text at a larger size and you plan to scale it down afterwards.

A square or portrait picture will be cropped by the app, and you do not get to choose where.

Apps do not all show the same rectangle

Even with a 1.91:1 image, the shape people see varies. Depending on the app, the layout and whether the screen is wide or narrow, the preview may appear as the full wide rectangle, as a shorter strip, or as a small square thumbnail next to the title. Apps change these layouts and rarely document how they crop, so do not design for any single one.

The practical answer is a safe area. Put everything that must survive (the headline, the product, a face, the logo) in the middle of the canvas, and treat the outer parts as background that may disappear.

  • Edges: keep at least 60 to 80 pixels clear on every side of the 1200×630 canvas.
  • Square crops: if you want the image to work as a square thumbnail too, keep the essentials inside the central 630×630 square, that is, roughly between 285 and 915 pixels from the left.
  • Background: let the left and right thirds be texture, color or the less important part of a photo.

Most design tools let you drag guides onto the canvas. Add four guides for the margins and two at 285 and 915 pixels, and design inside them.

Text has to survive being shrunk

A 1200-pixel-wide image is not shown at 1200 pixels. In a chat on a phone, the preview is often only a few hundred pixels wide. If it is shown 400 pixels wide, everything is scaled to one third: a 48-pixel headline becomes 16 pixels, about the size of body text, and 24-pixel small print becomes 8 pixels, which nobody reads.

Working from that arithmetic, a sensible rule of thumb is:

  • Headline at 64 pixels or larger on the 1200×630 canvas, in a bold or semibold weight.
  • Nothing you need people to read below about 40 pixels.
  • Six to eight words at most. The title and description from your tags already appear under or next to the picture, so the image does not need to repeat them in full.

The quickest test is to zoom your design tool out until the canvas is about the width of a phone preview, or export it and look at it on your phone at arm's length. If you have to squint, the text is too small or too long.

Contrast and color

Preview images are viewed on bright phones in sunlight, in dark mode, and as tiny thumbnails. Text that is fine on your monitor can vanish in any of those.

  • Put text on a flat or calm area, not across a busy part of a photo. If it must sit on a photo, add a solid band or a dark overlay behind it.
  • Aim for strong contrast between text and background. The 4.5:1 ratio that accessibility guidelines set for normal text on web pages is a good minimum here too, because the text ends up small. Changing a page's colors to your brand explains how to check the ratio.
  • Avoid pure white backgrounds with no border. In a light-themed chat the picture blends into the bubble and looks like a missing image. A light tint or a thin edge color solves it.
  • Avoid red text on green or similar pairs that rely on hue alone; many people cannot tell them apart.

Where to put the logo

The logo is the first thing people want to put in a corner and the first thing a crop removes. If brand recognition matters, place the logo inside the safe area, either above the headline or beside it, at a size where its shape is still recognizable when the image is a third of its size. A logo 120 to 160 pixels wide on the canvas is usually enough; it does not need to dominate. If your logo includes a long wordmark, use the symbol alone; small lettering will not survive.

What not to rely on

  • Small print. Dates, prices with conditions, URLs and disclaimers in small type will not be legible. Put them in og:description or on the page itself.
  • Anything at the edges. A call to action in the bottom-right corner is exactly what gets cropped.
  • The image being shown at all. Some apps show only a small thumbnail, and some settings or slow connections show text only. The title and description must make sense without the picture.
  • Fine detail. Thin lines, light-weight fonts and detailed illustrations turn to mush at thumbnail size and after the app recompresses the image.

Making it, then fitting it with Finipix

Any design tool works: Figma, Canva, PowerPoint or Keynote with a custom slide size, or Photoshop. Build the design on a 1200×630 canvas with the guides above, then export it as PNG or high-quality JPEG. If you only have a photo, you can skip the design tool and go straight to the crop.

Finipix, a free tool from Qorlize, runs in the browser without uploading anything or asking for an account. To fit and compress the exported picture:

  1. Open Finipix and drop the image onto the window.
  2. Choose the Share image 1200×630 crop preset. Other presets keep the original proportions; this one crops to the share-image shape.
  3. If the picture was not already 1200×630, press Crop position and click the part of the image you want to keep, such as the headline or a face.
  4. Choose JPEG as the output format. It is the format every preview service is built around, and you cannot test every app, so it is the low-risk choice. The quality slider runs from 40 to 95 and starts at 80, which suits most share images; raise it if text edges look soft.
  5. Compare the before and after views, then download the file.

EXIF and GPS data are removed from the result, which matters if you started from a phone photo. Finipix does not add text or logos to images or edit pixels, so do the design work in your design tool first and use Finipix for the final size and file weight. Start from a picture that is at least 1200 pixels wide; a smaller source cannot gain detail.

Give the final file a new name each time you change it, such as share-spring-v2.jpg. Some apps cache preview images by their address, so a new name is the reliable way to make a changed picture show up.

Once the file is ready, upload it with your page and point og:image at its full address, as described in the link preview guide.

Want to try it on your own images? Open Finipix. It runs in your browser and your images stay on your device.