Front-end Controlled Dynamic Thumbnails

Instead of generating a thumbnail for each image, we've simply added a couple of CSS classes to each img tag. speeder.js reads these classes, generates the properly sized and optimized thumbnail, and loads to a CDN for delivery - no coding or thumbnail generation!

And each thumbnail can be customized by a simple CSS change - this let's us handle taller vs wider images, zoom vs crop vs pad thumbnail creation, and to easily change dimensions for design tweaks.

And we're down to under 150kb download size!

Page Load Speed

Mouse-over each image to see the CSS classes used. They are described in the CSS classes documentation.