Smart Image AC Extension

Wappler General Need Help
1

I am currently working on an extension for a <smart-img> element that will replace the <img> element. The idea is to take a simple src attribute and turn it into a fully optimised, responsive, progressively enhanced image, handling lazy loading, placeholders, format negotiation, art direction and accessibility automatically.

For this I need the ability to show the functionality of this in the UI (hjson file):

image
image509×128 2.01 KB

Any assistance will be greatly appreciated.

2

This is what I have so far (still under development):

image
image512×1026 30.4 KB

The HTML

<smart-img id="smartimg1" src="/assets/images/01635369_img_03.jpg" src-webp="/assets/images/01635369_img_13.jpg" src-avif="/assets/images/01635369_img_10.jpg"></smart-img>

Apologies for not using the correct image type, still testing and so far, it seems to work as intended

3

Please disregard this post, I have found an alternative method which mimics the srcset.