Image optimization while using R2

finitevoidlast year

14

• 

  ritsu0455last year

  do you serve your images through Payload (url:

  website.com/api/file/image.png

  or directly to R2 (

  r2-blabla.cloudflare/bucket/image.png

  )?

• 

  finitevoidlast year

  I use the s3 plugin which from my understanding first downloads it to where its hosted (vercel). So, should have been available on NEXT_PUBLIC_SERVER_URL

  
  
  

  So, jz checked. If the images are unoptimized, they come from:

  https://www.gopubyourself.xyz/api/coverImages/file/industrial-mage-modernizing-a-magical-world-kingdom.jpg
  
  

  directly my website. that is

• 

  hristo6004last year

  I'm currently battling with this (it's quite annoying), but my next config looks like this, it might give you some ideas:

  
  
  

  import { withPayload } from '@payloadcms/next/withPayload'
  
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      reactCompiler: false,
    },
    images: {
      remotePatterns: [
        {
          protocol: 'http',
          hostname: 'localhost',
          port: '3000',
        },
        {
          protocol: 'https',
          hostname: 'schooljob-beta.coolify.koev.cz',
          pathname: '/api/logos/file/**',
        },
        {
          protocol: 'https',
          hostname: 'schooljob-beta.coolify.koev.cz',
          pathname: '/api/image-covers/file/**',
        },
        {
          protocol: 'https',
          hostname: 'schooljob-beta.coolify.koev.cz',
          pathname: '/api/photos/file/**',
        },
      ],
    },
  }
  
  export default withPayload(nextConfig)

• 

  ritsu0455last year

  then I think you need to add your domain into

  remotePattern
  

   remotePatterns: [
        {
          hostname: 'website.domain.com',
        },,
      ],

  
  

  I personally don't use image optimization at all, instead i just generate on the Payload side for each device a resized image

• 

  finitevoidlast year

  

  Funky thing is I've once set remotePatterns to accept all domains and even then Vercel gave me 404 for img optimization

  
  
  

  Ohh, so like for mobile etc and jz serve them

  
  
  

  But as the other thing that's going on in

  #1215659716538273832

  isn't that still slow since it has to first download to hosted server and then pass it up

  
  
  

  I have a public domain set for R2, Im almost of mind to just string manipulate url from payload to pull from R2 directly

  
  
  

  I tried this, but it didn't work on Vercel for some reason. Works on dev and build locally but vercel jz goes no

  
  
  

  Tho maybe I didn't do such specific pathnames.

• 

  hristo6004last year

  ^ yeah, that was the annoying part for me 😄

• 

  ritsu0455last year

  with

  srcSet

  and

  sizes

  props, it automatically detects what image url to apply based on the device size

  
  

  the main benefit for me is that my backend is self-hosted and I don't need to have +100$ frontend bill on Vercel or whatever other server-less platform because of image resizing (it's considered resource heavy)

• 

  finitevoidlast year

  

  wait it detects even when using basic Next/Image component or I need to bake in some logic in a custom Media component?

• 

  ritsu0455last year

  yeah, I needed to write a custom

  CMSImage

  component which resolves

  srcSet

  and

  sizes

  and uses Next Image or just

  img

  tag (actually no difference because I've

  imageOptimization: false

  in the next config)

• 

  finitevoidlast year

  
  
  

  Makes sense Makes sense. I guess a last question since I've never thought on what is a good optimal set. But what would be a good size set for let's say a portrait 2:3 image

  
  
  

  go by percents?

  
  
  

  100, 66, 33 etc?

• 

  ritsu0455last year

  but keep in mind that it makes sense only if you're self hosting your backend (or fully self hosting)

  
  

  still you can use Cloudflare for image resizing

  https://developers.cloudflare.com/images/

  but I'm not sure it'll be cheaper / easier than just Vercel + Next.js

• 

  finitevoidlast year

  It should still be cheaper, no? Coz Img optimizations happen on demand and repeatedly (not cached for days etc)

  
  
  

  whereas these are just one-time conversions

• 

  ritsu0455last year

  I'm sure Vercel caches it, but I feel like Cloudflare should be cheaper, mainly because their Pages / Workers even free plan is superiour to Vercel. The only downside is that they only support Edge runtime with Next.js

• 

  finitevoidlast year

  👀 I see I see. Thank you for looking into this!

  
  
  

  Thanks, too!

  
  
  

  Both viewpoints answer most of what I was puzzled over.