When the API returns an image

I see more and more Image-Response GET APIs. With this term I mean: the API is called with a GET URL, and the response is a (JPG/PNG/GIF/WEBP/SVG) image, either directly or after a redirect. So the API can be used through a simple <img src="[IMAGE GENERATING URL"> HTML tag. Let’s call these IMGSRCAPI‘s.

One of the oldest examples is Gravatar, used by WordPress to show an icon/avatar for each person that writes/comments on blogs. Every imaginable email address has auto;atically a Gravatar profile pic, but by default it is . Only when you can log in and verify your email, you can change your profile pic to whatever you want.

But, as I said, I see more and more of them, and I wanted to catalog them. I see 2 big categories: static vs dynamic IMGSRCAPIs.

1. Static (deterministic) IMG SRC API

This means: a certain URL (with specific query parameters) will ALWAYS give back the same image. Let me give some examples:

1.a. Static placeholder pictures

These services are used to quickly generate random images of specific sizes to use in web design.

DUMMYIMAGE: https://dummyimage.com/500×200/00066f/FFF.png&text=dummyimage.com

FAKEIMAGE.PL: https://fakeimg.pl/500×200/?text=fakeimg.pl&font=lobster

SATYR.IO: https://satyr.io/500×200/orange?delay=3g – simulates 3G network delay

PLACEKITTEN: https://placekitten.com/500/200, and similarly: placebear.com, fillmurray.com

1.b. Image (scannable) representation of data

TEC-IT.COM: static linear barcode (Code128)

() TEC-IT.COM: Static vCard (address book) QR Code

A handy service like qrcode-monkey.com does not qualify as an IMGSRCAPI because it rather works like a regular API: with a JSON request body and a JSON response. You can’t just use it in a <img> tag.

Facebook also has scannable Messenger codes, but again, these cannot be created with a simple URL, so no IMGSRCAPI

1.c. Static avatars

These are service to turn a string into an image, in such a way that it’s easier to recognize them. This can be used for people, or for projects.

ROBOHASH: https://robohash.org/pforret

DICEBEAR AVATARS: https://avatars.dicebear.com/v2/male/pforret.svg

1.d. Image modification API

There are actually a lot of these image-modification (mostly paid) SaaS services. The request URL includes the URL of an input image, and the response is, since it is a IMGSRCAPI, also an image. The service can compress, resize, crop intelligently, change colours, …

https://imageoptim.com/ (paid service)

Some examples of these services are:

2. Dynamic IMG SRC API

This means that 2 calls with the exact same URL might give back a different image. This could be because it’s random, or because of external data that has changed.

2.a. Dynamic placeholder pictures

Like their cousins in 1.a., these services give back an image of a certain size, but it’s a random image, changes upon each call.

LOREM PICSUM: https://picsum.photos/500/200

PLACEBEARD: https://placebeard.it/g/500/200

PLACEIMG: https://placeimg.com/500/200/arch

UNSPLASH: https://source.unsplash.com/500×200/?sunset

2.b. Profile image API

The best example is obviously Gravatar.

GRAVATAR: https://www.gravatar.com/avatar/</a>
and some alternatives:

Image a IMGAPI service , that would let you do the following:

This would be rather easy to create and super handy to use. I don’t know why I haven’t found any service like this.

I know that Google used to have a IMGSRCAPI service for profile pics (_https://profiles.google.com/…/profile/_) but this has been discontinued.

2.c. Screenshot and preview IMG SRC API

Here the service will take a text or a URL and convert this into an image.

Social Preview images via placid.app

screenshot via screengrab.io

2.d. External status IMG SRC API

So this is an image whose content can change based on external information. For instance, in the developer’s world most badges and shields, often shown on Github README pages, fall under this group.

Auto-updated shields via https://shields.io/

Repository status via https://www.repostatus.org/

Also website monitoring services can provide an image API:

Freshping badge

also via https://shields.io/category/monitoring

And how about weather services?

via https://www.theweather.com/widget/

tomorrow’s weather in Belgium via https://www.meteo.be

Latest weather via wunderground.com

I probably forgot some types of IMGSRCAPI services, feel free to let me know in the comments, and I will add them!

Hat tips to johanbostrom.se * sharptools.io

💬 webdev 🏷 api 🏷 badge 🏷 image 🏷 placeholder 🏷 saas 🏷 screengrab 🏷 screenshot 🏷 shield 🏷 web