Image tools for marketers: Instagram, Open Graph, watermarks

Resize images for Instagram, LinkedIn, and Open Graph

A LinkedIn banner that looked generous on a 27-inch display will be a cropped ear on mobile. An Open Graph PNG of 2.4 MB will vanish on WhatsApp. A marketplace photo with a busy desk in the corner will be rejected for “lifestyle” when you needed “product on white.” None of these problems are creative. They are dimensional and procedural.

Start with social image sizes. Cover fills the frame and will cut edges; contain letterboxes. For a face or a pack shot, cover and then nudge with crop if the preset clips the wrong third. Keep headlines inside a safe center. Platforms disagree about edges and agree about the middle.

When assets leave the studio, put a line of type on them. Watermark will not defeat a screenshot, but it stops the intern at the partner brand from dropping your hero into their deck unlabeled. Keep opacity modest. A stamp that fights the product is worse than no stamp.

Pick brand colors from a campaign image

Decks go stale. The live campaign does not. Use image color picker on the approved key visual and copy hex into the landing page. If you need a quiet plate behind a headline, blur a still from the same shoot instead of inventing a gradient that matches nothing.

Product photo borders and favicon PNG files

Marketplaces still love a white margin. Add image border applies the same edge to a batch so SKUs look related. For the site itself, a favicon that is a cropped screenshot of a logo will look like a smudge at 16 pixels. Use the favicon generator from a square mark drawn for small sizes.

When the page is the product, still compress. A beautiful 1080×1350 that weighs 1.8 MB will lose the first swipe on cellular. Run it through the compressor after you have the crop.

Open Graph tags for a 1200x630 JPEG

A 1200×630 JPEG does nothing if the HTML still points at last year's PNG. After you download from social image sizes, put the file on your origin and keep width and height honest.

<meta property="og:title" content="Spring collection">
<meta property="og:image" content="https://brand.example/og-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta name="twitter:card" content="summary_large_image">

Match landing-page CSS to the campaign photo

Sample the key visual with the color picker, then put the hex in CSS variables so buttons, links, and a blur plate share one source of truth.

:root {
  --campaign: #c65a16;
  --forest: #215c38;
  --cream: #eef2ea;
}
.hero {
  background: var(--cream);
  color: var(--forest);
}
.cta { background: var(--campaign); color: #fff; }