How to configure other image optimiser in Github pages?

[mllamazares]

I want to integrate image optimization into my blog (using this template). The README of this repository stays:

As the template uses next/image for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like Netlify or Github Pages. An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the next/image component with a standard tag. See next/image documentation for more details.

Then, I've checked the Next.js documentation.

To use the imgix provider, I've tried the following:

1. Created an imgix account.

2. Configured a new source by this way:

3. Added the following in the module.exports of the next.config.js file:

     images: {
         deviceSizes: [320, 420, 768, 1024, 1200],
         loader: 'imgix',
         path: 'https://mllamazaresblog.imgix.net'
         domains: ['mllamazaresblog.imgix.net'],
     },

4. After deploying to GitHub pages, the image sources are replaced as expected (i.e. https://mllamazaresblog.imgix.net/static/images/bigaf.jpg) but the imgix server has not uploaded any image and nothing is displayed.

I have the following build command in the package.json:
"build": "next build && next export",

I bet there is some missing step. Has anyone faced this problem? Is there another image provider with a smoother implementation?

[timlrx]

Yes, you're right. If you use an external provider you would have to upload the image there.

[mllamazares]

Thanks for the info, @timlrx! AFAIK, imgix does not allow you to upload images by hand, but you need to set a source:

Just in case, I've sent a query to their support team.

Anyway, do you know if any provider gives you the option to upload images automatically, so I don't need to constantly mess up with their website? Or just another example of how to optimize the images using GitHub pages instead of Vercel. Many thanks!