Image file formats: choose a delivery file for the job
Compare practical uses of JPEG, PNG, SVG, and PDF, preserve an editable master, and test exports for transparency, sharpness, and production suitability.
Separate the master from the delivery
The editable master preserves the structure you need for future changes: layers, paths, text, masks, or linked assets. A delivery file serves a specific destination such as a website, a print supplier, or a review conversation. One format rarely does every job equally well.
Before exporting, ask what the recipient needs to do. View a preview, place an image in a layout, edit a logo, and print a booklet are different tasks. Choose the format and settings for that task, then keep the master separately. Clear filenames help prevent a small preview from becoming the accidental production source.
Match the image characteristics
JPEG is commonly useful for photographic images where a lossy compression tradeoff is acceptable. Repeated editing and resaving can introduce additional degradation, so return to the master for new exports. Examine detailed edges and smooth tonal areas when choosing the quality setting rather than judging only file size.
PNG uses lossless compression and can carry an alpha channel for transparency. It is useful for many graphics with sharp edges or transparent backgrounds, though a large photograph may produce a heavier file than an appropriate photographic format. Transparency and compression are separate decisions; a transparent image still needs suitable dimensions.
Understand vector and document containers
SVG is well suited to many scalable shape-based graphics, especially in web contexts. Keep the artwork reasonably simple and check any fonts, effects, or embedded images. A vector filename does not guarantee every component is resolution independent or that every application will render complex features identically.
PDF is a document format that can preserve page geometry and combine text, vectors, and raster content. Its suitability for print depends on how it was created and on the supplier's requirements. A PDF made from a tiny flattened preview remains limited by that preview, despite the more formal-looking extension.
Inspect the exported result
Open the export independently and check background, crop, dimensions, color appearance, and small details. For transparent artwork, place it over both a light and dark field to reveal unwanted halos. For a page, check fonts and images, and confirm the intended size rather than relying on a viewer's automatic zoom.
Avoid changing the extension manually as a conversion method. Export through a tool that actually encodes the chosen format. Keep a short delivery note identifying the purpose of each file when several versions are supplied. A dependable handoff makes the right choice obvious to the person who uses the artwork next.
Try it yourself
- Ask what the recipient needs to do with the file.
- Export from the master using actual format settings.
- Open the result independently and inspect size, background, and detail.
Exercise: one illustration, three exports
Draw a simple emblem with a textured background in an editable document. Export a JPEG preview, a transparent PNG of the emblem alone, and an SVG containing only the shape-based emblem. Compare the files on light and dark backgrounds. Notice that the JPEG cannot preserve the transparent cutout and that the SVG should not need the textured bitmap if the intended delivery is a clean symbol. Keep the original document so none of these purpose-specific exports becomes your only editable source.
References & further reading
- W3C: Portable Network Graphics specification ↗
- W3C: Scalable Vector Graphics 2 ↗
- Adobe: Raster versus vector images ↗
Examples and exercises in this guide are original teaching scenarios.
