Web & Screen Export

• 01
  The Format Decision Tree for Screen Assets

  Choose format by the nature of the content, not personal preference. Photograph or complex imagery with no transparency: WebP first (Quality 82–87), JPEG as fallback (Quality 85) for older browser targets. Photograph or complex imagery with transparency: WebP with alpha first, PNG-24 as fallback — never JPEG, which cannot carry transparency. Logo, icon, or flat-colour illustration with transparency: SVG if the asset originated as vector (Inkscape); PNG-24 if it must be raster; never JPEG. Animation: WebP animated or GIF (GIF only for very simple, short animations — its 256-colour limit is severe). UI screenshot or screengrab: PNG always — JPEG compression artefacts on sharp edges and text are immediately visible and unprofessional.

  Photo → WebP/JPEG · Photo+alpha → WebP-alpha/PNG · Logo → SVG/PNG · Animation → WebP-anim/GIF · Screenshot → PNG
• 02
  Set Canvas Resolution Correctly for Screen Work

  When creating a new canvas for screen work, set PPI to 72 (or 96 — the value is irrelevant for screen output but 72 is the historical convention for screen). What matters is the pixel dimension. For a web banner at 1200 CSS pixels wide that must look sharp on 2× HiDPI displays, create the canvas at 2400 × (proportional height) px. Design at this 2× size throughout. Export at full size (the 2× asset: banner@2x.webp), then scale down to 1200 px and export again (the 1× asset: banner.webp or banner@1x.webp). The HTML <picture> or srcset attribute handles serving the correct variant to each display. Never design at 1× and upscale — upscaling never improves quality.

  Image → Canvas Size → set px dimensions · File → New → set PPI to 72 (irrelevant but conventional)
• 03
  Strip Metadata on Export

  Camera photographs embed Exif metadata that can include GPS coordinates, camera serial number, timestamp, and lens information. For any image published to the web, this data should be stripped before export — both to reduce file size (metadata adds 10–50 KB to typical JPEGs) and to avoid inadvertently sharing location information. In GIMP's JPEG export dialog, uncheck Save Exif data, Save XMP data, and Save IPTC data. In WebP export, uncheck all metadata options. In Script-Fu, the file-jpeg-save procedure's parameters control this: arguments 9, 10, and 11 correspond to Exif, thumbnail, and XMP respectively — pass 0 for each to strip them. PNG files do not carry Exif by default but can carry text chunks — the PNG export dialog's Save creation time and Save comment options should be unchecked for web delivery.

  JPEG export → uncheck Save Exif, Save XMP, Save IPTC · WebP export → uncheck all metadata
• 04
  Export a 1× and 2× HiDPI Pair with Script-Fu

  The standard HiDPI workflow: design at 2×, export both sizes from a single Script-Fu call. Load the source (which is already at 2× dimensions), export it as the @2x asset, duplicate the image, scale the duplicate to 50% using gimp-image-scale-full, export the duplicate as the 1× asset, then delete both. The naming convention asset@2x.webp / asset.webp (or asset@1x.webp) is the industry standard and is what build tools like webpack, Vite, and image CDNs expect.

  ; Export @2x and @1x WebP from a 2x-sized source (let* ((image (car (gimp-file-load RUN-NONINTERACTIVE "/path/banner@2x.png" "banner@2x.png"))) (w2x (car (gimp-image-width image))) (h2x (car (gimp-image-height image))) (img-1x (car (gimp-image-duplicate image)))) ; Export 2x (gimp-image-flatten image) (file-webp-save RUN-NONINTERACTIVE image (car (gimp-image-get-active-drawable image)) "/path/export/banner@2x.webp" "banner@2x.webp" 0 85 0 0 0 0 0 0 0) ; Scale duplicate to 1x and export (gimp-image-scale-full img-1x (/ w2x 2) (/ h2x 2) INTERPOLATION-LINEAR) (gimp-image-flatten img-1x) (file-webp-save RUN-NONINTERACTIVE img-1x (car (gimp-image-get-active-drawable img-1x)) "/path/export/banner.webp" "banner.webp" 0 85 0 0 0 0 0 0 0) (gimp-image-delete image) (gimp-image-delete img-1x))
• 05
  Use Guides to Define Slice Regions

  Slicing a canvas — dividing a single GIMP document into multiple export regions — begins with guides. Add horizontal guides via Image → Guides → Create Guide (or drag from the ruler). Add vertical guides the same way. Guides snap to pixel boundaries when View → Snap to Guides is enabled. For a UI mockup with a header, three feature panels, and a footer, place guides at each region boundary. Once guides divide the canvas into the desired regions, you can use them as crop boundaries — or reference their coordinates in a Script-Fu export script — to extract each region as a named asset.

  Image → Guides → Create Guide · drag from ruler · View → Snap to Guides
• 06
  Extract Slice Regions with Script-Fu gimp-image-crop

  With slice coordinates known, use gimp-image-crop on duplicates of the source image to extract each region. The procedure takes image, new-width, new-height, offset-x, and offset-y. By duplicating the source image before each crop and deleting the duplicate after export, the original remains intact for the next slice. This is more controlled than GIMP's built-in Script-Fu slice plugin, which has limited naming and format options.

  ; Extract three horizontal slices from a 1200x900 canvas ; Slice 1: header y=0 to y=200 (height 200) ; Slice 2: body y=200 to y=700 (height 500) ; Slice 3: footer y=700 to y=900 (height 200) (let* ((source (car (gimp-file-load RUN-NONINTERACTIVE "/path/mockup.xcf" "mockup.xcf"))) (slices '(("header" 0 200) ("body" 200 500) ("footer" 700 200)))) (for-each (lambda (slice) (let* ((name (car slice)) (y-off (cadr slice)) (height (caddr slice)) (dupe (car (gimp-image-duplicate source)))) (gimp-image-crop dupe 1200 height 0 y-off) (gimp-image-flatten dupe) (file-png-save RUN-NONINTERACTIVE dupe (car (gimp-image-get-active-drawable dupe)) (string-append "/path/export/" name ".png") name 0 6 1 1 1 1 1) (gimp-image-delete dupe))) slices) (gimp-image-delete source))
• 07
  Export Icons at Multiple Sizes from a Single Layer

  Icon sets for web and app use require the same icon at multiple sizes: typically 16, 32, 48, 64, 128, 256, and 512 px. Design the icon at 512 × 512 px — the largest required size — on a transparent background in a single layer. Use a Script-Fu loop over a list of target sizes: duplicate the 512 px source, scale the duplicate to each target size using INTERPOLATION-LINEAR for sizes above 64 px and INTERPOLATION-NONE for 16 and 32 px (which need hard pixel edges for legibility at small sizes), export as PNG, delete the duplicate. This generates a complete icon set from a single source in under a second.

  ; Export icon set at standard sizes from a 512x512 source (let* ((source (car (gimp-file-load RUN-NONINTERACTIVE "/path/icon-512.png" "icon-512.png")))) (for-each (lambda (size) (let* ((dupe (car (gimp-image-duplicate source))) (interp (if (<= size 32) INTERPOLATION-NONE INTERPOLATION-LINEAR))) (gimp-image-scale-full dupe size size interp) (file-png-save RUN-NONINTERACTIVE dupe (car (gimp-image-get-active-drawable dupe)) (string-append "/path/icons/icon-" (number->string size) ".png") (string-append "icon-" (number->string size)) 0 6 1 1 1 1 1) (gimp-image-delete dupe))) '(16 32 48 64 128 256 512)) (gimp-image-delete source))
• 08
  Optimise PNG Output with pngcrush or oxipng After Export

  GIMP's PNG export is correct but not maximally compressed. For web production where every kilobyte matters, run exported PNGs through a lossless optimiser after GIMP produces them. oxipng (command line, cross-platform) and pngcrush typically reduce PNG file sizes by 10–30% with zero quality loss — they apply more aggressive compression algorithms than GIMP's built-in encoder. From a terminal: oxipng -o 4 --strip safe *.png processes all PNGs in the current directory. The --strip safe flag removes all non-essential metadata chunks. This post-processing step is standard in professional front-end build pipelines and is worth adding even if you only run it once per project before final delivery.

  Terminal: oxipng -o 4 --strip safe /path/export/png/*.png
• 09
  sRGB Colour Profile — Embed or Strip?

  GIMP embeds the sRGB colour profile in exported files by default. For web delivery, keep the embedded sRGB profile in JPEG and PNG files — modern browsers honour it and display colours accurately on wide-gamut displays. Stripping the profile saves a few hundred bytes but risks colours shifting on wide-gamut screens where the browser must assume a colour space. For WebP, the colour profile is embedded automatically if present and the browser handles it correctly. The one exception: very small icon PNGs (16 × 16, 32 × 32) can have the profile stripped to reduce overhead — at those sizes the visual difference from a colour profile shift is imperceptible. In GIMP's PNG export dialog, the Save colour profile checkbox controls this per export.

  PNG export → Save colour profile: checked for photography, optional for small icons

Create a new canvas at 2400 × 600 px (this is the 2× size of a 1200 × 300 px web banner). Add a background gradient, some text, and a simple shape — enough content to test how the export looks at both sizes. You'll export four files: a 2× WebP, a 1× WebP, a 2× PNG (as transparency-preserving fallback), and a 1× PNG.

• A
  Design at 2× and flatten

  Fill the 2400 × 600 px canvas with a gradient background. Add a bold text headline at 80–100 px (this will display as 40–50 px at 1× — check it reads at that size by zooming to 50%). Add a simple shape or icon element. When the design is ready, flatten the image: Image → Flatten Image. Confirm the Layers panel shows a single layer named "Background" with no alpha channel. Save the working file as banner@2x.xcf before exporting anything.

• B
  Export the 2× assets

  File → Export As. Name the file banner@2x.webp. In the WebP dialog: Quality 85, Lossless off, all metadata unchecked. Export. Then File → Export As again, name it banner@2x.png. In the PNG dialog: Compression 6, Save colour profile checked, metadata unchecked. Both 2× files are now in your export folder.

• C
  Scale to 1× and export the 1× assets

  Image → Scale Image. Set Width to 1200 px — GIMP calculates the height proportionally (300 px). Interpolation: Linear. Click Scale. The canvas is now 1200 × 300 px. File → Export As → banner.webp at Quality 85. File → Export As → banner.png at Compression 6. You now have four export files. Do not save the scaled-down version as XCF — close without saving (or undo the scale) to preserve your 2× working file.

• D
  Verify in a browser with a srcset test page

  Create a minimal HTML file in the same export folder containing a <picture> element that references banner@2x.webp for 2× displays and banner.webp for 1×. Open it in a browser and use DevTools → Device Toolbar to toggle between 1× and 2× device pixel ratios. Confirm the correct asset loads in each case. Check the Network tab to confirm file sizes — the WebP files should be noticeably smaller than the PNGs for the same content.

Take any multi-region design — a simple app screen, a web page mockup, or a set of UI components laid out on a single canvas — and write a Script-Fu script that slices it into named PNG files, one per region, without any manual cropping. No step-by-step guidance — design the script structure using the techniques from this session and Session 16.

• →
  Define slice coordinates as a Script-Fu data structure

  Represent each slice as a list of five values: name, x-offset, y-offset, width, height. Group these into a parent list — one entry per asset. Write a for-each loop that duplicates the source image, crops the duplicate to the slice coordinates using gimp-image-crop, exports as PNG with the slice name, and deletes the duplicate. The source image is never modified. Test with three regions before adding more.

• →
  Export each slice at both 1× and 2× automatically

  Extend the loop: after exporting the full-size (2×) crop, duplicate the cropped image again, scale it to 50% using gimp-image-scale-full, export the 1× version with a @1x suffix (or no suffix, depending on your naming convention), then delete both the 2× and 1× duplicates before moving to the next slice. The result: every slice exported at both densities from one script run, from one source file, with no manual work.