AddThisFeature
Sign in

Blurred Image Placeholders

Fade images in from a soft blurred preview instead of leaving a blank hole.

simple Media & Video

What it adds

A tiny blurred preview generated at upload and shown in the image's exact final box until the full file loads.

What your agent is told to do

5
  1. 1

    Generate a very small preview once, during the upload pipeline that already produces the app's other image renditions, and store it alongside the image record.

  2. 2

    Keep the preview small enough to be delivered with the page markup itself. If loading the placeholder needs its own request, it arrives no sooner than the image and buys nothing.

  3. 3

    Reserve the image's exact final dimensions from its stored width and height, so the placeholder, the loaded image, and the failure state all occupy the same box.

  4. 4

    Apply this to the image surfaces users actually wait on — feeds, galleries, article bodies, product grids — and reuse whatever Attachment Gallery or lightbox already exists rather than wrapping images in a second layer.

  5. 5

    Do not generate previews on request. Producing a blurred thumbnail per page view puts image processing on the critical path of every render for no benefit.

Edge cases it handles

8
  • The preview must be produced once at upload and stored, never derived per request, or it becomes a per-view cost on the busiest pages.
  • Record the intrinsic width and height with the image and reserve that exact aspect ratio, so nothing on the page moves when the full file lands.
  • An image already in the browser cache appears instantly, and fading it in from a blur makes a fast load look slow. Detect the completed load and skip the transition.
  • Images that predate this feature, or whose processing failed, have no preview. Fall back to a flat neutral colour in the reserved box rather than leaving an empty gap.
  • Cut the fade entirely when reduced motion is requested and show the image as soon as it is ready.
  • A failed image load must resolve to a visible fallback with its alt text, not sit blurred forever as if it were still loading.
  • The blurred preview is decorative. Alt text must describe the real image and must not be replaced or duplicated by the placeholder.
  • Very small previews of sensitive images still convey their content. Serve them under the same access rules as the full image, not from an open path.

Definition of done

9
  • Every image with a stored preview shows it before the full file arrives.
  • Previews are generated once during upload processing and never per request.
  • Image boxes are reserved at their true aspect ratio and the page does not shift on load.
  • Cached images render immediately with no fade.
  • Images without a preview fall back to a flat colour placeholder.
  • Reduced-motion preferences remove the transition.
  • A failed load shows a visible fallback with alt text rather than a permanent blur.
  • 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.