Idea: Any way to respect responsive image size?

[Buda9]

I'm not sure how this can be done or is it possible, but on Ghost we have many image sizes depending on device and screen size, e.g.:
w300: https://cms.vokabula.com/content/images/size/w300/2021/04/blog5-7-problema-kod-u-enja-njema-kog-2.png
w600: https://cms.vokabula.com/content/images/size/w600/2021/04/blog5-7-problema-kod-u-enja-njema-kog-2.png

However, on headless cms there is only one image size, original one, e.g.:

https://cms.vokabula.com/content/images/2021/04/blog5-7-problema-kod-u-enja-njema-kog-2.png

If we have +100 articles, this can cause heavy page size, e.g.:

https://postimg.cc/gallery/rMJWYzX

PS. images have been optimised and reuploaded to ghost image directory, but still too heavy...

Do you think this is possible, styxlab?

[styxlab]

When I visit https://blog.vokabula.com/ it looks like you have opted-out of the image optimization feature. As you can see on my demo page at https://next.jamify.org/, images on the index page are scaled down and converted to webp, e.g.:

https://next.jamify.org/_next/image?url=https%3A%2F%2Fstatic.gotsby.org%2Fv1%2Fassets%2Fimages%2Fwelcome-to-ghost.png&w=680&q=80

Note that the scaling is performed based on both content context (images are smaller on index page) and actual device size (which can be controlled in next.config.js).

The idea of this repo is to use full-size image urls (fetched from your headless CMS) and use the Next.js image optimizer to serve smaller versions where needed. This is much more flexible than Ghost's approach and should generally lead to more performant image serving.

[Buda9]

Got it. It looks like that in my case netlify-plugin-image-optim was preventing image optimisation. After I disable it, images got optimised. Thank you very much for prompt response. Have a good one! :)