image-assets

Optimize web images and generate responsive WebP/AVIF markup.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill image-assets
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-assets
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/image-assets
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill image-assets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Image sourcing, optimization, and integration for web projects to boost performance and visual quality.

Core Features & Use Cases

  • Guidance for sourcing images and selecting modern formats (WebP/AVIF) with adaptive delivery.
  • Techniques for lazy loading, placeholders, aspect-ratio management, and SVG sprites.
  • Practical use case: craft fast, accessible web pages with responsive images and OG/Open Graph assets.

Quick Start

Provide your image assets and run the built-in optimizer to generate responsive formats (WebP/AVIF) and ready-to-use markup.

Frequently Asked Questions about image-assets

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

FAQPage Schema
How do I optimize and convert web images to modern formats like WebP and AVIF?

Image optimization improves web performance by applying modern formats like WebP and AVIF alongside lazy loading and responsive delivery techniques. This approach minimizes file sizes while maintaining visual quality across different viewport sizes.

What is the best way to implement lazy loading and responsive images in a web app?

The best way to implement lazy loading and responsive images is by applying automated best practices for aspect-ratio management and placeholders. This ensures fast, accessible web pages by deferring offscreen image loads until needed.

How do I create Open Graph assets for web pages?

Creating Open Graph assets involves sourcing and formatting images specifically for social sharing metadata. You can generate ready-to-use OG markup alongside your standard responsive image workflow to ensure proper link previews.

Can I use SVG sprites for managing web image assets?

Yes, you can use SVG sprites to manage web image assets efficiently. This technique allows you to bundle multiple vector graphics into a single file, reducing HTTP requests and enabling adaptive delivery for fast, accessible web pages.

Do I need any specific dependencies to start optimizing images for responsive delivery?

No specific dependencies are required to start optimizing images for responsive delivery. You can provide your image assets directly and use the built-in optimizer guidance to generate modern formats and markup without external components.