Image API to generate embeddable blurry placeholders

1 simple POST endpoint.
No dependencies or custom image implementation.
Language/framework agnostic, wherever you can make an API request.
Platform agnostic, wherever you can render an image.
Server-side render instantly, or serve with your JSON API.

10 free credits on sign up! 🤩

Create account API documentation →

👆

👉

Pay as you go

$0.01 per unique image. That's it.

You only pay for the first API request for any unique image. After that, the same image and request is free.

Adding credits is required (minimum $1) when your free credits run out. An "auto top-up" option is available when you run low.

$0.01 = 1 credit

Use cases

The point is to NOT make a network request when serving these kind of placeholder images (that defeats the point of them). SolidImage is also not meant to be used as a "image proxy service", which sometimes offer blur support, but they are usually meant as an on-demand image manipulation service. Example of those would be something like https://imageproxy.com?img=mydomain.com/images/test.jpg&q=40&blur=4&w=100.

1) Pre-processing

Server-rendered images from a CMS in a static generated website, for example NextJS. Just use the endpoint at build-time.

2) Post-processing

Use the endpoint at run-time when users upload images. This could be done in a background job. Great for any server framework, such as Laravel, Django and Ruby on Rails.

Demo

The image will be rendered like this instantly without a network request, and later the full image loads in.

* fading in an image, and stacking them on top of each other, is up to you to implement.

Quick usage example

cURL example

curl --location 'https://solidimage.dev/api/v1/image_analysis' \
  --form 'analysis[file]=@"test.jpg"' \
  --form 'api_key="eyJfcmFpbHMiOnsiZGF1YSI0WzJdLCKwdXIiOiJBcHBcbmFwaV9rZXicbiJ9fO==--fc382c5c9f03f61n9b02d5bb2d7927611ac9ee49"' \
  --form 'analysis[thumb_hash_data_url_enabled]="1"'

API response example (200 OK)

{
  "result": {
    "thumb": {
      "dataUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhE … Sx3AAAAAABJRU5ErkJggg==",
      "dimensions": {
        "width": 100,
        "height": 75,
        "aspectRatio": 1.333
      }
    }
  },
  "meta": {
    "creditsCost": 1.0,
    "originalCreditsCost": null,
    "imageFileName": "test.jpg",
    "remainingCredits": 9.0
  },
  "errorCode": null,
  "errorMessage": null,
  "success": true,
  "statusCode": "ok",
  "status": 200
}

HTML (JSX) example

<img
  src={response.result.thumb.dataUrl}
  width={200}
  height={200 / response.result.thumb.dimensions.aspectRatio}
/>

API documentation and examples →

Frequently asked questions

Who is this for?: For developers who have the need for image placeholders, but don't want to implement that themselves. Adding 3rd party libraries, and maintaining their implementation, in addition to upgrades and all forms of variation and error handling can be time consuming. Sometimes it's way more convenient to just call an external API endpoint to do all of that work.
Who is this NOT for?: Well, the opposite to the previous answer. Many devs prefer to own the code, even if its technically a 3rd party library. They themselves decide on when to upgrade, how to maintain it, and without worrying about the risk of external API endpoints breaking.