brookslybrand / remix-image-guide

Various image strategies in Remix

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Remix Image Strategies

This is a WIP repo. Here are some things I'm going to try

TODOs:

  • Create a basic layout for each image page
  • Create basic example with no optimizations
  • Create vite-plugin-image-optimizer version
  • Create Sharp version
  • Create Unpic version

Sharp

sharp is library for "High performance Node.js image processing". There is already an official Remix example using it, though it could be improved.

Unpic

Unpic seems like a nice option if you're already using an image CDN (which you probably should be unless you really want to be building your own).

vite-plugin-image-optimizer

vite-plugin-image-optimizer allows optimizing all images at build time, which for public assets may be what you want

vite-imagetools

Dang, vite-imagetools seems cool too 🤔

More stuff to look into

I can't cover it all, and there's tons of great tools! Here's a link of more stuff if this wasn't enough for you

About

Various image strategies in Remix


Languages

Language:MDX 49.2%Language:TypeScript 36.6%Language:JavaScript 9.5%Language:Dockerfile 4.4%Language:CSS 0.3%