Graphics

Guide­lines for pho­tos and illustrations

  • Minimum width: 2000px wide
  • Minimal photo treatments (AKA no preset filters)
  • Illustrations should be vector format, if not: 2500px wide
  • Final screenshots: must be on a Mac Retina screen. Don’t have one? Send us the source files and we’ll look after it.
  • PNG, GIF, SVG, and JPEG are all acceptable submission formats.
  • We’ll look after optimizing your images.
  • If you’re a designer, composite images are great. But we’ll be the quality judge.
  • Don’t add any watermarks, trademarks, or logo marks on your images. We’ll reject them.
  • Please make sure you’ve got the right copyright licence for images and photos that you’re licensing. If there’s an image you’d like us to use, send us the URL and we’ll look into it.
  • Please send us the attributes links and author references from Flickr or other photo commons.

What format should I use?

CSSSVGPNGJPG

Best for

Gradients & simple geometric shapes

Vector-based illustrations, lettering, outlined type

Simple bitmap images with few/solid colours or transparency, complex vector-based images, screenshots (with no photos)

Photographs, colourful bitmaps, rich illustrations

Benefits

Smallest file size, no downloads, infinitely scalable

Tiny file size, infinitely scalable

Transparency, potentially small file size if optimized

Best file size and quality for photos and colourful bitmap images

Drawbacks

Can be difficult to generate and use, limited application

Only good for flat coloured-illustrations, files with several bezier points can balloon in file size

File size can get huge if contains several colours or gradients, requires third-party optimization to get best file sizes, has to be saved double size for retina screens

Large file sizes, has to be saved double size for retina screens

Processing tips & tools

Gradient generator, CSS shape generator

Keep the bezier points to a minimum, size the artboard to the edges of the artwork, SVG export settings for Illustrator

Save out at double the size it will be displayed

Save out at double the size it will be displayed (2500px wide for full-width) at about 30% quality