This image has a regular src attribute with the original URL. Since the browser might already have downloaded it, on faster connections, by the time the JS is executed, it doesn't make sense to try to replace it.
This image has a 1x1 px gif placeholder as src and the original URL is in the data-spai-src attribute. The JS will first create a LQIP URL for the image https://cdn.shortpixel.ai/cstm/q_lqip+ret_img/http://shortpixel.com/img/tests/condor.jpg that will be loaded instead of the image, then only when and if the image is viewed, as the user scrolls down the page, the optimized image will be loaded.
This image has no placeholder as src and no alt text. Both of them are bad practice but can happen in real life. The data-spai-src contains the URL without domain.
This image has a placeholder and alt text, path-only URL and is scaled by css to 400px width. While the original image is 1024px wide, the optimized CDN URL provides an image having the exact size needed after scaling.
This image has a different transparent placeholder.
This image has an inline blank SVG placeholder as src. There is no data-spai-src as the placeholder contains the original URL, width and height as metadata. The role of the inline blank SVG placeholder is to reserve the exact space that the original image would take in the final page layout, thus preventing page reflows when the final image is in place.
This image has an inline LQIP SVG placeholder as src. There is no data-spai-src as the placeholder contains the original URL, width and height as metadata. This is the most advanced usage of the JS because it eliminates the need for another request to the CDN for the LQIP but it needs a server-side layer that caches the LQIP's and includes them in the pages when generating the HTML. The ShortPixel Adaptive Images plugin does this for WordPress sites.