Vector vs- Raster: Choosing the right image format

Image formats can be confusing. Let’s explain the difference between ‘vector’ and ‘raster’, plus offers tips on when it is best to use each format.

Vector vs- Raster

OpenCities Planner allows image uploads in the following formats: SVG, PNG, GIF, and JPG.

Vector – SVG is the only available vector format. It is preferred for graphics and logos. Vector files are mathematical, made of lines and points, which basically means they retain sharpness regardless of screen size or resolution. Your graphic will never become blurry.
Raster – PNG, GIF, and JPG are raster formats. Raster files are made of pixels, or single points of colour. They appear blurry when scaled upwards and on higher resolution screens.

Note: This is just a very brief overview. Click here if you’d like to learn more.

Want to see the difference for yourself? Here are two example masthead files you can experiment with:

It’s a lot of information for non-designers to digest, so here is a simple breakdown of when it is best to use each image format:

SVG – All graphics and logos, everything you upload to customise the interface (Masthead, Buttons, etc).
PNG – If it’s not possible to use an SVG for a graphic, use a high resolution PNG.
GIF – This one is most useful for adding animations to a Details Window, but it is a less common use case.
JPG – Photographs! Most commonly used for adding content to Project Info and Details Windows.

Vector graphics are extra important for projects published to 4K, Retina, and mobile screens.

If you lack vector assets, you can use Vector Magic to automatically convert images from raster formats.
Inkscape is a free open-source program for Windows and MacOS which can be used to edit and convert vector formats.
Commercial vector software options include Adobe Illustrator, CorelDRAW, and Sketch.