Awesome

with-preview

^{Photo by Pierre Bouillot on Unsplash}

A built-in Custom Element based on IntersectionObserver able to fade in good quality jpg over their preview version.

It fallbacks all the way down to IE 9, simply replacing on the fly the preview source with its good quality counter-part.

Live demo

Example

<script async src="https://unpkg.com/with-preview/es.js"></script>
<img is="with-preview" src="any-image.preview.jpg">

Images will drop the .preview part of the src and will fade in the non .preview version of the same image once the document shows the preview, and after the non-preview version is loaded.

Previews can be manually generated or based on µcompress or µcdn previews.

# example: will create test.preview.jpg
npx ucompress --preview --source test.jpg