Exporting & File Formats

Raster Editing Fundamentals

Chapter 9 · Exporting & File Formats

Every prior chapter built up a finished, fully-layered editing project. This final technical chapter before the capstone covers getting that project out of the tool correctly — without losing the ability to keep editing it later.

Native Formats: PSD vs. XCF

Photoshop's own PSD and GIMP's own XCF both preserve every layer, mask, adjustment layer, and editing state fully — the "working file" format, meant for continued editing, not final delivery. A genuine interoperability gap is worth naming honestly here: opening a PSD in GIMP, or an XCF in Photoshop, works with varying and often imperfect fidelity, since neither company builds guaranteed, fully faithful native support for the other's own format.

Export vs. Save

Save/Save As keeps the native, fully-editable format intact. Export instead creates a separate, different-format file specifically for delivery or use elsewhere — Photoshop's own "Export As," GIMP's own "Export As." Conceptually identical in both tools: the native working file stays untouched, and a new delivery file is generated alongside it.

Web-Ready Formats: PNG vs. JPG

PNG is lossless, supports transparency, and produces a larger file size — best for graphics, logos, or anything needing a transparent background. JPG uses lossy compression, produces a smaller file size, and has no transparency support at all — best for photographs, where some quality loss is genuinely imperceptible at reasonable settings. A genuinely practical, common real-world decision point, not an academic distinction.

JPG Quality & Compression Artifacts

JPG's own lossy compression is adjustable — higher quality settings produce a larger file with less visible artifacting. Aggressive compression produces visible blocky artifacts, especially around hard edges and text, since JPG's own compression algorithm was originally designed around smooth photographic content, not sharp, hard-edged graphics. A real, common mistake: over-compressing a JPG containing text or sharp graphic elements, producing visibly ugly blocky artifacting around exactly those edges.

Flattening on Export

Revisiting Chapter 4's own warning box directly: exporting to PNG or JPG requires flattening, since neither format has any concept of separate layers at all. This is exactly why exporting a separate flattened copy — rather than flattening the actual working file — is the right practice, letting the export happen freely without ever endangering the original layered file.

FormatLayers preserved?Lossy/LosslessTransparencyBest for
PSD/XCFYesLosslessYesThe working file itself
PNGNoLosslessYesGraphics, logos, transparency
JPGNoLossyNoPhotographs
A genuinely common web development decision
Choosing between PNG and JPG for a website's own images is a real, everyday decision web developers make constantly — this site's own CSS courses assume images are already correctly exported by the time they reach a stylesheet, but this chapter's own material is exactly what determines that choice in the first place.
"Just always use PNG since it's lossless" is the wrong default
It's tempting to assume PNG is simply the better choice across the board, since it's lossless and technically higher quality. PNG's own lossless nature means file sizes for photographic content can be dramatically larger than an equivalent JPG at a perfectly acceptable quality setting — a real, practical problem for web performance, page load times, and bandwidth. The correct choice depends on the content type (photo vs. graphic) and whether transparency is actually needed — not a blanket assumption that lossless always wins.

Hands-On Exercises

Exercise 1

A website needs a photograph of a landscape and a logo with a transparent background. Using this chapter's own material, recommend a file format for each, and justify both choices.

📄 View solution
Exercise 2

A designer exports a graphic containing sharp text over a solid background as a heavily-compressed, low-quality JPG to save file size, and the text comes out looking blocky and ugly. Explain what went wrong, using this chapter's own material.

📄 View solution
Exercise 3

A photographer's finished project has 40 layers, masks, and adjustment layers. Explain the correct way to produce a JPG for a client's website while keeping the original project fully editable for future revisions.

📄 View solution

Chapter 9 Quick Reference

  • PSD/XCF — the native working format, preserving every layer; imperfect fidelity when opened cross-tool
  • Save keeps the native file; Export creates a separate delivery file, leaving the working file untouched
  • PNG — lossless, supports transparency, larger files, best for graphics. JPG — lossy, smaller files, no transparency, best for photos
  • Aggressive JPG compression produces visible artifacts around hard edges/text specifically
  • Export a flattened copy, never the original working file — the same safety habit from Chapter 4
  • "Always use PNG" is wrong — the right format depends on content type and transparency needs, not a blanket lossless preference