thomasorus / kaku Goto Github PK

Kaku image shortcut should do better:

• Use the source html element to provided different types of images (webp, jpg)
• Use the srcset attr to provide different image sizes
• Use loading = lazy on the image tag
• Each image should exist in 3 to 4 versions : 300, 600, 900 and maybe 1200 pixels.

The code when using a figcaption should look like this:

 <figure>
        <picture>
            <source type="image/webp" srcset="
                https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb-400.webp 400w,
                https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb-800.webp 800w,
                https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb.webp
              "
              />
    
            <img srcset="
                https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb-400.jpg 400w,
                https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb-800.jpg 800w,
                https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb.jpg
              " src="https://raw.githubusercontent.com/Thomasorus/Ronbun/master/dist/media/hhkb-400.jpg"
                alt="My keyboard script" loading="lazy" />
        </picture>
        <figcaption>This is my super figcaption text</figcaption>
    </figure>

Demo here

Kinda unsure about how to polyfill lazy loading. Most of the time it requires having src and srcset replaced by data-src and data-srcset in the html. If lazy loading works, a js script changes them back to src and srcset and native lazy load is automatic. If it's not supported, the script has to use intersection observer to change src and srcset on the fly when they arrive in the viewport.

But if both lazy loading and intersection observer fail, or the user disabled javascript, then img and source elements are left without valid src and srcsets, so no image appears. The only solution is then to use a noscript element and copy duplicate the img/source html with correct src and srcset. But that doubles the amount of html, the other img and source elements are still there which is bad from an accessibility standpoint, and so are their alt and figcaption tags which are creating duplicating with the ones in the noscript element.