How is everyone handling image optimization of images that are stored in an external headless CMS.
My project is in headless-api mode and it is deployed via webhooks to Netlify as a Next.js app. I am fetching a list of blog posts from the CMS via the GraphQL Data Fetcher component. Each blog post card contains a plasmic image component which takes the source url of the primary image of each post entry.
Currently the images end up being loaded directly from the external CMS instead of going through Plasmic’s image optimization pipeline. I am a developer but I would like it for designers I work with to be able to drive most of the frontend work from within Plasmic Studio using the headless-api mode instead of codegen.
Here are some solutions I can think of (not sure which is best):
- Override the Plasmic Image component with the Next.js’s
<Image />component from my codebase.
- Create a custom image code-component which wraps the Next.js
<Image />component and instruct my designers to use this component when authoring dynamic, repeated components like the Blog Card.
- Do the image optimization on the CMS side. (However, my current CMS setup doesn’t have the ability to build responsive images on-demand and at the ‘edge’ nor does it automatically convert images to webP format. Maybe I can proxy my CMS instance with Cloudflare or integrate it with another CDN service.
The ideal solution for me would be able to access Next.js’ built-in image optimization paired with hosting platforms like Vercel or Netlify like I usually do when I build sites purely from code while still giving my designer the power of building in Plasmic Studio.