PNG, JPG, SVG or WebP?

Four formats cover everything a campaign needs. Choosing the right one is mostly a question of what is in the image.

The decision table

If the image is…	Use	Why
A photograph	JPG (or WebP where accepted)	Small files, no visible loss at quality 75–85
A logo, icon or flat illustration	SVG	Infinitely sharp, tiny, editable — if the placement accepts it
A logo where SVG is not accepted (most email)	PNG	Sharp edges, transparency preserved
Text on a plain background	PNG	JPG smears the edges of type
Needs a transparent background	PNG or SVG	JPG has no transparency
Simple animation	GIF	The only widely accepted animated format in ads
A photograph with transparency	PNG-24	Larger file, but the only option

Format notes

JPG

The default for photography. Export at quality 75–85 — above that the file grows quickly with no visible gain; below 70, blocky artefacts appear in smooth areas like skies and skin. Save as progressive where the option exists; it loads in stages and feels faster. Never save a JPG, edit it and save it again: every save loses quality. Keep the original.

PNG

Lossless, so a PNG is always exactly what you exported. That makes it perfect for logos, screenshots and type, and wrong for photographs — a photographic PNG is often five to ten times the size of the JPG. PNG-8 (256 colours) is fine for flat graphics and much smaller; PNG-24 is needed for gradients and transparency over photographs.

SVG

A vector file that scales to any size without blurring. Ideal for logos on websites and in display creative. Two cautions: most email clients will not display it, so newsletters need PNG; and an SVG exported from a design tool can carry hidden layers and fonts — export with text converted to outlines and unused elements removed, or the file may render differently elsewhere.

WebP

Photographs at roughly 25–35% smaller than an equivalent JPG, with transparency support. Modern browsers all display it; email clients mostly do not. We use it for display placements where the publisher supports it and JPG everywhere else. If you supply JPG we will convert to WebP ourselves when useful.

GIF

Limited to 256 colours, so photographs look poor and files get large. Use it only for simple animated creative, and follow the animation rules.

Export settings that matter

Setting	Use	Why
Colour profile	sRGB	Other profiles shift colours in browsers and email
Colour mode	RGB	CMYK is for print; it looks wrong on screen
Resolution	Pixel dimensions, not DPI	“300 DPI” means nothing on screen; only width × height matters
Retina / 2×	Export at 2× for anything on a phone	A 600 × 200 newsletter banner is exported at 1200 × 400
Metadata	Strip it	Removes camera data and shrinks the file
Interlaced / progressive	On for JPG	Feels faster to load

Getting under the weight limit

1. Export at the exact size needed. Oversized images are the most common cause of heavy files.
2. Use JPG for anything photographic.
3. Lower JPG quality to 75, then compare — most people cannot see the difference from 90.
4. Run the file through a compressor (Squoosh, ImageOptim, TinyPNG). Expect a further 20–60% reduction with no visible change.
5. For PNG, reduce to 256 colours if the image is flat.

Sending logos

Send your logo in three forms and we will never need to ask again:

• logo-primary.svg — vector, text outlined;
• logo-primary-transparent.png — at least 1200 px wide, transparent background;
• logo-primary-on-dark.png — a version that works on dark backgrounds, if one exists.

A logo lifted from a website is typically 150 px wide and unusable in print or at 2×. Ask whoever designed it for the original.