Werken met klikbare afbeeldingen, bijschriften en optimalisatie

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 te krijgen met een volledige productbeschrijving en prijs.

Om een afbeelding klikbaar te maken, kun je de <img>-tag binnen een <a>-tag plaatsen. Bijvoorbeeld:

• View the Code
• Open the Live Page

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

Afbeeldingsonderschrift

Je kunt de HTML-elementen figure en figcaption gebruiken om een onderschrift aan een afbeelding op een webpagina te koppelen. Hier is een voorbeeld:

• figure: element bevat zowel de figcaption als de img elementen;
• figcaption: specificeert de bijschrifttekst, zichtbaar voor gebruikers;
• img: specificeert de weer te geven afbeelding.

Afbeeldingsoptimalisatie

Dit is belangrijk voor webpagina's, waar grote afbeeldingsbestanden de laadtijd van pagina's kunnen vertragen en de website traag kunnen laten aanvoelen. Door de volgende tips te volgen, kun je de algehele prestaties en toegankelijkheid van de website verbeteren.

• Afbeeldingen op het juiste formaat maken. Maak afbeeldingen op het formaat waarop ze op de webpagina worden weergegeven, in plaats van grote afbeeldingen te uploaden en deze te verkleinen met HTML of CSS;
• 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 je afbeeldingen kunt comprimeren zonder kwaliteitsverlies. Doe dit voordat je afbeeldingen naar de website uploadt.