A huge continued thanks to imgix for sponsoring this week's Bites! imgix is real-time image resizing as a service. They allows us to resize, crop, and process images on the fly, simply by changing their URLs. Let's take a look.

By now we've learned all about how imgix has client libraries for all sorts of languages and environments, and how we might not even need one depending on our use case. That's part of what makes imgix so awesome, we can play around with size, crops, effects, even draw text or watermarks on images just by changing some URL parameters. They use our existing image storage locations as a source (supports public web folders, S3 buckets, and Web Proxies). We can configure multiple image sources, set caching times, and set custom domains on their site. Best of all, response times for images average around 70ms!

imgix is packed with features, here's a handy one: Cropping images to a circle. It may sound trivial, but doing this processing on the server side, and retrieving the avatar as a pre-flattened image in our UI can be a huge performance win.

GET /avatars/123.jpg?mask=ellipse&fit=crop&h=200&w=200

If we combine this trick with what we learned last week about cropping images around faces, we have a pretty great user avatar system with nothing but a few query string parameters. Not too shabby!

One last fun (and very useful) imgix feature before we go: text. Yep, we can easily add completely customized text to any image (with full emoji support of course! ) Let's try it out:

GET /hairforce1.jpg?fit=crop
 &w=204
 &h=142
 &txt=WATCH+THE+HAIR+%F0%9F%92%87
 &txtfont=Impact
 &txtclr=fff
 &txtline=2
 &txtlineclr=000
 &txtfit=max
 &txtsize=24
 &txtalign=center%2Cbottom
 &txtpad=6

Stop maintaining your frankenstein ImageMagick setup and let imgix handle it. It's free to get started. Use the link littlebitesofcocoa.com/imgix so they know you heard about them here.