Question about jekyll-assets and site.static_files array

[aripalo]

Background

I use jekyll-assets and I have written a plugin of my own which optimized images. This plugin depends on site.static_files array which Jekyll exposes for generators.

My image optimization plugin used to work as all my images were located outside of jekyll-asset's sources (in images folder at project root).

As jekyll-assets makes handling image assets easier as well and I moved my images to _assets/images. Jekyll and jekyll-assets work fine and serve my posts with images correctly, BUT now the site.static_files array does not contain my images anymore, which means that my image optimization plugin doesn't optimize anything.

The actual question(s)

Is it by design that jekyll-assets plugin does not include assets handled by it into site.static_files...?

If it's by design, could there be anyother way of tapping into the assets used or in my image optimization plugin should I just glob through the _assets folder and collect the files with that?

Or could this be a bug in jekyll-assets or just misconfiguration on my project?

[ixti]

It actually includes them. Right before write call: https://github.com/ixti/jekyll-assets/blob/master/lib/jekyll/assets_plugin/patches/site_patch.rb#L53

But they are not normal StaticFiles of Jekyll. The best option you have is to hook right into sprockets to post-process your images and jekyll-assets will respect that. Here's for example how to use image_optim:

# file: _plugins/jekyll-assets.rb
require "jekyll-assets"
require "image_optim"

image_optim = ImageOptim.new
processor = proc { |_, data| image_optim.optimize_image_data(data) || data }

%w(image/gif image/jpeg image/png image/svg+xml).each do |type|
  Sprockets.register_preprocessor type, :image_optim, &processor  
end

[aripalo]

I could not have hoped for better answer!

I was using image_optim as well and you just basically gave me a ready-made solution! I only had to add some of my envinronment checking logic etc configs (project specific) and I'm done now. Seriosly, thanks! You're awesome!

[ixti]

I'm glad that helped! :D

[abemedia]

Do preprocessors run before or after proxies? I use magick to resize & crop the images and was considering the solution in #297 (comment) however not having to add a proxy to each img tag makes this solution quite attractive.

[caub]

Does the optimized images replace the old images? or they are created in another folder? because I don't see other folders, and size change for the moment:

I have for example _assets/img/image2.jpg 130KB and _assets/img/image2-4826e2b0b15c91f0dcdff75ab2ec7f907cddc58db665ffa97e0ff05c13823840.jpg 130KB too

# file: _plugins/jekyll-assets.rb
require "jekyll-assets"
require "image_optim"

image_optim = ImageOptim.new(:pngcrush => false, :pngout => false, :advpng => false, :jhead => false, :jpegoptim => false, :jpegtran => false, :gifsicle => false)
processor = proc { |_, data| image_optim.optimize_image_data(data) || data }

%w(image/gif image/jpeg image/png image/svg+xml).each do |type|
  Sprockets.register_preprocessor type, :image_optim, &processor  
end

and this in build script

npm i -g svgo mozjpeg optipng-bin pngquant-bin
#...
bundle exec jekyll build

[envygeeks]

Optimized images aren't replaced in your source (in that we don't alter your actual source files,) we alter them and store them in .asset-cache or whatever your cache folder is and then we use that. You should check your cache folder and you should see a folder for the actions we do outside of Sprockets.

[caub]

Thanks hmm, ok, I had that folder in .gitignore, so that might be the problem, well no, it's just used at build time, but I still don't know why the served images have same size

@envygeeks I've checked the content of .asset-cache, I don't see anything that looks like an image. I deploy _site (and _site/assets with different options), I don't understand well where I could find the optimized images

[aaronwolen]

Following up on @abemedia's first question concerning the order of preprocessors and proxies: the image optimization solution posted on the wiki works perfectly except in cases where an image magick proxy is used to resize the image.

I believe what happens is the image is optimized and then resized, effectively producing an unoptimized image. The solution proposed in #297 avoids this issue but requires adding a new proxy to every image.

Is it possible to use the wiki solution but postpone optimization until the images have been resized?