But these seems to mean manually editing every single image tag. I use Rapidweaver to build websites and that makes it easy to add images or warehoused images, but you seem to be saying I'd then need to go into the code, rip out what Rapidweaver has done, and manually change every occurrence of src with data-spai-src. That just seems like a MASSIVE amount of work on even a medium sized site, let alone a big one, and it means the various CMS tools that I use, such as Total CMS, would no longer work as any images would default to src.

Am I right or is there a much easier way?

P.S. I am already a Shortpixel user, but wanted to add some more codes so as to make use of the CDN.

YOUR INSTRUCTIONS FOR NON-WORDPRESS SITES

Now you’ll have to replace all the src attributes of your images HTML markup with data-spai-src. For example, if you had this URL:

<img class="aligncenter" src="https://shortpixel.com/img/robot_lookleft_wink.png" alt="robo winks" width="600" height="933" />

You’ll have to change it to:

<img class="aligncenter" data-spai-src="https://shortpixel.com/img/robot_lookleft_wink.png" alt="robo winks" width="600" height="933" />

This step depends a lot on your website and the way it is built. It may require some replacements in the DataBase, or the result may be achieved through a code that replaces src with data-spai-src.