
BBC-News/Imager.js - anu_gupta
https://github.com/BBC-News/Imager.js
======
aytekin
There is no live demo on the github site. Here is a nice demo found on google:
[http://firegoby.com/imager-cssbackgrounds](http://firegoby.com/imager-
cssbackgrounds)

------
andrewingram
Nice, but wouldn't work for our use case at onefinestay, for two reasons:

1 - We use thumbor for serving our images, so changing the width in the URL
isn't enough, you also need to change the crop parameters and the anti-tamper
signing part.

2 - We actually use different markup in places, some of our homepage slides
use 2 or 4 images at desktop sizes, but only 1 at tablet and smaller.

What we're doing is using a modified version of picturefill.js, where we wrap
each picture component in another component that controls what widths we load
it at.

You can see it in play here:
[http://www.onefinestay.com/](http://www.onefinestay.com/)

~~~
oncletom
You should provide the feedback on the Github repository, it will be easier to
address a solution for that :-)

1\. how do you indicate the crop/anti-tamper in your URL? What is the URL
structure of your responsive images? 2\. you can finely control how Imager is
targeting your images. So you could target different imager configurations for
different classnames.

Have a look at the examples and let us know if something is missing and not
addressing your needs :-)

~~~
andrewingram
It would actually be different configurations per image, see this example:

[http://cropper.onefinestay.com/s3NY9Z5QncGSnphA8QhOStz36wQ=/...](http://cropper.onefinestay.com/s3NY9Z5QncGSnphA8QhOStz36wQ=/80x19:4253x2801/fit-
in/696x0/filters:quality\(85\)/https://ofs-media-
production.s3.amazonaws.com/media-
library/be3c3d92397a3a2af72662c1838885163c48c12f.jpg)

The segment immediately after the hostname is the signed part, which is
generated based on all the other parameters (ie quality, dimensions, crop
coordinates and source image url). If you change any part of the URL, the
server will return a 404. There's no way of providing a set of client-side
rules for how to generate the URLs for the different size images, without
leaking our secret key. An option would be for the entire URL to be the
configuration, but then all you've achieved is moving the config out of data
attributes and into javascript config objects.

Essentially, this is what we're doing:
[https://gist.github.com/AndrewIngram/7871392](https://gist.github.com/AndrewIngram/7871392)

~~~
oncletom
Oh that's an interesting approach; glad you coined it :-)

Could you create another Gist with how you would see your URL built with
Imager? And ping @oncletom in it.

Maybe something like

```
[http://cropper.onefinestay.com/{secret_key}=/80x19:4253x2801...](http://cropper.onefinestay.com/{secret_key}=/80x19:4253x2801/fit-
in/{width}x0/filters:quality\({quality}\)/https://ofs-media-
production.s3.amazonaws.com/media-
library/be3c3d92397a3a2af72662c1838885163c48c12f.jpg) ```

Thanks :-)

------
mk3
BBC uses name of already existing npm package for their install instructions.
And in issues one of the programmers I suppose suggests asking to madhums to
rename original library :) Strange line of thought.

~~~
neokya
that's strange indeed. Not to mention the npm 'imager' is widely used in
production.

~~~
oncletom
Yes that's something that has been overlooked and which is going to be sorted.
It will mostly be `imager-js` in npm and bower registries.

------
tomelders
Looking through their resources the important images are all Jpegs, so I would
have thought the overly compressed JPEG@2x solution would work for them. I
also see a few individual PNGs, some of them individual icons, the other
sprite sheets. Perhaps they'd be better off using webfonts for icons, or
Base64 encoding images into the sprite sheets with SASS.

My gut feeling is that this solution might be more complicated than the
problem.

~~~
kaelig
BBC News does use webfonts for icons. The examples you see on the Imager.js
Github repository are not exactly what BBC News uses in production, consider
those as guidelines for using the plugin.

~~~
tomelders
I was looking at the resources on the actual BBC news website. My point being,
I wonder if the BEEB _might_ be better off using webfonts for icons since
every other image can be a jpeg. And if it can be a JPEG, the aggressive
compression technique might be a better approach since it doesn't require any
JS or additional HTTP connections.

Are you saying that the BEEB has a policy of not using web fonts? If so, why?

------
ericcholis
A nice solution, but it still leaves me wanting a more native option. Word of
warning, if you implement this, be sure to have a good image sitemap for
search engines to digest.

Image Sitemap Schema:
[https://support.google.com/webmasters/answer/178636?hl=en](https://support.google.com/webmasters/answer/178636?hl=en)

------
trekky1700
Between BBC and The Guardian both open sourcing components on the Hacker News
homepage, this seems like a good trend. Thank you BBC.

------
tlongren
Seems like this is posted every few weeks or so.

------
elwell
BBC-News team writes great code apparently!

