Exporting PNG, JPEG and web images from Vectornation
Export PNG, JPEG, WebP, TIFF, BMP or GIF with scope, ppi and background, use Export for screens, or make an Optimised web image with live file size.
A vector drawing usually ends up as a picture somewhere: a website header, a social post, an image in a slide, a thumbnail on a shop page. Vectornation by Zaweba has three ways out to pixels, each suited to a different kind of job.
There is plain image export to PNG, JPEG, WebP, TIFF, BMP and GIF, with control over scope, ppi, background and anti-aliasing. There is Export for screens. And there is Optimised web image, with PNG-8 colour reduction, dithering and a live file size.
Plain export and its settings
Scope decides what is exported: the selection, an artboard, or the whole drawing. Choosing it carefully saves cropping afterwards.
PPI sets the resolution. For print, use a high figure suited to the print size. For screens, think in pixels: what matters is the final width and height in pixels, and ppi is the way you get there.
Background lets you keep transparency or fill behind the artwork. PNG, WebP and TIFF can keep a transparent background, which suits logos and icons placed over other things. JPEG cannot, so it needs a background.
Anti-aliasing smooths the edges of shapes. Leave it on for illustrations and photos. For pixel art or very small icons where you want hard pixel edges, try it off.
Choosing a format
PNG is the safe choice for flat artwork, logos and anything with transparency. JPEG suits photos and busy illustrations, where its compression hides well. WebP is a good modern choice for websites, giving smaller files at similar quality. TIFF is for print and archiving. GIF and BMP are there when an older system asks for them.
Export for screens
Export for screens is a separate route aimed at graphics that will be seen on a display rather than printed, such as icons, app artwork and web graphics. For collecting many separate objects and exporting each in several formats, the Asset export panel does a related job.
Optimised web image
For the web, file size matters as much as looks. Optimised web image shows a live file size as you change settings, so you can find the smallest file that still looks right.
PNG-8 reduces the image to a limited set of colours. Flat artwork such as logos and diagrams often looks identical with far fewer colours, and the file shrinks a lot. Dithering mixes colours in a fine pattern to fake the missing in-between shades, which helps gradients but adds weight. Try with and without.
Habits that give better images
Design at the size you will export. Fine lines that look good zoomed in can vanish or blur at a small pixel size, so check at actual size before exporting.
Line shapes up to whole pixels for sharp icons. A shape that sits half a pixel off will have a soft edge.
Export a test and look at it outside the app, in a browser or image viewer. That is how your audience will see it.
When not to export an image
If the destination can take vectors, it is often better to send them. A website can use SVG for logos and icons, which stay sharp at any size. A printer will want PDF. Image export is for places that only take pictures, and for photos and complex effects where pixels are the natural format.
