A quarto extension that optimizes your images pre-render

[abhiaagarwal]

Description

Hey folks,

I built an extension that optimizes images on your website before publish. See it here.

Utilizing libvips, it generates webp copies of your images in multiple sizes to be served. It's done entirely during render and doesn't touch your original files, meaning you can keep the source images in version control and serve optimized ones on your website without using a CDN.

I developed this primarily because I was noticing poor lighthouse scores on my personal blog. I try to avoid serving a lot of assets to be cognizant of users with poor internet connections, and also make sure my content is discoverable on search engines. In a page that embedded 4 large images, I was suffering poor metrics.

After introducing this extension on that page, the lighthouse score jumped relatively dramatically.

Give it a shot! I'm not ready to call this production-ready — notably, I haven't implemented a caching solution yet, so your images will be re-rendered on every build. This is not ideal. I'm also not sure whether it works on Windows, as I develop on MacOS. I also would like to add a settings system and support imagemagick, which is more popular than libvips.

If there's any desire by the quarto team to upstream this, let me know! I'd be more than happy to have this available in the CLI itself.

[cscheid]

This looks like an excellent extension!

If there's any desire by the quarto team to upstream this, let me know! I'd be more than happy to have this available in the CLI itself.

I'd love to figure this out, but I'm a bit concerned about the libvips and/or imagemagick dependencies. To be clear, I see the utility: I just recently found myself wishing for a converter from ppm to png to be able to quickly write an image from scratch in Lua. However, we need to build Quarto installers for a variety of operating systems and architectures, and I am pretty reluctant to add yet another binary dependency.

[abhiaagarwal]

https://github.com/kleisauke/wasm-vips/blob/d889cd6a6ed38e264ddf662e713bafe61ca4a27d/README.md?plain=1#L23 see reference here for wasm-vips, I don't really know that much deno/node so I couldn't figure it out but it should theoretically can be done without introducing a binary dependency (or at least one that can be downloaded dynamically)

[mcanouil]

Supports should be for cross-platform and cross-architecture. It would be a bit unexpected if you don't get the same experience with Quarto according to the platform and/or architecture. For instance, command -v won't work on Windows as it is an UNIX-like command.

[abhiaagarwal]

for sure, I'd imagine checking for the existence of a binary is much easier inside a typescript environment rather than me relying on the relatively limited capabilities of a lua script. though that's good to know about command -v, I'll have to go introduce windows into CI and see how many things are broken :D

[cscheid]

Suffice it to say that we take binary dependencies very conservatively and seriously.

I tried to do this but the deno runtime doesn't seem to have access to the internet

Because quarto needs to be able to run inside some of Posit's pro products in secure deployments that cannot have external internet access, our quarto run deno scripts use a local set of libraries. It's possible to add to these but it requires a fair bit of work in quarto internals which we haven't properly documented yet. I unfortunately won't have the time to individually help you make further progress, but the process to do it in a git deployment of quarto is (minimally) described in dev-docs/add-typescript-dependency.md.

[abhiaagarwal]

Thanks! I'll play around with it if I get a chance.

[danmackinlay]

Lover our work @abhiaagarwal . After a discussion at #9390 I used your ideas to write an extension to do what you do, but for thumbnails. however! it currently does not work 😢 . nonetheless, it might be interesting. I put some very simple caching logic in.