Search form

Better image scaling/cropping

It's somewhat complex knowing how best to scale and crop images when you have many thumbnail sizes, and the images in question range wildly in size and dimension, from square papers, to long, thin ribbons.

I've worked on this previously, but Marisa and I still weren't happy with how thumbnails were being cropped for some images, so that you couldn't see the full image very well. For example, check out this screenshot of the front page from earlier today: http://i.imgur.com/EZXD7.jpg

Anyway, I spent quite a lot of time today improving the system (which I wanted to do before our new designers came on board): we now have nearly fifty image styles, and several switching mechanisms that scale and crop images differently depending on image dimensions and ratios. Here's the end result for that same front page screenshot: http://i.imgur.com/StvhD.jpg

Now you can see what that word art actually says!

Because of CDN and browser caching, you won't see the changes right away (the front page might still look like that old screenshot), but over the next few days you should see a difference...

Hi, Jordan - I've noticed as I upload assets that sometimes the small preview looks good, but then the large preview is squashed. Check ribbons here - this is actually a 12 inch ribbon - and this 5x7 card here - this card should look like this cards preview. Also, the watermark only shows on various assets, not all of them? It's strange because sometimes everything is fine, other times it looks like the above mentioned. Hmm. Is it something I'm doing?

@Brooke: there was some issue with the scaling for a while, and my guess is that you are seeing old images that are cached in your browser. Here's how the 5x7 card looks for me, and here's the ribbon (which is cropped to show detail).

If those aren't the images you're seeing, you can clear your browser cache to see the current images. If you're using Chrome, there's a guide to doing that here. (Select the "cache" option only and clear "from the beginning of time"):