At Cremalab we recently worked on an application which involved a wide variety of user uploaded profile photos. These photos acted as a major aspect of the design and looked great in the inital comps, but if you’ve worked on projects with this kind of functionality, you know users can quickly clutter your pixel perfect color balanced design. Diversity of image size, quality, color profile, aspect ratio, and file size will all impact the final product.
Not all profile photos will look good
So, out comes facehold.it – a product designed to help you expect the unexpected from user uploaded photos. By borrowing random facebook profile photos, we’re able to accurately display what a final product will look like after users have uploaded a wider range of photos.
Facehold.it is open to the public and is easy to implement. If you’re a designer looking for profile images to include in your comps, you can visit http://facehold.it/50 to generate 50 random ones and copy them out.
Sample Output: (Refresh page for new photos)
Developers can use facehold.it within their HTML or CSS by calling the /pic route from the web service –
<img src='http://facehold.it/pic' />. Since the browser automatically cache’s resources coming from the same url, you can append query strings to generate new images –
<img src='http://facehold.it/pic?q=1' />,
<img src='http://facehold.it/pic?q=2' />.
At the time of writing, facehold.it has served 50,0000 images. Happy Faceholding!