Build something for responsive images

[Nicolas Gryman]

Like cache busting and concatenation, we could propose a built-in system to resize images on the fly, based on the url:

• [e-mail]: would serve retina images.
• image-400x300.jpg: would serve a resized version.

[Benjamin Tan]

I don't this will be very feasible as most of the node modules I found require ImageMagick or something similar.

[Nicolas Gryman]

• canvas could do the job I think.
  Also we could directly use something like rsz.
• url could be something like http://www.sencha.com/learn/how-to-use-src-sencha-io/
• W3C draft on responsive images: http://usecases.responsiveimages.org.
• Serve WebP when possible?

[Sean Caetano Martin]

This could be something really cool to do with node-canvas or a similar project. Rsz is really cool but it has a dependency on cairo, which would be hard for some cloud hosting services like Heroku and Joyent.

What kind of feature set are we looking at for this?

[Nicolas Gryman]

@xonecas Well, we should discuss about what we want to do exactly.

First, I was thinking of a simple on-the-fly resizing feature based on urlparameters, like Sencha does.
We should support basic resizing:

• image-320x480.jpg would serve an image of 320px width and 480px height.
• image-320.jpg would serve an image of 320px width, keeping aspect ratio.

Then we could support more advanced features like rotation, border radius? etc...

We could also do something usefull about Art direction in order to serve smarter responsive images.
For this particular feature, I was thinking that the url could contain a custom center for the image (a percentage).
We would then crop and/or resize according to this center.

Finally we could support on-the-fly image optimization, serve webp in place of jpg when possible (UA sniffing?).

[Sean Caetano Martin]

I really like the on the fly resizing and supporting art direction via a custom center. +1 to focus on those first.

On the fly optimization is good, but I'm not really sure UA sniffing is the best way to do so. On the client feature detection can be used and based on that we let the user specify a desired format. Either by file extension or via a declarative get attribute. What do you think?

[Nicolas Gryman]

Yep you are right about webp.
We could explain that we provide a dynamic jpg to webp conversion if the user asks for it. He could use something like WebPJ to feature detect it and change the extension in the url.
Perhaps Modernizr will also add this feature detection :)

We could focus on the resizing feature as it's a quite simple yet powerful feature.

Art direction is something very interesting. We will need think about how to handle every case smartly.
In most cases, only crop will be needed, in order to focus on a certain area of the image.
But what happen if this area is bigger that small screen sizes? It gets coped...
So perhaps we should define an focus area (a rectangle) instead of a custom center (a point) that will get resized when the screen size is not big enough? Or support both?

[Sean Caetano Martin]

I think you're on to something, we can provide the optimization step once resizing and art direction are implemented, since from the use case perceptive, we will already be dealing with fairly optimized pictures and these are the key features that the user expects.

I like the focus area, my original thinking about the implementation of the custom center would be to create the focus area from the center point.

lets say the user gives us a width and a height and a center point. we can create a focus area by splitting the height and width in half and putting the crossing over the custom center. Essentially we build a bounding box around the custom center based on the user's requested dimensions.

I think I'll be able to have some time this weekend to code something up.

[Nicolas Gryman]

The focus area syntax could be something like cx-cy[-w-h].
cx and cy would be the center.
w and h would be the dimensions. They could be optional, so only crop is applied.

[Nicolas Gryman]

ping @xonecas.

[Sean Caetano Martin]

Sorry guys, I changed jobs and house. Starting next week I'll have some time again and I'll crank this out.

[Nicolas Gryman]

No problem.
I can come with something and you could give some help if you have time :)