https://github.com/abhiaagarwal/optimize-images

pre-processes quarto figures and generates optimized versions
https://github.com/abhiaagarwal/optimize-images

quarto quarto-extension quarto-filter

Last synced: 26 days ago
JSON representation

pre-processes quarto figures and generates optimized versions

• Host: GitHub
• URL: https://github.com/abhiaagarwal/optimize-images
• Owner: abhiaagarwal
• License: mit
• Created: 2024-03-09T16:17:28.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-13T02:10:51.000Z (10 months ago)
• Last Synced: 2024-03-13T21:07:48.706Z (9 months ago)
• Topics: quarto, quarto-extension, quarto-filter
• Language: Lua
• Homepage: https://abhiaagarwal.github.io/optimize-images/
• Size: 2.63 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# optimize-images Extension For Quarto

Optimizes images in quarto-based documents using `libvips` to save bandwidth.

## Installing

This library requires [`libvips`](https://www.libvips.org/) to be in your path. See their [installation instructions](https://www.libvips.org/install.html) to install it on your local machine.

Then,

```bash

quarto add abhiaagarwal/optimize-images

```

This will install the extension under the `_extensions` subdirectory.

If you're using version control, you will want to check in this directory.

## Using

This extension works by walking the Quarto AST of every single element and when it encounters an image, uses `libvips` to generate webp optimized images that will be served on your browser. It also generates multiple copies to be used with [responsive images](https://web.dev/articles/serve-responsive-images), serving images appropriate for your reader's device.

Thus, you are able to keep your original images in source control while your website deploys optimized copies.

TODO: Add Caching

## Example

Here is the source code for a minimal example: [example.qmd](example.qmd).