Theme:
Tidbit

Easy profile avatars

Guy Waldman's ProfileGuy Waldman
July 11, 2024
Time to read:
3 minutes
Whenever I need to generate mocks of profile avatars, Unsplash is a great resource.
The only issue with using images of people's faces from there, is that often it's not straightforward to crop/position the image such that the face is centered and it has consistent scale with the other images.
A few years ago I learned that the Unsplash API has a few useful parameters that can be used to adjust the image. They're all documented here:
“
  • w, h: for adjusting the width and height of a photo
  • crop: for applying cropping to the photo
  • fm: for converting image format
  • auto=format: for automatically choosing the optimal image format depending on user browser
  • q: for changing the compression quality when using lossy file formats
  • fit: for changing the fit of the image within the specified dimensions
  • dpr: for adjusting the device pixel ratio of the image
—
https://unsplash.com/documentation#supported-parameters
With the faces cropping feature documented here:
So, assume you found a photo like this one that you want to use as one of your mock profile avatars.
The image as it appears normally on Unsplash
The image as it appears normally on Unsplash
We can get the image with the public API (no need for an Unsplash developer account and API credentials) by using the image URL (you can extract it by right-clicking on the image and selecting "Copy image address" in the context menu).
So the URL would be something like this: https://images.unsplash.com/photo-1544005313-94ddf0286df2 with appended query parameters like ?q=80&auto=format&fit=crop&h=1000
If we just crop the image using fit=crop with a width of 400px and a height of 400px, we get this:
The image with normal crop applied
 The image with normal crop applied
As you can see, the image is not cropped to the face of the person.
Now let's use the crop parameter with the value faces to crop the image to the face of the person.
We need to specify the width and height of the image (for example w=400&h=400), fit=crop and most importantly crop=faces.
The URL would now look like this: https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&crop=faces&w=400&h=400
The image with crop=faces applied
 The image with crop=faces applied