image-optimization-pipeline-config

Define build-time image optimization contracts with srcset breakpoints and transparency handling.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/jacob-balslev/skill-graph --skill image-optimization-pipeline-config
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-optimization-pipeline-config
Source: https://github.com/jacob-balslev/skill-graph/tree/main/examples/projects/markdown-static-site/skills/image-optimization-pipeline-config
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill image-optimization-pipeline-config

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevent silent regressions in a build-time image optimization pipeline by making format, quality, transparency, and srcset breakpoints an explicit reviewable contract instead of implicit code behavior.

Core Features & Use Cases

  • Config-as-contract image policy: Defines responsive srcset breakpoints, output formats (AVIF/WebP/JPEG fallback), and per-format compression quality so the pipeline behavior can be derived from configuration.
  • Transparency-safe publishing: Ensures PNGs with transparency do not end up as lossy artifacts by routing them to alpha-preserving output paths.
  • Idempotent build behavior: Requires the pipeline to skip already-optimized outputs via hash-based cache invalidation so repeated builds do not churn files.
  • Use case: While reviewing changes to image tooling in a static site build, apply this skill to confirm the pipeline will preserve transparency, emit the expected variant set, and align emitted breakpoints with site layout breakpoints.

Quick Start

Use the image-optimization-pipeline-config skill to review whether your updates to lib/images/pipeline.config.ts, scripts/build-images.ts, or format negotiation rules preserve transparency, match expected srcset breakpoints, and maintain idempotent outputs.

Frequently Asked Questions about image-optimization-pipeline-config

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

FAQPage Schema
How do I prevent transparent PNGs from getting black backgrounds during image optimization?

Transparent PNGs get black backgrounds when a build pipeline routes them to lossy JPEG fallback formats. An image optimization pipeline contract prevents this by enforcing alpha-channel handling that routes transparent sources to alpha-preserving output paths.

What is deterministic image build behavior and why does it matter for static sites?

Deterministic image build behavior means repeated builds produce identical output without churning files. It matters because hash-based cache invalidation skips already-optimized assets, ensuring idempotent outputs and preventing silent regressions in your static site.

How do I configure srcset breakpoints and AVIF WebP fallback in a build pipeline?

You configure srcset breakpoints and AVIF WebP fallback by defining explicit responsive variants and per-format compression quality in a reviewable configuration file. This config-as-contract approach makes the image optimization pipeline behavior derivable from settings.

Does my static site generator support idempotent image optimization?

Static site generators support idempotent image optimization when the build-time resize and recompress logic implements hash-based cache invalidation. This requires the pipeline to skip already-optimized outputs by checking file hashes before processing.

Why does my image optimization pipeline keep reprocessing the same files on every build?

Your image optimization pipeline reprocesses files because it lacks hash-based idempotency checks. Implementing a deterministic config contract that validates already-optimized outputs via hash-based cache invalidation will stop repeated builds from churning static-site assets.

What's the best way to review image tooling changes in a static site build?

The best way to review image tooling changes is applying a pipeline contract skill that verifies transparency preservation, expected variant sets, and idempotent outputs. This confirms format negotiation rules and srcset breakpoints align with site layout breakpoints.