Pages

Monday, December 10, 2012

Boxresizer FTW!

You may have noticed that I recently added a set of social icons to the sidebar of the ol' blog here. Don't they just look pretty there in the page? Yeah, I thought so too.

I created the icons at a resolution of 128px by 128px, just to have some extra image to work with; I figured I may end up using the icons in varied contexts. I also knew I'd be scaling-down the icons when I embedded them in the blog page layout.

I assumed that these days pretty much all modern browsers take care of smoothing out scaled images just fine, but turns out I was wrong. It's better than it used to be, but it still doesn't compare to a resample that you'd expect. I embedded the images in the page, manually setting their dimensions, and I was seeing enough jaggies to bug me.

I didn't want to have to create new, resized versions of the icons every place I used them, so I started looking for a website that would do real-time, url-based image scaling. I knew there were sites/services like that out there, but when I started my hunt they were actually harder to find than I expected.

Thankfully, I eventually stumbled upon Boxresizer. It was exactly what I was looking for: you call a particular URL including your source image, resulting size, and boom, they output a nice, smoothly scaled version of the image!
Boxresizer makes Octocat happy...
...because it makes him super sneaky small ninja Octocat!

If you want to see sample URLs of how Boxresizer works, just hit up their site or copy the image location of Octocat here or the other images in the sidebar. Both Firefox and Chrome have an option to copy the URL when you right-click on an image.

PROTIP: Don't forget, though, that when you're passing your image URLs to the Boxresizer URL, it needs to be URL encoded. You can't just pass the image path as is. Thankfully, there are tons of online tools to URL encode a string, like this one.