Intro to Thumbor

beachape.com/thumbor-intro

Timeline

1. Where and why should we resize images?
2. Beyond just resizing
3. How images were handled
4. How to ideally handle images
5. Additional criteria
6. Thumbor
7. Simple resizing
8. Fit-in
9. Beyond
10. Resources

Where and why

should we resize images?

Where?

Anywhere you care about eventually showing images to a client device, you should care about serving correctly sized images.

• Web page (incl. mail)
• Native devices
• (Eventually) Public facing APIs

Why?

• Better end user experience (download only what they need)
  • Why download a 500px x 500px image if you're going to show it at 10x10?
• Save bandwidth

Beyond resizing

• Why stop at resizing?
• Brightening
• Sharpening
• Contrast
• Noise

How images were handled:

Doing nothing

• Served as-is, resize in the client (CSS, etc).

<img
  src="10000000x1000000-image-of-the-universe.png"
   alt="I don't care about my users"
   height="42"
   width="42"
/>

How images were handled:

Manual resizing

• Expensive
• Not scalable
• Slow

How images were handled:

Automated processing

Image from 99 designs

How images were handled:

Automated processing

• Better, but now you have more logic in your app
• Usually constrains you to a few set sizes; what happens when you want more? what about sizes in between?

How to ideally handle images

• Dynamically, on-demand
  • Saves computing resources
  • Flexible
• Outside of our app (reduce code complexity)

Criteria

• Free (because we're cheap)
• Supports common formats for web:
  • JPEG
  • GIF
  • PNG
• Easily configurable
• Low barrier to hacking
• Minimally secure from DoS attacks
• Fast
• Scalable
• Community-tested

There were other choices, but we chose

What we liked about Thumbor

• Community is huge
  • 2500+ stars
  • Searching for 'thumbor' on Twitter gets you more tweets with images using Thumbor than tweets about Thumbor (!)
• Very customisable
  • Swappable image engines, storage, cache, etc

Thumbor architecture

Original image

Future Queen

Simple resizing

500x430/$origUrl

Fit -in

fit-in/500x430/$origUrl

Greyscale (a filter !)

• grayscale()

• Note we are resizing and adding a filter

Multiple Filters

• blur(10):grayscale()

Security

• Thumbor server can have a shared secret with app servers so that URLs generated by app servers can be signed and not tampered with

# if you enable this, the unencryted URL will be available
# to users.
# IT IS VERY ADVISED TO SET THIS TO False TO STOP OVERLOADING
# OF THE SERVER FROM MALICIOUS USERS
ALLOW_UNSAFE_URL = True

Conclusion

• Thumbor is great. Use it. Hack it. Enjoy it.

Resources

• Thumbor Official site
• Thumbor Github repo
• Thumbor libraries list

Questions?