skills.rest
kquinsland
kquinslandCOMMUNITY
Explore all skills by this author →
GitHub

front-matter-image-converter

Convert Hugo front matter images to WebP and update index.md references.

Updated Dec 14, 2025
Search Tags:#automation#image#webp#conversion#hugo#front-matter
One-click install
npx skills add https://github.com/kquinsland/tools --skill front-matter-image-converter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: front-matter-image-converter
Source: https://github.com/kquinsland/tools/tree/main/.github/skills/front-matter-image-converter
Command: npx skills add https://github.com/kquinsland/tools --skill front-matter-image-converter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hugo sites often reference local images in front matter that remain in legacy formats. This skill converts those local images to WebP and updates front matter references to ensure faster load times and smaller asset footprints.

Core Features & Use Cases

  • Converts local PNG/JPEG/GIF assets to WebP when possible and preserves non-convertible assets.
  • Updates index.md front matter paths to point to the new .webp files and keeps alt text/metadata intact.
  • Supports selective processing by targetting specific content trees (e.g., content/tools/*) as needed.

Quick Start

Process a Hugo site root with the conversion script to automatically replace image references with WebP variants.

Frequently Asked Questions about front-matter-image-converter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Hugo front matter images to WebP?▼

To convert Hugo front matter images to WebP, you run a Python script that transforms local PNG, JPG, JPEG, and GIF assets and automatically updates the YAML front matter references in your index.md files.

What is the best way to update image paths in Hugo front matter after conversion?▼

The best way to update image paths in Hugo front matter is using an automated script that modifies YAML headers to point to new .webp files while preserving existing alt text and metadata.

Can I selectively convert images in specific Hugo content directories?▼

Yes, you can selectively convert images in specific Hugo content directories by targeting specific content trees like content/tools/*, allowing you to process only the assets within your chosen scope.

Does the Hugo image conversion script support SVG files?▼

No, the Hugo image conversion script skips SVGs and any files already in WebP format, only converting PNG, JPG, JPEG, and GIF assets.

Do I need a Python script to automate Hugo front matter image conversion?▼

Yes, you need a Python script like ci/convert_page_images.py to automate Hugo front matter image conversion, as it handles both the WebP transformation and the corresponding YAML reference updates.

Related Skills

Explore More Design & Creative Skills→
ralvarezdevralvarezdev
3

hugo-architect

Enforce standardized Hugo project layouts, front matter, and deployment workflows.

Community
Advanced
unfinishablemapunfinishablemap
3

check-links

Crawl local Hugo sites and report broken internal links.

Community
Basic
Baphomet480Baphomet480

cloudflare-pages

Deploy static websites to Cloudflare Pages with custom domains and CI/CD.

Community
Intermediate
hughescrhughescr
1

hugo-asset-pipeline

Automate Hugo asset processing with Hugo Pipes for SCSS, JS, and images.

Community
Advanced