Misschien is het handig om een fallback element te zetten op je images. Mocht iemand een oude of Chinese browser hebben dan kunnen ze geen avif en webp gebruiken.

Met loading="lazy" kan je ervoor zorgen dat je pagina nog snel inlaadt.

En als je een width en height in de HTML meegeeft kan je lay-out shifts voorkomen.

Bij elke section mis je een H tag. Dit is nodig voor semantiek.

Klik hier

Als je dit in een validator stopt, krijg je het zelfde resultaat en suggestie:
''Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed.

From line 4, column 1; to line 4, column 22

tie')%>↩↩↩< section class="main">↩ <''

Waarom heb je een class='main'? Zie hier: maintag

Verander dit naar < main> nu het nog kan, is veel semantischer. Of heeft het een reden?

hier

Kan handig zijn als je bijvoorbeeld iets snel wilt veranderen in size. Dan hoef je niet helemaal te zoeken, stel er komt meer css bij of meer images van dezelfde size. :)