Images Loading Slowly

[urban tangle]

Hey support team!

I notice my payload CMS sends my images a little delayed when i load my website.

Is there things I can do to fix this like making changes to my <Image ... /> tags?
Or is there a better way to load an image than using the getPayload utility function?

Is the current latency expected? If so then the advised step to be would bring in a skeleton loader right?

Here is the link to my site so you can see what I mean by that
https://vorgeas-media.vercel.app/

[lavish pendant]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Local API
• What is Payload? - Choosing a Framework - When Payload might not be for you - Related Help Topics
• Local API - TypeScript - Related Help Topics
• What is Payload? - Use Cases - Digital Asset Management
• What is Payload? - Use Cases - Headless CMS

[urban tangle]

cc @quick locust

[urban tangle]

I ended up using this block of code to optimize my image usage:

upload: {
    // Upload to the public/media directory in Next.js making them publicly accessible even outside of Payload
    staticDir: path.resolve(dirname, '../../public/media'),
    adminThumbnail: 'thumbnail',
    focalPoint: true,
    imageSizes: [
      {
        name: 'thumbnail',
        width: 300,
      },
      {
        name: 'square',
        width: 500,
        height: 500,
      },
      {
        name: 'small',
        width: 600,
      },
      {
        name: 'medium',
        width: 900,
      },
      {
        name: 'large',
        width: 1400,
      },
      {
        name: 'xlarge',
        width: 1920,
      },
      {
        name: 'og',
        width: 1200,
        height: 630,
        crop: 'center',
      },
    ],
  },