{"uid":"cap_MKYV0ngJWDaKVFM_TD4h8","slug":"x402-image-tools-placeholder-data-blurhash-preview-color-dimensions-0205527d","name":"x402 Image Tools – Placeholder Data (BlurHash, Preview, Color, Dimensions)","description":"What a page shows while an image loads: its BlurHash, a tiny blurred WebP preview as a data URL, its average color and its dimensions.","url":"https://7fg5bxb40m3f0v23.68r.lambda-web.us-east-1.on.aws/v1/placeholder?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["url"],"properties":{"url":{"type":"string","description":"https URL of a JPEG, PNG, WebP, AVIF, GIF, TIFF or SVG image (up to 20 MB, 40 megapixels)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"width":{},"height":{},"blurhash":{},"average_color":{},"preview_data_url":{}}}}}}},"responseSchema":{"type":"json","example":{"width":1024,"height":683,"blurhash":"LEHV6nWB2yk8pyo0adR*.7kCMdnj","average_color":"#7a6b55","preview_data_url":"data:image/webp;base64,..."}},"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.001","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.001/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.001","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.001","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_nmJtp3IxWAXEWKtHQkN-p","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.001","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Given an image URL, returns its BlurHash string, a tiny blurred WebP preview as a base64 data URL, its average hex color, and its pixel dimensions — everything needed to render a polished image placeholder while the full image loads.","exampleAgentPrompt":"Can you get me the BlurHash, average color, tiny blurred WebP preview, and dimensions for this image: https://example.com/photo.jpg — I need it to build a nice loading placeholder before the full image appears.","exampleUseCases":[{"title":"Lazy-load placeholder for blog images","prompt":"I have a blog post with images and I want smooth lazy loading — can you fetch the BlurHash, average color, tiny WebP preview, and dimensions for https://myblog.com/images/hero.jpg so I can show a blurred placeholder while the full image loads?"},{"title":"E-commerce product image skeleton","prompt":"Before our product photos load on the shop page, I want to show a colored skeleton that matches the actual image. Can you get the average color, BlurHash, preview data URL, and pixel dimensions for https://shop.example.com/products/shirt-blue.png?"},{"title":"CMS image metadata enrichment pipeline","prompt":"I'm uploading images to our CMS and need to store placeholder metadata for each one. Can you extract the BlurHash, average hex color, blurred WebP preview data URL, and width/height for this image: https://cdn.mycms.io/uploads/landscape.webp?"}],"resultDescription":"Returns a JSON object with: width and height (integer pixel dimensions), blurhash (a compact BlurHash string for rendering a blurred placeholder), average_color (hex string e.g. '#7a6b55'), and preview_data_url (a base64-encoded tiny blurred WebP image as a data URL, ready to embed in HTML or CSS).","failureModes":["Image URL is not publicly accessible or returns a non-200 status — endpoint cannot fetch the image","Image format is unsupported (only JPEG, PNG, WebP, AVIF, GIF, TIFF, SVG accepted)","Image exceeds 20 MB or 40 megapixels — request rejected","Invalid or malformed URL provided in query params","Network timeout fetching a slow or large remote image","Payment not included or insufficient — x402 payment required error"],"whenToPreferThis":"Choose this endpoint when you need all the ingredients for a high-quality image lazy-loading experience in one call: BlurHash for CSS/canvas rendering, a tiny inline WebP preview for LQIP (Low Quality Image Placeholder) techniques, the average color for background/skeleton theming, and exact dimensions for layout reservation. It is ideal for front-end pipelines, CMS enrichment, and any scenario where you want to avoid layout shift and improve perceived load performance without running your own image analysis server.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-29T12:37:12.315Z","isFirstParty":false,"canonicalSlug":"x402-image-tools-placeholder-data-blurhash-preview-color-dimensions-0205527d"}