# Guides

Each guide does one task from start to end. Read [Getting started](https://docs-demo.vitehub.dev/docs/getting-started) first if Lumen is new to you.

::illustration{name="guides" alt="Image frames with crop marks, a clamp that squeezes a picture, and format plates for WebP and AVIF."}
::

### [Resize images](https://docs-demo.vitehub.dev/docs/guides/resize)

Set a largest width, keep the aspect ratio, and make responsive sizes.

### [Compress images](https://docs-demo.vitehub.dev/docs/guides/compress)

Pick a quality, compare the results, and keep the originals.

### [Convert formats](https://docs-demo.vitehub.dev/docs/guides/formats)

Add WebP and AVIF copies, and choose the format per folder.

### [Presets](https://docs-demo.vitehub.dev/docs/guides/presets)

Name a set of settings and use it in many projects.

### [Check images in CI](https://docs-demo.vitehub.dev/docs/guides/ci)

Fail a pull request that adds an image that is too large.

<!-- vitehub-docs:section-links -->
## In this section

- [Overview](https://docs-demo.vitehub.dev/raw/docs/guides.md) (this page)
- [Transform](https://docs-demo.vitehub.dev/raw/docs/guides/resize.md)
- [Optimize](https://docs-demo.vitehub.dev/raw/docs/guides/compress.md)
- [Check images in CI](https://docs-demo.vitehub.dev/raw/docs/guides/ci.md)

Next: [Resize images](https://docs-demo.vitehub.dev/raw/docs/guides/resize.md)

All pages: [llms.txt](https://docs-demo.vitehub.dev/llms.txt)