Building resized images/thumbnails with Broccoli.js


#1

A grid of high-res images puts a high toll on load times and bandwidth. I’m trying to figure out if it’s possible to set up Broccoli.js to generate thumbnails, but I’m having a hard time finding out how one implements this. Are there any recommended guides or examples of similar Broccoli.js jobs?

In my case I have several directories with high-res source images, from which downsized and cropped thumbnails must be generated, preferably in separate directories.


#2

I think the best way is to create an addon and use the postBuild hook to generate thumbnails. I use it here:


#3

I guess this could deserve it’s own ember-cli-deploy plugin. But wouldn’t it be more semantically correct to include this task in the Broccoli.js build pipeline instead of the deployment pipeline?


#4

It also works if you just run ember build so it does not have to be ember-cli-deploy plugin. This was just meant as a pointer. But it deserves it’s own ember-cli-deploy plugin :wink:


#5

I found ember-cli-imagemin which is related, and is at least very handy in (re)compressing source images. Think it would be nice to make a similar Brocolli plugin for resizing.