RGB vs. CMYK

RGB (Red, Green, Blue) is how screens create color — by mixing light. It's used for anything viewed on a display: websites, social media, phone screens, TVs. CMYK (Cyan, Magenta, Yellow, Key/black) is how printers create color — by mixing ink on paper. It's used for anything physically printed: business cards, packaging, posters, brochures.

The reason this matters practically: RGB can produce brighter, more vivid colors than CMYK ink can physically reproduce. A logo designed and approved on-screen in RGB, then sent straight to a printer, often comes back looking duller or slightly off-color — because the printer has converted colors it simply cannot make with ink. The fix is designing (or at least color-checking) in CMYK from the start for anything that will be printed.

Aspect ratio

Aspect ratio is the relationship between an image's width and height, written as two numbers like 16:9 or 1:1. A 16:9 image is wide (standard video/widescreen), a 1:1 image is a perfect square (common for social posts and product thumbnails), a 9:16 image is tall (standard for phone-screen stories and reels).

Problems appear when an image is placed into a slot with a different aspect ratio than it was made for — it either gets stretched (distorting everything in it) or cropped (cutting off parts of the subject). Designing with the destination's aspect ratio in mind from the start avoids both.

Image formats, in plain terms

  • JPG — good for photographs; smaller file size, but loses a little quality (compression) and does not support transparency.
  • PNG — supports transparency (a logo with no background); larger file size than JPG; best for logos, icons, and graphics with flat colors or text.
  • SVG — a vector format built from math, not pixels, so it can scale to any size (a billboard or a favicon) with zero quality loss; ideal for logos and icons, not for photographs.
  • WEBP — a newer web format that gives JPG-like or PNG-like quality at a smaller file size, increasingly the default for fast-loading websites.

The takeaway

Before sending a file anywhere, ask what it's actually for. Print → CMYK. Screen → RGB. Needs a transparent background or infinite scaling → PNG or SVG, not JPG. Matching the format to the destination prevents almost every "why does this look wrong now" surprise.