What is the best way to serve optimized images?

What is the best way to optimise and serve images for the following combination of tools/services used?

Combination of tools: Jekyll + Netlify + Netlify CMS and Github.

Now first of all I’m not entirely sure if this is the right place to ask this specific question and maybe I’m better off at the Jekyll forum(s). If the mods or anyone else thinks this is the case please comment politely and refer me to the best sources. If this is a good enough place to ask then I’m hoping that this question will built some kind of definitive guide full of the best and tried.

Option 1. Netlify Large Media
I have read and heard about Netlify Large Media(NLM), but I believe they do not support webp extension out of the box?

Option 2. Adding gulp to Jekyll
The next one I read about is adding a Gulp workflow to the project but this means adding npm and some configuration in the form of tasks so it can let Jekyll do what it does best first and after run tasks to optimize the images? Not very savvy at this so before I dive into this whole new Gulp workflow does anyone use this workflow?

Option 3. Jekyll Asset Pipeline
This one I really tried but couldn’t get it to work because it looks like I need to use hooks or something but I don’t really like to study ruby for this single feature. I just want to upload a single high res image image (not that high res but at least high enough so I can generate every other image size off of it for mobile desktop etc.)

Option 4. Cloudinary
This one just popped on my rader. Anyone used this? Is the free version enough? Any caveats?

Till this day I’m still optimizing lots of images myself. Well not really totally myself because I use some shell scripts to generate webp images and reasonably dimensions for the original image to chop off some bits first, but I really, really, reaaaaallly need to automate this before I burn out on this single issue.

Elaborative answers are greatly appreciated :slight_smile: