[rfc] Image resizing

[rufuspollock]

Image resizing is one nice thing we'd like to support either in implementation or in providing a recommended pattern for it.

Job Story

When adding an image to my digital garden or website I want to just add an image and then have it published it an appropriate size (or sizes) so that I don't want to worry about its size or resizing it

Input wanted

We would welcome suggestions both on use cases and needs as well as on implementation approaches.

Implementation thoughts (quick)

• next has built-in support for image optimization with next/image. 🚩 we need to systematically use next/image for presenting images including in markdown
• however this depends on the build backend supporting this. there is support in most of the commercial cloud providers
  • vercel obviously has this
  • netlify have their own solution https://docs.netlify.com/integrations/frameworks/next-js/overview/#next-image-and-edge-functions
  • cloudflare: you can use cloudflare image optimization ($9 / month?) + https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks/
• self-hosted: ?? - less clear. looking for something for small scale sites and a static build preferably.

Self-hosted next/image support

Links

• Optimize images during `next build` vercel/next.js#19065 - best thread on nextjs forum about this with current options if you want image optimization as part of static build
• https://jamesku.cc/blog/imgproxy - recommends using imgproxy (which you then have to set up)