De afbeeldingen goed enhanced maken

[SamaraFellaDina]

Je wilt een afbeelding goed inladen wanneer je een pagina opent. Dus wil je deze het laagste bestandstype geven.

Welke bestanden kan je het beste gebruiken?

• avif is het laagste bestandstype wat je kan gebruiken.
• webp is ook een erg goede optie voor gecomprimeerde bestanden Het enige probleem is dat het niet overal wordt ondersteunt, dus wat kan je het beste doen?

code

<picture>
  <source srcset="afbeelding.avif" type="image/avif">
  <source srcset="afbeelding.webp" type="image/webp">
  <img src='foto.jpg' alt="foto" width="512" height="256">
</picture>

Wat is het voordeel van deze code?

• de afbeelding heeft een meegegeven grootte en breedte, waardoor er geen lay-out shift is
• Je geeft aan de browser aan dat er andere bestanden moeten worden aangeroepen om de preformance goed te houden.

[SamaraFellaDina]

https://github.com/SamaraFellaDina/user-experience-enhanced-website/commit/e0e7a9965283a1829995b7ae377d908bffe72fa8

In deze commit heb ik het ingevoegd met mijn code, het enige probleem waar ik tegenaan loop is dat het een WP API is waarin ik geen wijzigingen of toevoegingen kan doen, waardoor hij blijft terugvallen op de .jpg files.

Zou er een manier zijn om dit op te lossen?

[SamaraFellaDina]

          <picture>
            <source srcset="https://redpers.nl/wp-content/uploads/2024/04/<%=article.jetpack_featured_media_url%>?format=avif" type="image/avif">
            <source srcset="https://redpers.nl/wp-content/uploads/2024/04/<%=article.jetpack_featured_media_url%>?format=webp" type="image/webp">

            <img src="https://redpers.nl/wp-content/uploads/2024/04/<%=article.jetpack_featured_media_url%>"
            alt="artikel afbeelding"
            width="<%=article.yoast_head_json.og_image[0].width%>" 
            height="<%=article.yoast_head_json.og_image[0].height%>">
          </picture>

Voor nu ziet de code er zo uit, alleen kan die het niet ophalen. Dus ik laat het voor nu even zo.

[SamaraFellaDina]

WP API heeft een plugin waarbij img bestanden worden omgezet naar een .webp bestand, dus voor deze opdracht hoef ik de code niet toe te passen. Voor de volgende keer kan je eventueel deze code gebruiken, mocht het niet van toepassing zijn.

          <picture>
            <source srcset="<%=article.jetpack_featured_media_url%>?format=avif" type="image/avif">
            <source srcset="<%=article.jetpack_featured_media_url%>?format=webp" type="image/webp">

            <img src="<%=article.jetpack_featured_media_url%>"
            alt="artikel afbeelding"
            width="<%=article.yoast_head_json.og_image[0].width%>" 
            height="<%=article.yoast_head_json.og_image[0].height%>">
          </picture>

[SamaraFellaDina]

KIjk anders lokaal om te kijken wat de browser doet met de opties