AddThisFeature

Image Compression

Shrink uploaded images before they slow down every page that shows them.

moderate Data & Content

What it adds

Automatic resizing and re-encoding of uploaded images, with orientation, transparency, and metadata handled correctly.

What your agent is told to do

6
  1. 1

    Decide the maximum stored dimensions and target quality once, and apply them to every upload path in the app.

  2. 2

    Read orientation metadata and rotate the pixels before resizing, then drop the orientation tag. Resizing first bakes in a sideways image.

  3. 3

    Choose the output format by content: keep transparency where the source has it, and do not convert a transparent PNG to JPEG.

  4. 4

    Compress from the original bytes every time. Never re-compress an already-compressed derivative — each pass loses quality permanently.

  5. 5

    Strip EXIF by default, including GPS coordinates. A holiday photo uploaded as an avatar should not publish someone's home address.

  6. 6

    Do NOT compress on the client only. A client-side pass is a bandwidth optimisation; the server must still enforce the limits because the client can be bypassed.

Edge cases it handles

7
  • Animated GIFs and animated WebP must keep their frames or be rejected explicitly — a silent first-frame-only conversion looks like a bug.
  • A file claiming to be an image must be validated by its actual content, not its extension or declared type.
  • Enormous dimensions can exhaust memory during decode even when the file is small. Cap decoded pixel count, not just file size.
  • An image already smaller than the target must be left alone rather than re-encoded larger.
  • Colour profiles matter: dropping an embedded profile shifts colours visibly on wide-gamut screens.
  • Some uploads must keep their originals — proof-of-purchase photos, design source files. Define which, and store the original alongside.
  • A failed compression must not lose the upload; fall back to storing the original and log it.

Definition of done

8
  • Uploaded images are stored within the defined dimension and size limits.
  • Rotated photos display upright without client-side correction.
  • Transparency is preserved where the source had it.
  • Re-uploading a processed image does not degrade it further.
  • GPS and other EXIF metadata is removed from images served publicly.
  • Server-side limits hold even when the client-side pass is skipped.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.