Creating an avatar montage for quick visual checking This approach can help if you have a very large set of user avatar images, but it doesn’t help us with the qualitative task of checking that they look ‘okay’ with the new circular crop. You can dump this list into Excel and generate a histogram, or just use it to highlight how many values are outside of ‘squarish’. The output will be a list of the image propotions as double values (e.g. In the above example we search the avatar_images directory, include all files, but filter out images we’ve generated in the past (prefixed with thumb_). ImageMagick has a set of handy command-line tools to help us with this:įind avatar_images \ -type f \ -not -name "thumb_*" \ -exec identify \ -format %w \ %h This is useful alongside the assumption that squarer images are more likely to crop without losing the subject in the image. The first thing we can do is calculate the distribution of image proportions. In this case I believe option 2 gives the best outcome – no excess whitespace and wholly-filled circles, but our users didn’t have any of this in mind when they uploaded their images in the dim and distant past so we need to get an idea of how these changes will affect their existing images. Fit the entire image within the square, and pad the excess.Crop the top/bottom or left/right of the longest side to make the image square.Because we can easily create circular masks with CSS, we just need create square versions of the images, and we have a few options: We want to take this opportunity to generate thumbnails at these sizes (and x2 for Retina screens) so we can keep file sizes small and our site as fast as possible. Our new UI requires circular images at three different sizes (icon, default and large avatars). Because we’re sensible, we retain the originally uploaded image and generate a thumbnail to be used on the site which maintains the proportions but constrains the longest side to 100 pixels. Let’s imagine our current approach to user avatars is to accept any size and shape image. You know it’ll look great for new users, but we don’t want to leave the existing ones behind. You want to change from a boring 4x3 photo to a cool and hip circular crop. Picture the scene: you have a few thousand users with avatars on your site. Migrating user avatars to circular crops, with ImageMagickĮdit (): Updated to replace compose_opacity with DstIn to preserve source image transparency.
0 kommentar(er)
