Klikbare Afbeeldingen

Klikbare afbeeldingen zijn afbeeldingen op een webpagina waarop geklikt kan worden, meestal om naar een andere webpagina te navigeren of andere acties uit te voeren. Deze aanpak is doorgaans nodig bij webwinkels. Gebruikers zijn gewend om op een afbeelding te klikken en een kaart met een volledige productbeschrijving en prijs te krijgen.

Om een afbeelding klikbaar te maken, kan de <img>-tag binnen een <a>-tag worden geplaatst. Bijvoorbeeld:

In dit voorbeeld specificeert de <a>-tag de URL om naartoe te linken in het href-attribuut, en de <img/>-tag geeft de weer te geven afbeelding aan. Wanneer de gebruiker op de afbeelding klikt, navigeert de browser naar de URL die is opgegeven in het href-attribuut.

Afbeeldingsonderschrift

De HTML-elementen figure en figcaption kunnen worden gebruikt om een onderschrift aan een afbeelding op een webpagina te koppelen. Hier volgt een voorbeeld:

• figure: element bevat zowel de figcaption als de img elementen;
• figcaption: specificeert de bijschrifttekst, zichtbaar voor gebruikers;
• img: specificeert de afbeelding die wordt weergegeven.

Afbeeldingsoptimalisatie

Dit is belangrijk voor webpagina's, waar grote afbeeldingsbestanden de laadtijden kunnen vertragen en de website traag kunnen laten aanvoelen. Door de volgende tips te volgen, kan de algehele prestatie en toegankelijkheid van de website worden verbeterd.

• Afbeeldingen verkleinen tot het juiste formaat. Pas afbeeldingen aan tot het formaat waarin ze op de webpagina worden weergegeven, in plaats van grote afbeeldingen te uploaden en deze met HTML of CSS te verkleinen;
• Gebruik geschikte bestandsformaten. Over het algemeen worden JPEG's gebruikt voor foto's, PNG's voor grafische afbeeldingen en afbeeldingen met transparantie. Vermijd grotere BMP- of TIFF-bestanden;
• Afbeeldingen comprimeren. Er zijn veel online tools beschikbaar waarmee afbeeldingen kunnen worden gecomprimeerd zonder kwaliteitsverlies. Doe dit voordat u afbeeldingen op de website uploadt.