Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

How-to

Exporting pages as PNG, JPEG, TIFF or SVG in Layout

Export pages or spreads from Layout by Zaweba as PNG, JPEG or TIFF with resolution, transparency, anti-aliasing and colour space, or as SVG per page.

Exporting pages as PNG, JPEG, TIFF or SVG in Layout

Not everything goes to print. A poster also needs a picture for social media, a brochure needs a cover image for the website, a magazine spread wants a preview for the newsletter. Layout by Zaweba exports pages or whole spreads as PNG, JPEG or TIFF pictures, and pages as SVG, so the same document serves print and screen.

Choosing between PNG, JPEG and TIFF

JPEG gives small files and suits photographic pages for the web, email and social posts. It compresses the picture, so very fine text and sharp edges can soften slightly.

PNG is lossless and keeps sharp edges crisp, which suits pages with a lot of text, diagrams, logos and flat colour. It can also have a transparent background.

TIFF is the heavyweight: lossless, widely accepted in print and archive workflows, and good when another designer or a printer wants a picture of a page rather than a PDF.

Pages or spreads

You can export single pages or whole spreads. Spreads are the right choice for showing a magazine or brochure as a reader would see it, for example in a portfolio or a preview. Layout joins spread pages exactly at the spine, and a frame or background that runs across the fold lines up in the exported picture just as it does on screen.

Settings that shape the result

Resolution sets how many pixels the picture has. Choose it by where the picture is going. A web preview needs far fewer pixels than a picture that will be printed by someone else. Too low and text blurs; too high and files are needlessly large.

Transparent background leaves the area with no fill clear, instead of white. It is the setting for exporting a logo panel or a badge that will sit on a coloured web page or over a photo. Use PNG for this, since JPEG doesn't keep transparency.

Anti-aliasing smooths edges of text and shapes on screen. Leave it on for nearly every screen use. Turn it off only when you need hard pixel edges for some technical reason.

Colour space decides whether the picture is RGB, CMYK or something else. RGB is right for anything on a screen. CMYK suits pictures handed to a print workflow that expects it.

SVG for vector pages

SVG export writes each page as a vector file. Text and shapes stay as vector artwork, so the result scales without blurring. That suits pages that are mostly graphics, such as a diagram, an infographic, an icon sheet or a simple poster that a web developer wants to use at different sizes.

Pages full of photos gain little from SVG, since the photos stay as pictures inside it. Use PNG or JPEG for those.

Mistakes people make with picture exports

Exporting at a low resolution for a print use leaves blurry results. Match resolution to the destination.

Using JPEG for text heavy pages makes small type look fuzzy. Use PNG.

Exporting CMYK pictures for the web gives odd colours in browsers. Use RGB for screens.

Not looking at the result is the last one. Open each exported picture and check its edges and text before posting or sending it.

One document, many outputs

Picture exports sit beside PDF, EPUB, HTML and slides in Layout's export options. Build the job once, export the press PDF for the printer, then the pictures for the web, all from the same pages, so the printed piece and its online preview always match.