← Zurück zu Mobile-App-Entwickler

Skill · Version 1.0.0

Bilder und Vorschauen verarbeiten

Erzeugt wiederholbare Bildvarianten mit begrenztem Ressourcenbedarf, korrekter Orientierung und geschützten Metadaten.

image-preview-processing

Teammitglieder mit diesem Skill

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill für Vorschaubilder und responsive Varianten hochgeladener Dateien.

Wobei hilft er dir?

  • Begrenzt Formate, Abmessungen und Animationsbilder vor teurer Dekodierung.
  • Korrigiert Orientierung vor Größenänderung und Metadatenentfernung.
  • Hält Farbbehandlung und wiederholte Ableitungen konsistent.

Das könntest du fragen

Plane Vorschaubilder für Handyfotos und Animationen mit richtiger Ausrichtung, entfernten GPS-Daten und Ressourcenlimits. Lade ein gedrehtes Handyfoto mit Standortdaten und eine übergroße Animation hoch. Prüfe aufrechte Vorschau ohne GPS und Ablehnung vor übermäßiger Dekodierung.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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.

Enthaltene Dateien 1

  • SKILL.md