PlaceKeanu.com — A slightly more breathtaking placeholder service
Tags: showdev, webdev, productivity, webapp
Published: 2019-07-10 21:28:12

---
title: PlaceKeanu.com — A slightly more breathtaking placeholder service
published: true
description: For when you need a little more Keanu in your life (always)
tags: showdev, webdev, productivity, webapp
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3018e1vx4125b3bphx1t.jpg
---

You know those times when you work on a web dev project, and need an image in 300x250px real quick?

Or maybe you need a placeholder for your avatar photos, while the project is still in development.

While there are a bunch of amazing alternatives already ([picsum.photos](https://picsum.photos), [placeholder.com](https://placeholder.com), and [placekitten.com](https://placekitten.com), to name a few) I had a feeling something was missing... 🤔

This weekend I put together something to make everyone's web dev process a bit more *breathtaking*. Some might've seen it [featured on ProductHunt](https://www.producthunt.com/posts/placekeanu) yesterday, but since everyone seemed to love it so much there, I wanted to share it with you guys as well. ❤️

---

[PlaceKeanu.com](https://placekeanu.com) is a placeholder image service based on—you guessed it—*Keanu Reeves*!

![Keanu Reeves wink](https://media.giphy.com/media/NUwoRZzHc2Bws/giphy.gif)

I mean just look at him. How could this not be a thing already?

## So, how do you use this lifechanging (ymmv) service?

Simply paste a link in this format, wherever you need to Keanu it up:

`https://placekeanu.com/[width]/[height]*/[options]*`
(* optional)

If you don't pass in a height, the size will be a square based on the `width`.

## Available [options]
* Young Keanus only: `y`
* Grayscale Keanus: `g`

## Here are some examples

* Young Keanu: https://placekeanu.com/500/300/y
* Square + Grayscale: https://placekeanu.com/250/g
* Young + Grayscale: https://placekeanu.com/300/550/yg

So if you want to use a Keanu on your website, you could for instance include him with an `<img>`, like this:

`<img src="https://placekeanu.com/350/500" alt="">`

Not bad, huh?

![Keanu Reeves thumbs up](https://media.giphy.com/media/j5QcmXoFWl4Q0/giphy.gif)

## Woot! How did you build this fine piece of art?
While most placeholder image services dynamically create images for every request, I found a way to achieve the same result using SVGs.

Basically, when you visit a page, say `/200/300`, an SVG with `width="200"` and `height="300"` is returned, together with a random image of Keanu. All images are coded in Base64 to get it working properly.

There are some other magic involved as well, like automatic centering and choice of a vertical or horizontal Keanu, based on your request, so that he won't get cut off as often.

The source code for the project is of course available on GitHub, so please [check it out here](https://github.com/alexandersandberg/placekeanu.com)! 🙂

---

I would love to hear your thoughts about this, and any feature requests you might have. Post a comment below, or send me a tweet on Twitter ([@alexandberg](https://twitter.com/alexandberg))!

And let me know if you would like a more in-depth explanation of how I built this—using Express together with Netlify Functions—and I'll write something up!

But for now, please enjoy the lovely and wholesome Keanu! ❤️

![Keanu Reeves blow kiss](https://media.giphy.com/media/QAsBwSjx9zVKoGp9nr/giphy.gif)

---

Oh, and btw, I just created [a listing](https://dev.to/listings/forhire/looking-for-company-to-work-with-on-master-s-thesis-project-in-front-end-ux-and-or-accessibility-1d4l) with a very interesting (*and for me, lifechanging*) opportunity. It would mean the world to me if you shared my tweet about it. ☺️

{% twitter 1149442625113665536 %}