Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ascorbic/unpic-img

Multi-framework responsive image component
https://github.com/ascorbic/unpic-img

angular astro hacktoberfest images lit preact qwik react solidjs svelte vue webc

Last synced: 3 months ago
JSON representation

Multi-framework responsive image component

Host: GitHub
URL: https://github.com/ascorbic/unpic-img
Owner: ascorbic
Created: 2023-02-06T19:22:33.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-03-03T22:27:58.000Z (3 months ago)
Last Synced: 2024-03-03T23:21:26.016Z (3 months ago)
Topics: angular, astro, hacktoberfest, images, lit, preact, qwik, react, solidjs, svelte, vue, webc
Language: TypeScript
Homepage: https://unpic.pics
Size: 9.27 MB
Stars: 1,129
Watchers: 6
Forks: 42
Open Issues: 12
Metadata Files:
- Readme: README.md

Lists

popular-dependents-lists - ascorbic/unpic-img - 🌟 845 (Qwik / ascorbic/unpic-img)
awesome-stars - ascorbic/unpic-img - Multi-framework responsive image component (TypeScript)
awesome-stars - unpic-img - framework responsive image component | ascorbic | 1232 | (TypeScript)

README

🌳 unpic-img

A cross-framework component for responsive, high-performance images using image CDNs

[ React](https://unpic.pics/img/react)
•
[ Vue](https://unpic.pics/img/vue)
•
[ SolidJS](https://unpic.pics/img/solid)
•
[ Svelte](https://unpic.pics/img/svelte)
•
[ Astro](https://unpic.pics/img/astro)

[ Preact](https://unpic.pics/img/preact)
•
[ Qwik](https://unpic.pics/img/qwik)
•
[ WebC](https://unpic.pics/img/webc)
•
[ Angular](https://unpic.pics/img/angular)
•
[ Lit](https://unpic.pics/img/lit)

## Features

- Just an `` tag! No extra elements, no runtime JavaScript. Easy to style.
No legacy hacks or workarounds.
- Automatically generates correct srcset and sizes attributes for responsive
images.
- Handles responsive resizing of images, preserving aspect ratio and avoiding
layout shift.
- Uses native lazy loading and async decoding for offscreen images.
- Handles different image layouts: fixed, constrained and full width.
- Uses eager loading and high priority fetching for important images.
- Delivers modern image formats, including WebP and AVIF if supported by the
browser.
- No build step or server-side rendering required for the images: uses your
existing image CDN or CMS, with no additional configuration.
- Uses [unpic lib](https://unpic.pics/lib) to support most image CDNs, including
Cloudinary, Imgix, and Shopify.
- Can generate a low-res background image for a blurred placeholder effect, or
use with [`@unpic/placeholder`](https://unpic.pics/placeholder) for more
options.

## Usage

For details of usage, see [the documentation](https://unpic.pics/img).

## FAQ

### Why do I need this?

While it's easy to use an `` tag for images, if you want to follow best
practices and deliver the most performant image to your users then it can take a
lot of work. Some frontend frameworks will automate this for you, but they often
rely on slow pre-rendering of images, or on running image optimizers on your own
site. They also generate complex HTML with wrappers and spacer elements that
make images hard to style.

Most images on modern websites are hosted on a CDN or CMS that can resize images
on the fly and deliver them at the edge. Despite this, most web frameworks will
still download and resize the image at build time or on your server, rather than
using the CDN, or just uses a single source image rather than handling multiple
resolutions.

This library works with any frontend framework or none, and uses your existing
image CDN or CMS, with no additional configuration.

For more details, see
[this post](https://dev.to/ascorbic/a-minimal-multi-framework-responsive-image-component-3iop).

## How does this work?

This library uses unpic to detect the image CDN, and then uses the CDN's URL API
to resize and format images. It then generates the correct `srcset` and `sizes`
attributes for the image. It uses new features built into modern browsers to
handle lazy loading, fetch priority and decoding. It also uses pure CSS to
handle responsive resizing of images, preserving aspect ratio and avoiding
layout shift. Unlike most other image components, it does not use any
client-side JavaScript by default, and generates just a single `` tag
without any wrapper divs or padding elements.

## What HTML does this generate?

Generated HTML for a constrained image
It turns this:

```tsx

```

...into this:

```html
Shopify
```

## Supported CDNs

You can use any image CDN supported by [unpic lib](https://unpic.pics/lib),
including:

- Adobe Dynamic Media (Scene7)
- Builder.io
- Bunny.net
- Cloudflare
- Contentful
- Cloudinary
- Directus
- Imgix, including Unsplash, DatoCMS, Sanity and Prismic
- Kontent.ai
- Netlify
- Shopify
- Storyblok
- Vercel / Next.js
- WordPress.com and Jetpack Site Accelerator

## License