Responsive Images Backed Server-side.
npm install ribs
|3||downloads in the last week|
|6||downloads in the last month|
|Version||0.0.1 last updated 6 days ago|
|Keywords||responsive, image, responsive images, art direction, resize, crop, optimize, canvas|
|Dependencies||lodash, async, nan|
Responsive Images Baked Server-side, yummy!
Photo borrowed from talented Kevin Racape.
Responsive images is the next big challenge.
In the wild, this is not as much used as it should be. AFAIK this is probably because it asks a certain amount of time to choose and apply a technique and it involves too much tools in the process. The fact is, developpers don't take enough time for this and tend to neglect this part of an application.
I believe in the on-the-fly way of thinking that the Web offers. So, for this problem, just ask the image you want, and you will receive it already processed, end of story. This also have to garanty that you:
- do not load more than your are going to show.
- do not scale the image in CSS.
- do not handle each image sizes manually.
- do simply your workflow.
From RESS slides.
This is pretty much what Sencha.io Src offers. It needs to be available in the wild, with a good level of customization.
It must and it will
- Provide on-the-fly resized / croped and optimized images (no build phase required).
- Fit web app and also native apps needs.
- Proxy existing servers.
- Be super easy to deploy and use.
- Propose different points of customization to be as interop as it can be.
- Support art direction, automatically perhaps?.
RIBS will have 3 layers:
- a node library that manipulates images to:
- resize them.
- convert them on the fly.
- crop them.
- ... doing image suff.
- a connect / express middleware that:
- parses URL following an API and call the library accordingly.
- is able to proxy an image request.
- a client library to:
- automatically set some URL parameters.
- load images src.
data-attributes to customize URL fragments.
- Develop basic node library with modularity in mind.
- Develop basic middleware.
- Delop clien library.
- Support sharding.
- Adjust API and existing stuff.
- Implement a good solution to art direction.
- Propose other middlewares for other servers: Apache, Nginx, IIS, ...
The API would be very similar to Sencha.io Src:
http://[s[shard]].yourdomain.tld [/flush] [/data] [/format[quality]] [/orientation] [/width[/height]] [/art] /url
shard(optional). A number between 1 and 4, to distribute loading across subdomains (
flushthen original image is refetched and its cached copy updated.
datathen returns a data URL. Also takes a callback suffix and arguments for JSON-P use.
format(optional). This is either jpg or png. Defaults to the original image format.
quality(optional). When the format is jpg, a compression value from 1 to 100. Defaults to 85.
orientation(optional). If 'landscape' or 'portrait', this will swap X/Y constraints if required. Defaults to no effect. 'detect' is experimental to use window.orientation if present.
width(optional). A width in pixels (which overrides the adaptive- or family-sizing). Can also contain formulaic adjustment.
height(optional). A height in pixels, if width is also present. Can also contain formulaic adjustment.
art(optional). A focus point or area in pixels. To specify.
url(required). The absolute path of the original image. It must start with http://
Formulaic adjustments use the following operators:
xmultiply by percentage
rround down to the nearest...
mmaximum for mobile browser
nmaximum for non-mobile browser
When using the client library, the following client-side measurements (or their abbreviations) are available at the start of the width of height parameters: