Placeholder

https://fakeql.com/placeholder/500/200/e7d621158ec24ef6dsf3sf43459.svg

The first number 500 is the width of the image. The second number 200 is the height and than you have a hash that is the seed for the generated image.

The size of the image is displayed in the middle of the image in small letters. This is important to test source mappings in responsive images as it always tells you which of the images the browser has chosen to render.

Corner indicators are placed on each of the four corners so you always know if a placeholder is fully visible or not. This helps a lot for testing CSS based image placement and scaling rules.

You can control the complexity of the image with the length of the "hash". Here's an example of a much simpler image:

https://fakeql.com/placeholder/500/200/e7d62g6.svg

Images are generated with a procedural algorithm. They are not random. The same hash with the same width and height will always return the same image. This is very useful as the images you are mocking will not be random, either.

As with the FakeQL API, our placeholders have a fragile version, as well. This is very useful to test edge cases or loading behaviour, for example if you lazy load an image.

https://fakeql.com/fragileplaceholder/500/200/e7d62g6.svg

You can easily generate random placeolder images in your sample data with Blowson. There are many ways, one is to use the fake bitcoin address generator of Faker.js:

{
    "images": [
        {
            "id": 1,
            "image": "https://fakeql.com/placeholder/500/200/{{fake.finance.bitcoinAddress|lower}}.svg"
        },
        {
            "id": 10,
            "image": "https://fakeql.com/placeholder/500/200/{{fake.finance.bitcoinAddress|lower}}.svg"
        }
    ]
}
                        

I quite like this one as it generates different lengths, so you have some variability in the complexity of the placeholder image.

If you have image upload functionality in your app, you can use FakeQL to test those uploads in your frontend before a backend is ready. To make that possible, we made an upload endpoint that returns a placeholder image with the same size as the uploaded image. Here's how that works with the excellent Uppy library:

import Uppy from '@uppy/core';
import XHRUpload from '@uppy/xhr-upload';

// Add uppy configuration here

uppy.use(XHRUpload, {
	endpoint: 'https://fakeql.com/upload',
});

// Render uppy component here
                        

https://fakeql.com/placeholder/500/200/jdhf5d6s5afdhgsaf6d8.svg

https://fakeql.com/placeholder/500/200/jdsfg75dsfadfzasf6r3hihsjdgafer6r74653ghjft7342.svg

https://fakeql.com/placeholder/400/400/jhdfs785qrghjeqw76.svg