unpic-img

The @unpic/webc component provides high-performance, responsive images for WebC environments like Eleventy. Key capabilities include:

• Native HTML: Generates a standard <img> tag with no extra elements or runtime JavaScript.
• Responsive Automation: Automatically generates srcset and sizes attributes and handles aspect ratio preservation.
• Performance: Uses native lazy loading, async decoding, and supports eager loading/high priority fetching for critical images.
• Layout Support: Handles fixed, constrained, and full width layouts.
• CDN Integration: Uses unpic to support major CDNs and CMSs (e.g., Cloudinary, Imgix, Shopify) without requiring a build step or additional configuration.
• Modern Formats: Delivers WebP and AVIF based on browser support.
• Placeholders: Can generate low-res background images for blurred placeholder effects.

unpic-img is a multi-framework component library designed for displaying high-performance, responsive images. It works by automatically detecting the image host (CDN or CMS) and using that host's specific API to generate optimized srcset and src attributes. It also generates necessary CSS to ensure correct aspect ratios and prevent layout shifts.

<Image
  src="https://cdn.shopify.com/static/sample-images/bath.jpeg"
  width={400}
  height={300}
  alt="A lovely bath"
/>

Unpic is a collection of tools designed to simplify working with images on the web. The ecosystem is divided into several key parts:

• Unpic components: A set of image components available for ten different frontend frameworks (including React, Angular, Vue, Svelte, Astro, etc.) to handle image optimization automatically.
• Unpic lib: A core library containing functions for detecting, parsing, and generating URLs for over 20 different image providers (CMSs, hosting providers, and image CDNs).
• Unpic placeholder: A utility to generate placeholders for lazy-loaded images.
• Unpic pixels: A utility to load and decode raw image data.

Developers can use the framework-specific components for UI integration or the core library for low-level URL manipulation and provider detection.

unpic-img is a cross-framework component library designed for responsive, high-performance images. It works by leveraging existing image CDNs or CMSs to handle resizing and formatting at the edge, rather than requiring local build steps or server-side processing.

Key benefits include:

• Zero Runtime JS: It generates a standard <img> tag without extra wrapper elements or client-side JavaScript by default.
• Automatic Responsiveness: It automatically generates correct srcset and sizes attributes.
• Performance Optimized: Uses native browser features like loading="lazy", decoding="async", and fetchpriority to optimize delivery.
• Layout Stability: Uses pure CSS to handle responsive resizing and preserve aspect ratios, preventing layout shifts.
• Modern Formats: Supports delivering WebP and AVIF based on browser support.

The @unpic/lit component provides several high-performance image features:

• Responsive Images: Automatically generates correct srcset and sizes attributes.
• Layout Support: Handles fixed, constrained, and full width layouts.
• Performance: Uses native lazy loading, async decoding for offscreen images, and eager loading/high priority fetching for important images.
• Modern Formats: Delivers WebP and AVIF if supported by the browser.
• CDN Integration: Uses the unpic library to support CDNs like Cloudinary, Imgix, and Shopify without a build step.
• Placeholders: Can generate a low-res background image for a blurred placeholder effect.
• Lightweight: Renders as a standard <img> tag with no extra wrapper elements or runtime JavaScript overhead.

The @unpic/angular directive provides several automated image optimizations:

• Responsive Images: Automatically generates srcset and sizes attributes.
• Layout Support: Handles fixed, constrained, and full width layouts.
• Performance: Uses native lazy loading, async decoding, and supports eager loading/high priority fetching for critical images.
• Modern Formats: Delivers WebP and AVIF based on browser support.
• CDN Integration: Uses unpic to detect and resize images from CDNs like Cloudinary, Imgix, and Shopify without a build step.
• Placeholders: Can generate low-res background images for blurred placeholder effects.
• Zero Overhead: Renders as a standard <img> tag with no extra wrapper elements.