Image component

[emmanuelchucks]

Are we going to get an official Image package like next/image or @astrojs/image anytime soon?

I stumbled on this a few weeks ago and wondered why it was abandoned
https://github.com/solidjs/solid-start/tree/image-component/examples/movies/src/components/image

[ryansolid]

Movies branch has a lot of experimental stuff not merged in yet. I believe @davedbase is still working on it. But it's not his highest priority.

[davedbase]

I've made pretty good progress on a new version that's not public yet. I ended up disliking the next approach and decided to ditch it.

I hope to open source a basic working version based on nuxt-img and astrojs/image in the coming weeks. Keep an eye out on discord and my Twitter.

[algoflows]

Super amped about this, literally been hammering the threads over this for a while! Epic work looking forward testing it out... are there any updates on a release date yet? :)

[algoflows]

@davedbase any updates on the image comp progress?

[scrhartley]

In the meantime, I guess Unpic is available.
It doesn't optimize images itself, but instead is able to ask your CDN or CMS to use their functionality to serve an appropriate image.
List of supported is here: https://unpic.pics/lib/#supported-cdn-apis

[cbetori]

I was curious how Astro was handling there Image component. Basically they just create an api/_image end point and have sharp process the image.

Here is a very basic POC if any one wants a starting point.

Endpoint: _image.ts

import type { APIEvent } from '@solidjs/start/server';
import sharp from 'sharp';



 const processImage = async ({ src, quality, width, height }: { 
  src: string
  quality: number
  width: number
  height: number
}) => {
  try {
    if (src === undefined) return '';
    const res = await fetch(src);
    const img = await res.arrayBuffer();
   
    let transformedImage = sharp(img, {
      failOn: 'none',
      animated: true,
    });

    transformedImage = transformedImage.toFormat('webp', {
      quality: Number(quality),
    });
    transformedImage = transformedImage.resize(Number(width), Number(height));
    const final = await transformedImage.toBuffer();
    return final;
  } catch (e) {
    console.log(e);
    return '';
  }
};

export async function GET(event: APIEvent) {
  const url = new URL(event.request.url);
  const src = url.searchParams.get('src');
  const quality = Number(url.searchParams.get('quality')) || 20;
  const width =  Number(url.searchParams.get('width'))|| 500;
  const height = Number(url.searchParams.get('height'))|| 500;
  const image = await processImage({
    src: src || '',
    quality: quality,
    width: width,
    height: height,
  });

  return new Response(image, {
    status: 200,
    headers: {
      'Content-Type': 'image/webp',
      'Cache-Control':
        'public, s-maxage=31536000, max-age=31536000, must-revalidate',
    },
  });
}

Image component: Image.tsx

export function Image(props: Partial<HTMLImageElement> & { quality?: number }) {
  return (
    <img
      src={`/api/_image?src=${props.src}&quality=${props.quality || 50}&width=${
        props.width
      }&height=${props.height}`}
      loading="lazy"
      alt={props.alt}
      width={props.width}
      height={props.height}
    />
  );
}

[simonihmig]

I have this project: https://responsive-image.dev/, for which I just released a new package providing a Solid native image component!

Lets you process local images using its Vite plugin or load remote images from image CDNs. Also some more advanced features like placeholders. Hope you find it useful!