TESTING SPAI WITH DIFFERENT IMAGES

Image not meant to be replaced:

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.

Image replaced based on the attribute data-spai-src containing the full URL:

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/jsai/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.

Attribute data-spai-src containing only the path:

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.

With alt, scaled in CSS

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.

with default transparent placeholder

This image has a different transparent placeholder.

without size attributes:

without size attributes and with 1x1 placeholder:

A few more images that will be lazy-loaded:

Native lazy and not included