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.

data-spai-src 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/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.

data-spai-src - only 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:


with inline image placeholder SVG blank:


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.

With inline image placeholder SVG LQIP:


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.

A few more images that will be lazy-loaded by AI JS:

alt alt
alt alt
alt alt

Native lazy and not included

alt alt