first commit

class CerticImgSet extends HTMLElement {

    constructor() {

        super();

        let manifest = this.getAttribute("manifest");

        this.urlRoot = manifest.substring(0, manifest.length - ("infos.json".length - 1));

        this.alt = this.getAttribute("alt");

    }

    render() {

        /* First breakpoints follow Bootstrap 5 and then extends them for bigger pictures */

        this.innerHTML = `

            <picture>

                <source media="(max-width: 575px)" srcset="${this.urlRoot}full/^575,/0/default.jpg" />

                <source media="(min-width: 576px) and (max-width: 767px)" srcset="${this.urlRoot}full/^767,/0/default.jpg" />

                <source media="(min-width: 768px) and (max-width: 991px)" srcset="${this.urlRoot}full/^991,/0/default.jpg" />

                <source media="(min-width: 992px) and (max-width: 1199px)" srcset="${this.urlRoot}full/^1199,/0/default.jpg" />

                <source media="(min-width: 1200px) and (max-width: 1399px)" srcset="${this.urlRoot}full/^1399,/0/default.jpg" />

                <source media="(min-width: 1400px) and (max-width: 1999px)" srcset="${this.urlRoot}full/^1999,/0/default.jpg" />

                <source media="(min-width: 2000px) and (max-width: 2999px)" srcset="${this.urlRoot}full/^2999,/0/default.jpg" />

                <source media="(min-width: 3000px) and (max-width: 3999px)" srcset="${this.urlRoot}full/^3999,/0/default.jpg" />

                <source media="(min-width: 4000px) and (max-width: 4999px)" srcset="${this.urlRoot}full/^4999,/0/default.jpg" />

                <source media="(min-width: 5000px)" srcset="${this.urlRoot}full/^5000,/0/default.jpg" />

                <img src="${this.urlRoot}full/^575,/0/default.jpg" alt="${this.alt}" loading="lazy"/>

            </picture>`;

    }

    connectedCallback() {

        if (!this.rendered) {

            this.render();

            this.rendered = true;

        }

    }

}

customElements.define("certic-imgset", CerticImgSet);

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="/certic-imgset.js" type="module"></script>

    <style>

        img{width: 100%}

    </style>

</head>

<body>

<certic-imgset manifest="https://iiif.unicaen.fr/jama/58/91/58916a35f2caefcdb7487ba510f27c71cc3026a2689a6cee9128c902c26e7e28/info.json" alt="super image qui va bien pour dje"></certic-imgset>

</body>

</html>