Image Handling with Cloudinary

Documentation

This skill has comprehensive documentation:

• Production Examples - Real-world code examples from the codebase
• API Reference - Complete API documentation with official links
• Implementation Patterns - Best practices and anti-patterns

Core Principles

NEVER use require() for images. Using require() bundles images into the app, increasing APK/IPA size, preventing CDN optimization, and requiring app redeployment for updates. Always use ImageCloudinary with Cloudinary URLs.

Always use ImageCloudinary for Cloudinary-hosted images. The ImageCloudinary component automatically applies Cloudinary transformations for format selection (WebP, AVIF), quality optimization, responsive sizing, and Device Pixel Ratio handling.

Always provide alt text for accessibility. The alt prop is required for screen readers. Descriptive alt text improves accessibility and enables visually impaired users to understand image content.