Is there any plans of making a next.js Image component equivalent, that optimizes images in TanStack Start?
#Next.js Image equivalent
dense nexus
charred ibex
@dense nexus Hello. Not sure about TS start rolling out their own <Image> but you should take a look at https://unpic.pics/
Should get your job done
true sand
hey, did you manage to implement image optimizaiton in TanStack Start?
dense nexus
I tried unpic like suggested above and it worked great.
From unpic's docs:
Differences from next/image
The @unpic/react/next component is similar in concept to next/image, and can use the same image optimizer. However, it has a number of differences that may mean you prefer to use it instead.
When unpic-img detects that you are using a supported CDN it will load the images from there directly, using the CDN’s own image resizing rather than Next.js. This saves the need to process the image twice, and means that you can use the more powerful features of the image CDN.
Unlike next/image, unpic-img will not distort the image to fit the requested size as it uses object-fit: cover by default, and if using a supported CDN it will crop the image to the requested aspect ratio.
There is no need to specify a loader, because unpic-img will automatically detect the CDN and use the correct loader, and supports many more than Next.js.
unpic-img includes three built-in layout modes: fixed, constrained, and fullWidth. These affect how the image resizes, but also allows smarter generation of the srcset and sizes attributes.