Skip to content

Add animated WebP from video guidance to video-transformations reference #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlevison wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add animated WebP from video guidance to video-transformations reference #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
671b75f
Various improvements
carlevison Jun 21, 2026
53fcf93
Bump version
carlevison Jun 21, 2026
45bf4da
Tweak
carlevison Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions skills/cloudinary-transformations/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Create and debug Cloudinary transformation URLs from natural langua
license: MIT
metadata:
author: cloudinary
version: '1.0.3'
version: '1.0.4'
---

# Cloudinary Transformation Rules
Expand Down Expand Up @@ -439,7 +439,8 @@ For complete syntax, arithmetic operations, nested conditionals, and real-world
7. ✅ **`g_auto` compatibility** (only works with `c_fill`, `c_lfill`, `c_crop`, `c_thumb`, `c_auto`)
8. ✅ **Background as qualifier** (use with pad crop: `b_color,c_pad,w_X`, not `/b_color/`)
9. ✅ **Format/quality at end** (prefer `f_auto/q_auto` as final components)
10. ✅ **Flags/parameters match the base asset type** (asset-type-specific syntax — e.g. video-only `fl_splice`, `du_`, `fps_`, `vc_` — often no-ops silently on the wrong base, in either direction; verify the output and check the reference when unsure — see [Asset Type Matters](#asset-type-matters-image-vs-video))
10. ✅ **Flags/parameters match the base asset type** (asset-type-specific syntax — e.g. video-only `fl_splice`, `du_`, `fps_`, `vc_` — often no-ops silently on the wrong base, in either direction; verify the output and check the Asset Type Matters section above)
11. ✅ **Transformation parameters are valid** (don't make up any parameter names - check against [Transformation Reference](https://cloudinary.com/documentation/transformation_reference.md?install_source=skillspack&referrer=trans-skill))

**Quick syntax check:**
- Commas separate parameters within a component: `c_fill,g_auto,w_400`
Expand Down Expand Up @@ -495,9 +496,9 @@ fetch('https://res.cloudinary.com/demo/image/upload/w_abc/sample.jpg')
- `Resource not found` - Asset doesn't exist or public ID is incorrect
- `Transformation limit exceeded` - Account transformation quota reached

**Online tool:** Use the [X-Cld-Error Inspector](https://cloudinary.com/documentation/advanced_url_delivery_options?install_source=skillspack&referrer=trans-skill#x_cld_error_inspector_tool) to check any Cloudinary URL
**Online tool:** Use the [X-Cld-Error Inspector](https://cloudinary.com/documentation/advanced_url_delivery_options.md?install_source=skillspack&referrer=trans-skill#x_cld_error_inspector_tool) to check any Cloudinary URL

For more details, see [Error Handling](https://cloudinary.com/documentation/advanced_url_delivery_options?install_source=skillspack&referrer=trans-skill#error_handling)
For more details, see [Error Handling](https://cloudinary.com/documentation/advanced_url_delivery_options.md?install_source=skillspack&referrer=trans-skill#error_handling)

## Transformation Costs

Expand All @@ -510,7 +511,7 @@ For complete cost details and cost reduction strategies, see [references/transfo
### Skill References (Progressive Disclosure)
- [references/debugging.md](references/debugging.md) - Use when transformations return errors or unexpected results
- [references/ai-transformations.md](references/ai-transformations.md) - Use when you need AI transformation prompt syntax, cost details, or complex AI combinations
- [references/video-transformations.md](references/video-transformations.md) - Use when working with video codecs, trimming strategies, or concatenation
- [references/video-transformations.md](references/video-transformations.md) - Use when working with video codecs, trimming strategies, concatenation, or creating animated images from videos
- [references/advanced-features.md](references/advanced-features.md) - Use when building complex logic with variables, conditionals, or arithmetic
- [references/responsive-images.md](references/responsive-images.md) - Use when implementing responsive images, configuring Client Hints, or using dpr_auto/w_auto
- [references/transformation-costs.md](references/transformation-costs.md) - Use when optimizing for cost or explaining cost implications to users
Expand Down
4 changes: 2 additions & 2 deletions skills/cloudinary-transformations/references/debugging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ crop_scale,width_400
c_scale,w_400
```

**Why:** Cloudinary uses abbreviated parameter names. Always check the [Transformation Reference](https://cloudinary.com/documentation/transformation_reference?install_source=skillspack&referrer=trans-skill).
**Why:** Cloudinary uses abbreviated parameter names. Always check the [Transformation Reference](https://cloudinary.com/documentation/transformation_reference.md?install_source=skillspack&referrer=trans-skill).

## Gravity Issues

Expand Down Expand Up @@ -454,7 +454,7 @@ When a transformation doesn't work:
- Slashes between components: `c_scale,w_400/f_auto/q_auto`

3. **Validate parameter names**
- Cross-reference with [Transformation Reference](https://cloudinary.com/documentation/transformation_reference?install_source=skillspack&referrer=trans-skill)
- Cross-reference with [Transformation Reference](https://cloudinary.com/documentation/transformation_reference.md?install_source=skillspack&referrer=trans-skill)
- Check for typos and abbreviations

4. **Check action vs qualifier**
Expand Down
2 changes: 1 addition & 1 deletion skills/cloudinary-transformations/references/examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -677,7 +677,7 @@ Automatic quality with low setting for smaller files.

## DPR and Responsive

**Important:** `dpr_auto` and `w_auto` parameters only work on Chromium-based browsers (Chrome, Edge, Opera, Samsung Internet) with Client Hints enabled. They do NOT work inside named transformations. For broader browser support, see the [Responsive Images documentation](https://cloudinary.com/documentation/responsive_images?install_source=skillspack&referrer=trans-skill).
**Important:** `dpr_auto` and `w_auto` parameters only work on Chromium-based browsers (Chrome, Edge, Opera, Samsung Internet) with Client Hints enabled. They do NOT work inside named transformations. For broader browser support, see the [Responsive Images documentation](https://cloudinary.com/documentation/responsive_images.md?install_source=skillspack&referrer=trans-skill).

### Specific DPR
```
Expand Down
4 changes: 2 additions & 2 deletions skills/cloudinary-transformations/references/named-transformations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ Baseline transformations (`bl_<named transformation>`) cache the result of a nam
- **Transformations with special transformation counts** (75-230 tx) that you need to reuse

**Consider eagerly generating baselines:**
- On upload using the [upload method](https://cloudinary.com/documentation/image_upload_api_reference?install_source=skillspack&referrer=trans-skill#upload_method) or [upload preset](https://cloudinary.com/documentation/upload_presets?install_source=skillspack&referrer=trans-skill)
- For existing assets using the [explicit method](https://cloudinary.com/documentation/image_upload_api_reference?install_source=skillspack&referrer=trans-skill#explicit_method)
- On upload using the [upload method](https://cloudinary.com/documentation/image_upload_api_reference.md?install_source=skillspack&referrer=trans-skill#upload_method) or [upload preset](https://cloudinary.com/documentation/upload_presets.md?install_source=skillspack&referrer=trans-skill)
- For existing assets using the [explicit method](https://cloudinary.com/documentation/image_upload_api_reference.md?install_source=skillspack&referrer=trans-skill#explicit_method)

### Syntax

Expand Down
23 changes: 23 additions & 0 deletions skills/cloudinary-transformations/references/video-transformations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,29 @@ c_fill,h_300,w_450/du_5/fl_splice,l_video:second_clip/c_fill,h_300,w_450/du_5/fl

**Important:** Both videos should be resized to matching dimensions before splicing

## Animated WebP from Video

To deliver an animated WebP from a video, use **one** of these valid combinations:

**Path A (simplest):** `f_auto:animated` — sufficient on its own; no extension or fl_ flags required.

@strausr strausr Jun 23, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

f_auto:animated delivers WebP only when the client sends a WebP Accept header. It falls back to GIF otherwise. Worth adding a note here so it's clear this isn't a guaranteed WebP delivery path.

```
du_5/f_auto:animated/q_auto # First 5 seconds as animated WebP (or GIF where unsupported)
du_5/e_loop/f_auto:animated # Looping animated WebP

@strausr strausr Jun 23, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The looping example omits q_auto but the non-looping example above includes it. Is this intentional? If not, worth adding for consistency so it doesn't imply quality optimization doesn't apply when looping.

```

**Path B:** `fl_animated,fl_awebp` together, **plus** a WebP delivery signal (`f_webp`, `f_auto`, or `.webp` extension):

@strausr strausr Jun 23, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The top of this file (line 12) says "Always use f_auto:video or a specific video format plain f_auto may return an image thumbnail." Path B on line 78 uses bare f_auto as a valid WebP signal. These two rules look contradictory without explanation. Something like "bare f_auto is valid here because fl_awebp already constrains output to animated WebP"

```
du_5/fl_animated,fl_awebp/f_webp/q_auto # Animated WebP via fl_ flags + f_webp
du_5/e_loop/fl_animated,fl_awebp/f_auto # Looping, with f_auto as WebP signal
```

**WRONG — these do NOT produce animated WebP:**
- `fl_animated` alone (missing `fl_awebp`)
- `fl_animated,fl_awebp` with no format parameter and no `.webp` extension
- `f_auto` alone with a `.webp` extension (returns a still frame, not animated)

@strausr strausr Jun 23, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

f_auto appears as valid in Path B (line 78) and invalid in the WRONG list here.


**Additional controls:** `e_loop` makes it loop; `vs_N` controls frame sampling rate; `dl_N` controls frame delay (milliseconds).

## Common Video Patterns

```
Expand Down