DOCSEARCHbyAlgolia
Submit Docs

Unpic Documentation

website·Indexed 35 days ago

https://unpic.pics/

A high-performance, responsive image component library and service supporting ten web frameworks, including React, Vue, Svelte, Angular, Astro, and SolidJS. Unpic provides tools for image transformation via various providers like Cloudinary, Vercel, and Shopify, as well as specialized utilities like @unpic/pixels for decoding PNG/JPEG pixels in Node and Deno, and @unpic/placeholder for generating low-quality image placeholders.

Tokens
35.5K
Snippets
196
Records
266
Agent score
68%

What's inside Unpic

  1. Overview of unpic-img

    unpic-img is a multi-framework component designed for responsive, high-performance images. It integrates with image CDNs and CMSs (such as Cloudinary, Imgix, Contentful, and Shopify) to resize and format images on the fly without requiring a build step or server-side rendering. It generates a single native <img> tag, avoiding wrapper elements and runtime JavaScript, while automatically handling srcset, sizes, lazy loading, and aspect ratio preservation to prevent layout shift.

  2. Overview of the Unpic image toolset

    Unpic is a suite of tools designed for managing images on the web. It consists of three primary offerings:

    1. unpic-img: A collection of image components compatible with ten different frontend frameworks (Angular, Astro, Lit, Preact, Qwik, React, Solid, Svelte, Vue, and WebC).
    2. unpic lib: A library providing functions to detect, parse, and generate URLs for over 20 image providers, including various CMSs, hosting providers, and image CDNs.
    3. Specialized utilities: unpic placeholder for generating lazy-load placeholders and unpic pixels for loading and decoding raw image data.

  3. Overview of Unpic img

    Unpic img is a minimal image component available for React, Vue, SolidJS, and Svelte. It simplifies the implementation of image performance best practices by generating an optimized <img> tag without requiring wrapper elements or runtime JavaScript. It automatically handles srcset and sizes by detecting and parsing image CDN URLs from providers like Shopify, Cloudinary, Imgix, Contentful, Sanity, Prismic, and WordPress.com.

  4. Overview of unpic-img

    unpic-img is a component library for displaying high-performance, responsive images across ten different web frameworks. It automatically detects the image CDN or CMS (such as Cloudinary, Imgix, Sanity, Contentful, and Shopify) from the provided URL and uses the host's API to generate the correct srcset and sources. It also generates CSS to ensure correct aspect ratios and prevent layout shift, improving Core Web Vitals.

  5. Load and decode PNG or JPEG pixels with @unpic/pixels

    @unpic/pixels (based on ascorbic/get-pixels) is a module used to load and decode the pixels of a PNG or JPEG image. It accepts either raw image data or a URL and returns the decoded pixels along with the image dimensions. The module is compatible with both Node.js and Deno environments.

  6. Use Imgix provider with Unpic

    Unpic allows image transformation via Imgix. You can use the imgix provider to generate image URLs directly using the base unpic library or integrate it into framework-specific Unpic components.
    import { transform } from 'unpic/providers/imgix';

  7. Use unpic-img across different web frameworks

    The unpic-img component library is designed to be consistent across ten different web frameworks. While implementation examples may use JSX, the props remain the same for almost all supported frameworks.

  8. Generate low quality image placeholders with @unpic/placeholder

    @unpic/placeholder is a library used to generate low-quality image placeholders to improve perceived loading performance and reduce Largest Contentful Paint (LCP) time. It supports two primary methods for creating placeholders: extracting the dominant color from an image or rendering a BlurHash. BlurHash placeholders can be output as either a set of CSS gradients or a tiny BMP image data URI, both typically around 150 bytes in size, which can be applied as a CSS background-image to an <img> element.

  9. Use image transformation providers in Unpic

    Unpic allows for type-safe image transformations and configuration across a wide variety of image services. Most providers are auto-detected, allowing them to work with zero configuration. For services that use these providers under the hood (such as many CMSs using Imgix), additional configuration may be required to enable specific features.

  10. Transform images using the Supabase provider in Unpic

    Unpic provides a supabase provider to transform images hosted on Supabase. You can use it by importing the transform function from the provider's subpath or by passing it to an Unpic framework component.
    import { transform } from 'unpic/providers/supabase';

  11. Install and use @unpic/react in a React project

    @unpic/react provides a high-performance <Image /> component that generates responsive <img> tags with optimized srcset and sizes attributes. It automatically detects image URLs from most image CDNs and CMSs to resize images without a build step.
    npm install @unpic/react
    import { Image } from "@unpic/react";

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

  12. Generate Open Graph images with Deno CLI or Deno Deploy

    You can use og_edge with the Deno CLI or Deno Deploy by creating a server using std/http/server.ts and returning an ImageResponse object.
    import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import React from "https://esm.sh/react@18.2.0";
import { ImageResponse } from "https://deno.land/x/og_edge/mod.ts";

async function handler(req: Request) {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 128,
          background: "lavender",
        }}
      >
        Hello!
      </div>
    ),
  );
}

serve(handler);
// Run via: deno run --allow-net --allow-env og.tsx