Performance

Wat heb ik gedaan

Ik heb met behulp van het <picture> element ervoor gezorgd dat de tekenmethodes een fallback hebben (.png) voor het geval dat de browser van de gebruiker het standaard formaat van de afbeeldingen niet ondersteund (.webp).

In de nieuwe code wordt in het geval dat .webp niet ondersteund wordt, de extensie webp vervangen door png. Vrijwel alle browsers supporten png dus zo kan de gebruiker toch nog de website gebruiken.

Standaard zal webp gebruikt worden omdat dat aangegeven is door de type="image/webp" in het <source> element. Browsers gebruiken het MIME type en niet de file extensie blijkbaar om te bepalen hoe ze de url van de image moeten processen. Het aangegeven MIME type is webp dus. (Source: MDN web docs).

Het <picture> element zal de eerste source gebruiken die toepasselijk is en dat is in de meeste gevallen dus de webp. Maar in het unieke geval dat webp niet mogelijk is zal het dus hierdoor png gaan gebruiken. (Source: W3 schools)

Code

Oud

    <img
        class={method.categories[0].title.replaceAll(" ", "-")}
        src={method.template.url}
        alt={"Voorbeeld van " + method.title}
        loading="lazy"
    />

Nieuw

    <picture>
        <source
            type="image/webp"
                srcset={method.template.url}
                class={method.categories[0].title.replaceAll(" ", "-")}
                loading="lazy"
        />
        <img
            src={method.template.url.replace(":webp", ":png")}
            alt={"Voorbeeld van " + method.title}
            class={method.categories[0].title.replaceAll(" ", "-")}
            loading="lazy"
        />
    </picture>

Als je goed oplet merk je dat ik de extensie :webp replace met :png. Huh, hoort dat niet .webp en .png te zijn? Nee want omdat ik de images uit Hygraph haal ziet de url er dus zo uit "https://media.graphassets.com/output=format:webp/ZOilM43MR7KV7JH7pcUC". Zoals je ziet staat er standaard : voor het formaat en niet .