Orqestria Download
← Back to Web app developers

Skill · Version 1.0.0

Image and preview processing

Creates repeatable image derivatives while protecting decoding resources, orientation, visual fidelity and private metadata.

image-preview-processing

Team members using this skill

See how it helps

When is it useful?

Use when uploaded images need thumbnails, responsive variants or safe previews.

What does it help you do?

  • Limits formats, dimensions and animated frame totals before expensive decoding.
  • Applies orientation correctly before resizing and removing sensitive metadata.
  • Keeps color handling and derivative generation consistent across repeated processing.

Try asking this

Design thumbnail generation for phone photos and animated uploads, preserving orientation while removing GPS data and bounding resource use. Upload a rotated phone photo with location metadata and an oversized animation. Verify upright previews without GPS data and explicit rejection before excessive decoding.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Image & Preview Processing

Generating thumbnails, responsive image variants and document previews requires protecting the server from malicious image payloads, preserving visual fidelity (orientation and color profiles), stripping sensitive metadata and keeping derivative generation repeatable.

1. Safe Image Decoding & Pixel-Bomb Protection

Before resizing or transcoding any user image (sharp / libvips, ImageMagick, gd, Pillow):

  1. Enforce input pixel & dimension ceilings:
    • Configure a hard pixel limit (e.g., sharp(input, { limitInputPixels: 100_000_000, failOn: 'truncated' }) or <= 100 MP) before decoding pixel buffers.
    • Restrict enabled decoder formats to the explicit allowlist (jpeg, png, webp, avif, gif) — disable legacy ImageMagick coders (SVG, MVG, PDF, PS, EPS, HTTPS) via policy.xml to block arbitrary file reads and RCE!
  2. Animated Images (GIF / Animated WebP):
    • Cap maximum frame count (pages) and combined width * height * pages so a 1,000-frame high-resolution GIF does not exhaust worker RAM.

2. EXIF Orientation, Privacy Metadata & Color Profiles

  • Auto-orient before resizing:
    • Smartphone photos frequently store the pixel grid sideways with an EXIF Orientation tag (1..8).
    • Always apply EXIF auto-rotation (e.g., .rotate() in sharp / -auto-orient in ImageMagick) before resizing and stripping metadata, otherwise portrait photos will render sideways!
  • Strip sensitive EXIF / GPS / XMP metadata by default:
    • User photos often contain exact home/office GPS coordinates, device serial numbers and camera owner names. Strip EXIF/GPS metadata on public or shared derivatives while preserving ICC color profiles (or converting wide-gamut Display P3 / CMYK images to sRGB) so colors do not look washed out.

3. Output Formats, Responsive Variants & Document Previews

  • Derivative matrix:
    • Generate modern compressed formats (WebP / AVIF, with JPEG/PNG fallback where needed) at concrete target widths (thumb_160, preview_640, full_1600) using fit: 'inside' and withoutEnlargement: true.
    • Record exact output width, height, size_bytes and optional blurhash / dominant color placeholder in metadata so the UI can reserve aspect-ratio space (aspect-ratio: width / height) with zero Cumulative Layout Shift (CLS).
  • Document & PDF Previews:
    • Render only the needed preview pages (e.g., page 1 thumbnail + on-demand page range) at bounded DPI (150 DPI), inside a sandboxed worker with strict CPU/memory/timeout limits.
    • Coordinate complex PDF text extraction, structure parsing or redaction requirements with the document specialist.
  • Versioned, Rebuildable Pipelines:
    • Store a pipeline_version on derivative records so when thumbnail sizes or watermarks change, background jobs can regenerate derivatives from the immutable original file without data loss.

Included files 1

  • SKILL.md