Quick Start

speeder.js is a Javascript drop-in that compresses and optimizes images to make your site load faster. It'll improve the user experience for both desktop and mobile users, and can also save you some money since it boosts your images to a free built-in CDN.

It works by compressing and optimizing images using the speeder.io API and caching the result to a CDN. It can also be used to dynamically generate thumbnails with CSS.

Start by logging into the speeder.io dashboard, then:

  • Find the Domains section.
  • If you haven't already, add the domain of the site you want optimized, for example your-site.com.
  • Next to the listed domain you want optimized, click the red code in the speeder.js column and it will be selected automatically - use control-c or cmd-c to copy it.
  • Open your text or site editor to edit the source of the pages you want optimized, and paste the code just under the opening head tag of each page.
  • Refresh the browser twice and done.

Didn't work? Questions? We can help.

Using CSS Classes

By default speeder.js optimizes the images on a page and caches them to the CDN for delivery. But it can also be used to dynamically generate thumbnails, and resize and crop images based on front-end design requirements.

Adding special CSS classes to the img tags on your page instructs speeder.js to perform these operations before caching to the CDN.

CSS classnames with a spdr-* prefixed are recognized by speeder.js and should have the following naming format:

spdr-xyz-geo

The xyz part is the name of the operation to perform - three are supported:

  • s2tn - scale to thumbnail
  • c2tn - crop to thumbnail
  • p2tn - pad to thumbnail

The geo part defines the sizes for the operation. It has the following format:

{X-SIZE}x{Y-SIZE}x{GRAVITY}

Values can be optional and affect processing behavior, as described below. However both x delimiters and at least one size must be present.

The X-SIZE and Y-SIZE parameters specify the width and height, in pixels, of the resulting image. Usually one or the other is omitted, in which case the speeder.io API will automatically calculate it (thus maintaining the proportions of the original image).

The {GRAVITY} parameter changes the center-point of the operation that's performed. It's value is a direction:

Value Meaning
n north (top-center)
ne northeast (top-right)
e east (right)
se southeast (bottom-right)
s south (bottom)
sw southwest (bottom-left)
w west (left)
nw norhtwest (top-left)
c center

If gravity is omitted it'll default to c (center).

The result of each operation is an optimized and compressed thumbnail image that's boosted to the CDN for delivery.

Examples

The difference between the three operations can be subtle - c2tn will remove parts of the image that don't fit, whereas p2tn will add transparent (or white for JPEG) padding, for example.

Similarly, the effect of gravity can be minimal unless the requested proportion of the output is significantly different than that of the original.

Multiple CSS classes can also be set, each being executed in the order specified. It's best to experiment and don't forget that individual img tags can get their own CSS classes to perfect sizing on an individual image basis.

Here are some examples to get started with.

Classname Description
spdr-s2tn-x150xne Scale the image to a height of 150px, leaning towards the upper-right corner. Proportions are maintained (width is calculated).
spdr-c2tn-200xxsw Crop the image to a width of 200px, leaning towards the lower-left corner. Proportions are maintained (height is calculated).
spdr-p2tn-200x150 Pad the image to a width/height of 200px/150px, from the center. Proportions are not maintained.
FAQ
Will the original images on my server be changed?
No. Images are read-only from your server, optimized in the cloud, and cached to our CDN without changing your server at all.
Will speeder.js work with HTTPS sites?
Yes! speeder.js will automatically detect if a site is using HTTPS and serve the images over HTTPS.
What CDN does speeder.js use?
Currently it uses KeyCDN for the free version of speeder.js. Paid customers can use any CDN or internal infrastructure.
What if I don't like the service?
Just remove the speeder.js code snippet and your site is instantly back the way it was - but please tell us why!
I've installed speeder.js and refreshed - but it's slower!
Refresh again - it takes one browser refresh for the magic to happen. Or contact us and we'll take a look.
speeder.js is installed and the images load faster - but their dimensions are the same!
By default speeder.js compresses your images and caches them on the CDN. To dynamically generate thumbnails and resize images you can add CSS classes.
Which browsers is speeder.js compatible with?
speeder.js is compatible with all modern desktop, laptop and mobile browsers. Let us know if you run into a broken browser.
How does caching work and how do I clear it?
Caching is set for 1 month and can be cleared by changing the second value on the second line of the speeder.js snippet.
What if I want to use speeder.js on an intranet?
Currently speeder.js is available for public sites only - contact us for integration options.
What will the next version offer?
The paid version will include bundling ops using custom URLs, custom cache lengths and control, advanced image control, CSS & Javascript minify, asset pipelines, PageSpeed optimization and option for loss-less compression.

Follow-us or drop us a line to be notified when the next version is announced.

Questions? Feature requests? Contact us!