Making Images Smarter

Dynamic Image Manipulation Infrastructure for WordPress

v.gd/smarterimages

Russell Heimlich
(like the maneuver)

Lead Developer at Spirited Media

(pictures of happy Spirited Media employees)

The Problem

Why do properly sized images matter?

Serving the right-sized image for a given screen:

Decreases bandwidth
Decreases download time
Less CPU power
Faster page load times
Happier Readers

The Solution

Commercial Services?

Free Services?

Image CDN (formerly Photon)

Open Source?

Tachyon

Tachyon@Edge

(Our fork)

Original

Transformed

?resize=300,600&flop=1&flip=1&negative=1

Unlimited srcset options

<img src="image.jpg?resize=942,530"
  sizes="(max-width: 584px) 100vw, (min-width: 1025px) 640px, 92vw"
  srcset="
    image.jpg?resize=308,173 308w,
    image.jpg?resize=616,346 616w,
    image.jpg?resize=924,519 924w,
    image.jpg?resize=320,180 320w,
    image.jpg?resize=640,360 640w,
    image.jpg?resize=960,540 960w,
    image.jpg?resize=480,270 480w,
    image.jpg?resize=800,450 800w,
    image.jpg?resize=1024,576 1024w"
>