skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

images

Optimize and serve images via Cloudinary CDN with responsive sizing.

3|Updated Dec 30, 2025
Search Tags:#performance#accessibility#cdn#responsive images#image optimization#cloudinary
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill images-guicheffer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: images
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/ui-design-system-rn/images
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill images-guicheffer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenges of managing and displaying images in applications, ensuring optimal performance, quality, and accessibility across various devices and network conditions.

Core Features & Use Cases

  • Cloudinary Integration: Leverages Cloudinary CDN for automatic image optimization (format, quality, size).
  • Responsive Images: Adapts image dimensions and resolution based on device pixel ratio and screen size.
  • Accessibility: Enforces the use of descriptive alt text for screen readers.
  • Error Handling: Provides fallback mechanisms for broken or unavailable images.
  • Use Case: Displaying product images in an e-commerce app, ensuring they load quickly, look sharp on high-resolution screens, and have proper alt text for visually impaired users.

Quick Start

Use the images skill to display the product image from 'https://example.com/product.jpg' with a width of 300 pixels and descriptive alt text.

Frequently Asked Questions about images

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

FAQPage Schema
How do I optimize and serve responsive images using a CDN?▼

To optimize and serve responsive images, this skill uses the Cloudinary CDN to automatically adjust image sizing, select modern formats like WebP or AVIF, and modify quality based on device capabilities.

How does automatic format selection work for image optimization?▼

Automatic format selection works by detecting device capabilities and delivering the optimal image format, such as WebP or AVIF, through the Cloudinary CDN to ensure fast loading and high visual quality.

Can I use this image optimization tool for e-commerce product displays?▼

Yes, you can use this tool for e-commerce product displays. It adapts image dimensions to device pixel ratios, enforces mandatory alt text for accessibility, and provides fallback mechanisms for broken images.

How do I handle broken images and focus cropping with Cloudinary?▼

You can handle broken images through built-in fallback mechanisms for unavailable sources, and control focus cropping by specifying gravity settings to ensure important visual elements remain centered.

Do I need mandatory alt text for responsive images?▼

Yes, mandatory alt text is required. The skill enforces descriptive alt text to ensure screen readers can properly interpret images, meeting accessibility standards for visually impaired users.

Related Skills

Explore More Design & Creative Skills→
skills-ilskills-il
9

cloudinary-assets

Manages digital media assets via Cloudinary's REST API, including upload, transform, optimize, and delivery of images/videos.

Official
Intermediate
deomiarndeomiarn

webp-images

Convert page images to WebP with responsive variants for Next.js Image components.

Community
Advanced
ayiaayia

responsive-design

Apply mobile-first Tailwind CSS breakpoints to fix responsive UI layouts from 375px to 1920px+.

Community
Intermediate
AgriciDanielAgriciDaniel
13.8k

seo-images

Analyze web page images for SEO and performance optimization.

Community
Intermediate