Introduction
Placeholder images and fake avatars are something that almost every web developer has likely used in their projects at some point.
In my projects, I like to use placeholder images when I'm building a website and haven't got the correct images yet from the designer or client. This gives me the chance to visualise where the images would fit into a page without having to slow down progress waiting for them.
Sometimes, I also work on projects where I want to provide a default image profile picture for users who haven't uploaded their own yet. In fact, you've probably noticed this yourself on sites such as GitHub, Reddit and other social media sites.
In this article, I've compiled a list of 13 different placeholder image and profile picture websites/APIs that you can use in your own projects. I've also provided an example image and a link for each of the services. Some of them provide extra functionality that you can use to change things like the colours, styles and size using query parameters.
Before you use any of these services, please make sure to check the terms and conditions (if they exist) to make sure that you're allowed to use their images in your projects.
So, in no particular order, let's check out the services:
1. gravatar.com
gravatar.com is a profile picture service that you can use to get an image based on a user's public email address. This service is a little bit more hands-on in comparison to some of the other services. You'll need to pass an MD5 hash of the user's email in the URL to fetch their picture. There are some examples in the documentation for the service that show how you can achieve this in JavaScript and PHP.
Website: https://en.gravatar.com
Example HTML and image:
1<img src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250">
2. pravatar.cc
pravatar.cc is a service that you can use to get placeholder profile pictures. You can fetch random images, or you can add a unique identifier (in the example below, we've used my email address) to get the same image on each request. It's perfect for finding avatar placeholders for your website designs.
Website: https://pravatar.cc
Example HTML and image:
1<img src="https://i.pravatar.cc/250?u=mail@ashallendesign.co.uk">
3. ui-avatars.com
ui-avatars.com is a service that you can use to get placeholder profile pictures. This service is slightly different to the other services, because it returns the initials of the user rather than a picture of a human, character or object.
If you're using Laravel Jetstream in your projects, you'll might have already come across this. It uses this service to fetch a default profile picture if a user hasn't already uploaded one. You can check the code where it's used here.
Website: https://ui-avatars.com
Example HTML and image:
1<img src="https://eu.ui-avatars.com/api/?name=John+Doe&size=250">
4. avatar-placeholder.iran.liara.run
avatar-placeholder.iran.liara.run is a service that you can use for generating profile pictures. This service offers multiple API endpoints for getting different avatars based on things like gender, jobs, names, and unique IDs, so I'd definitely recommend checking out the documentation on their website.
Website: https://avatar-placeholder.iran.liara.run
Example HTML and image:
1<img src="https://avatar.iran.liara.run/public/boy?username=Ash">
5. dicebear.com
dicebear.com is a service that you can use for generating many different types of profile pictures. This service offers a lot of endpoints and configuration options that you can use to completely change the avatars that are fetched. This is one that I would definitely recommend checking out.
Website: https://dicebear.com
Example HTML and image:
1<img src="https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=mail@ashallendesign.co.uk">
6. robohash.org
robohash.org is a service that you can use to generate robot profile picture placeholders.
Website: https://robohash.org/
Example HTML and image:
1<img src="https://robohash.org/mail@ashallendesign.co.uk">
7. placeholder.com
placeholder.com is a website that you can use to generate placeholder images. I find this service particularly useful because it can be used to return images that show the pictures dimensions. So, it can be really handy when you're builing a website and want a visual reminder of what size image needs to replace the placeholder before releasing.
Website: https://placeholder.com
Example HTML and image:
1<img src="https://via.placeholder.com/250">
8. baconmockup.com
baconmockup.com is a simple placeholder image service that provides images of bacon.
Website: https://baconmockup.com
Example HTML and image:
1<img src="https://baconmockup.com/250/250/">
9. dummyimage.com
dummyimage.com is a placeholder image service that provides the ability to change the background and foreground colours of the image, to change the size of the image, and even change the text within the image.
Website: https://dummyimage.com
Example HTML and image:
1<img src="https://dummyimage.com/300.png/09f/fff&text=Ash+Allen">
10. placekitten.com
placekitten.com is a simple service that can be used to fetched pictures of kittens that can be used as placeholder images.
Website: https://placekitten.com
Example HTML and image:
1<img src="https://placekitten.com/250/250">
11. placebear.com
placebear.com is a simple website that can be used to fetch images of bears that can be used as placeholders in your projects.
Website: https://placebear.com
Example HTML and image:
1<img src="https://placebear.com/250/250">
12. loremflickr.com
loremflickr.com is a service that can be used to get placeholder images from Flickr that use the Creative Commons license. loremflickr.com allows you to pass locations and keywords in the URL so you can get an image that makes sense for your site. For example, if you're building a website for a dog walking business, you can fetch an image of a dog rather than a completely unrelated image. It also provides the ability to specify the size of the image.
Website: https://loremflickr.com
Example HTML and image:
1<img src="https://loremflickr.com/250/250/dog">
13. placebeard.it
placebear.it is a placeholder image service that you can use to fetch images of people with bears to use in your websites.
Website: https://placebeard.it
Example HTML and image:
1<img src="https://placebeard.it/250/250">
Conclusion
This post should have shown you 13 new services that you can use to add placeholder images and profile pictures to your website. Maybe one of these will come in handy in the next project you work on?
If this post helped you out, I'd love to hear about it. Likewise, if you have any feedback to improve this post, I'd also love to hear that too.
If you're interested in getting updated each time I publish a new post, feel free to sign up for my newsletter below.
Keep on building awesome stuff! 🚀