Een hero image (in het Nederlands: hoofdafbeelding) is een groot, vaak volledig breedbeeld, afbeelding die opvallend wordt weergegeven op een webpagina, meestal bovenaan de pagina boven de vouw. Hero images worden vaak gebruikt om de aandacht van bezoekers te trekken en om de hoofdboodschap of het waardepropositie van de website of het product te laten zien.
Hero images zijn meestal van hoge kwaliteit en visueel aantrekkelijk, en ze kunnen statisch of dynamisch zijn (bijvoorbeeld, een carrousel van afbeeldingen of een video). Ze kunnen worden gebruikt in verschillende contexten, zoals op de homepage van een website, op een landingspagina of op een productpagina.
Hier is een voorbeeld van een hero image in HTML:
<div class="hero">
<img src="hero-image.jpg" alt="Hero image">
</div>De hero image kan worden opgemaakt met CSS, zoals om de afmetingen, uitlijning en andere aspecten van de afbeelding op te geven.
