To WebP

WebP delivers smaller files than PNG while preserving transparency, and smaller files than JPEG at comparable quality. Use it when bandwidth or storage matters and the output stays inside a WebP-aware viewer.

import Foundation
import IMGLYEngine

@MainActor
func toWebp(engine: Engine) async throws {
  let assetsBase = "https://cdn.img.ly/packages/imgly/cesdk-swift/1.76.0/assets"
  try engine.editor.setSettingString("basePath", value: assetsBase)
  let sceneURL = URL(string: "\(assetsBase)/ly.img.template/templates/cesdk_postcard_1.scene")!
  try await engine.scene.load(from: sceneURL)

  let page = try engine.scene.getPages().first!

  let blob: Blob = try await engine.block.export(
    page,
    mimeType: .webp,
    options: ExportOptions(webpQuality: 0.8),
  )

  let losslessBlob = try await engine.block.export(
    page,
    mimeType: .webp,
    options: ExportOptions(webpQuality: 1.0),
  )

  let sizedBlob = try await engine.block.export(
    page,
    mimeType: .webp,
    options: ExportOptions(
      webpQuality: 0.85,
      targetWidth: 1920,
      targetHeight: 1080,
    ),
  )

  let outputURL = FileManager.default.temporaryDirectory.appendingPathComponent("export.webp")
  try blob.write(to: outputURL)

  _ = losslessBlob
  _ = sizedBlob
}

This guide covers exporting to WebP, configuring quality, resizing the output, and saving the result to disk.

Export to WebP#

Export a design block by calling engine.block.export(_:mimeType:options:) with .webp as the MIME type. The call returns a Blob (a Data value) containing the encoded image. The webpQuality field on ExportOptions controls compression — 0.8 is a good starting point for web delivery.

let blob: Blob = try await engine.block.export(
  page,
  mimeType: .webp,
  options: ExportOptions(webpQuality: 0.8),
)

Pass a page returned by engine.scene.getPages(), or any other block ID, to export specific elements.

Export Options#

WebP export reads these fields from ExportOptions:

Lossless Compression#

Set webpQuality to 1.0 to switch the encoder to its lossless mode. WebP’s lossless encoding usually produces smaller files than PNG while preserving every pixel.

let losslessBlob = try await engine.block.export(
  page,
  mimeType: .webp,
  options: ExportOptions(webpQuality: 1.0),
)

Values between 0.8 and 0.95 keep visual quality high while shrinking the file substantially. Lower values trade more visible quality for smaller files.

Target Dimensions#

Specify targetWidth and targetHeight together to export at exact dimensions. The output fills the target size while maintaining aspect ratio.

let sizedBlob = try await engine.block.export(
  page,
  mimeType: .webp,
  options: ExportOptions(
    webpQuality: 0.85,
    targetWidth: 1920,
    targetHeight: 1080,
  ),
)

If the target aspect ratio differs from the block’s aspect ratio, the output extends beyond the target on one axis to preserve proportions.

Save to File System#

The returned Blob is a Data value, so writing it to disk is a single call to write(to:).

let outputURL = FileManager.default.temporaryDirectory.appendingPathComponent("export.webp")
try blob.write(to: outputURL)

Troubleshooting#

File still too large — Lower webpQuality toward 0.5–0.7, or reduce dimensions with targetWidth and targetHeight. Pure-photographic content compresses well at lower quality settings.

Transparent areas appear opaque — Verify the source page or block has a transparent background fill. WebP preserves alpha when the source block is transparent.

Output looks degraded at high quality — Switch to lossless by setting webpQuality to 1.0. For graphics with sharp edges and text, lossless WebP avoids the smearing that lossy compression can introduce.

API Reference#

Next Steps#

• Export Overview — Compare all available export formats
• Export to PDF — Generate print-ready PDF documents from your designs
• Partial Export — Export specific blocks, groups, or page elements instead of entire scenes
• Export Size Limits — Check device export limits before exporting large designs