TESTING SPAI WITH DIFFERENT IMAGES

Image not meant to be replaced:

alt alt

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:

alt alt

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

some alt text

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:

alt alt
alt alt
alt alt

Native lazy and not included

alt alt