unpic-img
unpic-img copied to clipboard
ascorbic
Support Brisa JSX Framework
I see that the implementation with Brisa it looks very simple:
import { transformProps, type UnpicImageProps } from "@unpic/core";
export type ImageProps = UnpicImageProps<JSX.HTMLAttributes<HTMLImageElement>>;
export function Image(props: ImageProps) {
return <img {...transformProps(props)} />;
}
This is currently working as Server Component to optimize CDN images, ex of usage:
import { Image } from "@/components/image";
export default function Homepage() {
return (
<>
<Image
src="https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=900&q=60"
layout="fullWidth"
alt=""
priority
height={400}
crossOrigin="anonymous"
background="auto"
></Image>
<Image
src="https://cdn.shopify.com/static/sample-images/garnished.jpeg"
layout="constrained"
width={800}
height={600}
alt="Shopify"
></Image>
<Image
src="https://bunnyoptimizerdemo.b-cdn.net/bunny7.jpg?width=300"
width={400}
height={300}
layout="fixed"
alt="Bunny.net"
></Image>
</>
);
}
Result HTML:
<img alt="" crossorigin="anonymous" loading="eager" fetchpriority="high" role="presentation" style="object-fit:cover;background-image:url(https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=24&q=60);background-size:cover;background-repeat:no-repeat;width:100%;height:400px;" srcset="https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=640&q=60 640w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=750&q=60 750w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=828&q=60 828w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=960&q=60 960w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=1080&q=60 1080w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=1280&q=60 1280w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=1668&q=60 1668w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=1920&q=60 1920w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=2048&q=60 2048w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=2560&q=60 2560w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=3200&q=60 3200w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=3840&q=60 3840w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=4480&q=60 4480w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=5120&q=60 5120w,
https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=6016&q=60 6016w" src="https://images.unsplash.com/photo-1617718295766-0f839c2853e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTczfHxyYWluZm9yZXN0JTIwYmVhY2h8ZW58MHx8MHx8&auto=format&fit=crop&q=60&h=400">
<img alt="Shopify" loading="lazy" decoding="async" sizes="(min-width: 800px) 800px, 100vw" style="object-fit:cover;max-width:800px;max-height:600px;aspect-ratio:1.3333333333333333;width:100%;" srcset="https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=640&height=480 640w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=750&height=563 750w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=800&height=600 800w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=828&height=621 828w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=960&height=720 960w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=1080&height=810 1080w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=1280&height=960 1280w,
https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=1600&height=1200 1600w" src="https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=800&height=600">
<img alt="Bunny.net" loading="lazy" decoding="async" sizes="400px" style="object-fit:cover;width:400px;height:300px;" srcset="https://bunnyoptimizerdemo.b-cdn.net/bunny7.jpg?width=400&aspect_ratio=400%3A300 400w,
https://bunnyoptimizerdemo.b-cdn.net/bunny7.jpg?width=800&aspect_ratio=800%3A600 800w" src="https://bunnyoptimizerdemo.b-cdn.net/bunny7.jpg?width=400&aspect_ratio=400%3A300" width="400" height="300">
The only problem I see is with the integration in this repo as another package because of the workspace resolution with pnpm and the use of vitest, since all the tooling of Brisa is through bun, and the testing is part of brisa/test. Brisa also does not use vite, it uses bun (brisa dev).
See this fork https://github.com/aralroca/unpic-img/commit/b62d0994892d8dcae38c6c468c01b34f034f97a2
