Cache resized pictures in a separate directory

[hedgepigdaniel]

Following on from #191

Resizing pictures takes a while, so its problematic to resize all of them on each build, e.g. in CI/CD.

It's possible to cache the _site/generated/assets/img directory, but that is problematic because images from old builds that have since been deleted will be deployed again!

I wonder if it would be simple to add an intermediate cached images such as .jekyll-cache/jpt/generated/assets/img/example-image-1280-1234abcd.webp

That way the .jekyll-cache directory can be reused across builds without worrying about deleted images remaining on the CI forever.

[rbuchberger]

That makes sense, I think I can make it happen. I've also considered adding a config setting to clear out unused images during the site build, but I've never been sure it's worth the added complexity. Which is better, or would both be useful?

No promises on how long it will take, and pull requests are certainly appreciated!

[hedgepigdaniel]

I think either way works. Removing unused images in the output directory does seem like a more correct way to solve the problem. It means that the result of building is more consistent and also prevents the cache itself growing in an unbounded fashion.

The risk is that it might delete things too easily - e.g. changing the resize config would result in everything being deleted, even if you immediately change it back. I guess that's why it would be optional.

Probably an ideal (but significantly more complex) solution would involve a separate cache (with an expiry time and automatic cleanup), and also always cleaning the output directory.

Perhaps I'll give it a go if I get some time :)

[clintonb]

@rbuchberger do you still need help with this? I have an image-heavy site, and Netlify builds take 30+ minutes. Caching will save a lot of build time.

[benoliver999]

My trick is to just put the images in source. Bad practice perhaps! It's also clumsy because to view the images in dev mode I need to copy the images into the _site dir manually, or build a second time. But it's better than building the whole thing again every time.

So my output config is output: "../resized-image-dir"

To handle copying to _site I simply have

Jekyll::Hooks.register :site, :post_write do |site|
  if Jekyll.env == 'development'
    system("cp -r #{site.source}/resized-images #{site.dest}")
  end
end

in _plugins

The big thing is that you have to 'generate' the images locally first, but I find I always do that anyway.