Lazy Load Placeholder
Generate tiny blurred thumbnails for lazy loading.
Lazy Load Placeholder generates the tiny blurred thumbnails used by blur-up lazy loading — "Generate tiny blurred placeholders for lazy loading images." Drop one photo, set "Target Width (px)" (4–100, default 20), pick "Format" (WebP, PNG, or JPEG), and adjust "Quality" (UI slider 10–100). "Create Placeholder" ("Generating...") downscales the image to that width — preserving aspect ratio — then runs a second canvas pass with ctx.filter = 'blur(2px)'.
The result panel compares "Original" vs "Placeholder" sizes and hands you a "Base64 Code" block with "Copy" / "Copied" for inline data-URI placeholders, plus "Download" and "Start Over". Height is always derived from the source aspect (only width is user-controlled); PNG ignores quality (lossless). Everything — downscale, blur, base64 — runs locally: no network, no AI.
How it works
lib/imageLazyPlaceholder.ts first draws the image down to targetWidth with height = round(width * h/w) (min 1) using imageSmoothingEnabled = false for a pixelated tiny draw, then performs a second pass with ctx.filter = 'blur(2px)' to produce the blurred blob. The blob is read back through FileReader as a base64 data URL for the "Base64 Code" panel.
MIME mapping: webp→image/webp, png→image/png, jpeg→image/jpeg; quality is ignored for PNG. Zod: targetWidth int 4–100 default 20, format enum, quality 0.1–1 default 0.6 — though the page defaultValues set quality: 40 with a 10–100 slider (note the scale mismatch when wiring forms). No third-party libs: pure Canvas, fully offline.
How to use
- Drop one image (accept image/*; single file).
- Set "Target Width (px)" (4–100 slider; default 20).
- Choose "Format": WebP (default), PNG, or JPEG.
- Adjust "Quality" with the 10–100 slider (ignored for PNG).
- Click "Create Placeholder" (button reads "Generating..."; toast "Placeholder created!").
- Compare "Original" vs "Placeholder" sizes; the preview shows the blurred thumb (display width 200).
- Click "Copy" on the "Base64 Code" panel (toast "Base64 code copied!") and/or "Download"; "Start Over" resets.
Tips
- WebP at low width/quality yields the smallest inline placeholders — ideal for src blur-up patterns.
- The Base64 panel is built for data-URI <img> placeholders — copy it and swap in the full image on load.
- PNG ignores the quality parameter (lossless); stick to WebP or JPEG for size wins.
- Height auto-preserves the aspect ratio — only Target Width is user-controlled.
Lazy Load Placeholder FAQ
What's the blur effect?
A second canvas pass applies ctx.filter = 'blur(2px)' before the blob is exported.
Which format is smallest?
Typically WebP (the default) with low quality; PNG stays lossless and ignores the quality slider.
Can I set the height?
No — only Target Width; height is derived from the source aspect ratio.
Is the image uploaded?
No — downscale, blur, and base64 encoding all run locally; there is no network and no AI.
What do I do with the Base64 Code?
Paste it as a tiny inline src placeholder and swap in the full image on load — the classic lazy-load blur-up pattern.
Credits
- Canvas 2D API — Downscale, blur filter, and base64 encoding