Tidbit
Easy profile avatars
Guy WaldmanJuly 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 photocrop: for applying cropping to the photofm: for converting image formatauto=format: for automatically choosing the optimal image format depending on user browserq: for changing the compression quality when using lossy file formatsfit: for changing the fit of the image within the specified dimensionsdpr: for adjusting the device pixel ratio of the image
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.
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:
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=1000If we just crop the image using
fit=crop with a width of 400px and a height of 400px, we get this:
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