web-image-compression

Optimize and convert image assets for web delivery using Nix-based command-line tools.

Updated Oct 15, 2021
One-click install
npx skills add https://github.com/toqoz/config --skill web-image-compression
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-image-compression
Source: https://github.com/toqoz/config/tree/main/home/agents/skills/web-image-compression
Command: npx skills add https://github.com/toqoz/config --skill web-image-compression

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of manually optimizing images for web performance by providing a standardized, reproducible pipeline that ensures minimal file sizes without sacrificing visual quality.

Core Features & Use Cases

  • Automated Optimization: Lossless and lossy compression for PNG, JPEG, and SVG formats.
  • Modern Format Conversion: Seamlessly convert legacy formats to WebP or AVIF for faster page loads.
  • Responsive Pipelines: Generate multiple image sizes and variants for responsive web design.
  • Use Case: Quickly prepare a set of high-resolution hero images for a website by resizing them and generating WebP fallbacks to improve Core Web Vitals.

Quick Start

Use the web-image-compression skill to optimize all JPEG files in the current directory and generate WebP versions for each.

Frequently Asked Questions about web-image-compression

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

FAQPage Schema
How do I convert images to WebP and optimize them for web performance?

You can convert and optimize images to WebP using a Nix-based pipeline that runs command-line tools like libwebp, oxipng, and jpegoptim. This skill automates format conversion and compression to reduce file sizes for faster page loads.

How do I generate responsive images for different screen sizes?

Generate responsive images by running the Nix pipeline to create multiple image sizes and variants. This skill automates resizing and format conversion so you can serve appropriately sized assets for responsive web design.

Do I need to install oxipng and pngquant separately to use this image optimization pipeline?

No, you do not need to install them separately. This skill uses a Nix-based pipeline that provides standard image processing utilities like oxipng, pngquant, jpegoptim, libwebp, and ImageMagick in a reproducible environment.

What is the best way to automate lossless and lossy compression for web images?

The best way to automate compression is using a standardized Nix pipeline that applies lossless and lossy compression for PNG, JPEG, and SVG formats. This ensures minimal file sizes without sacrificing visual quality.

Can I use ImageMagick with this skill to prepare high-resolution hero images?

Yes, you can use ImageMagick through the Nix pipeline to resize high-resolution hero images. The skill integrates ImageMagick to manipulate image dimensions before generating WebP fallbacks.

When should I avoid using a Nix-based image optimization pipeline?

You should avoid this Nix-based pipeline if your project does not support Nix or if you need real-time on-the-fly image compression rather than build-time asset optimization, as this skill is designed for reproducible batch processing.