Kijk vandaag online naar een webpagina en u zult merken dat zij bepaalde dingen gemeen hebben. Een van die gedeelde eigenschappen zijn afbeeldingen. De juiste afbeeldingen voegen zoveel toe aan de presentatie van een website. Sommige van die afbeeldingen, zoals het logo van een bedrijf, helpen de site te marketen en verbinden die digitale entiteit met uw fysieke bedrijf.
Als u een afbeelding, pictogram of afbeelding aan uw webpagina wilt toevoegen, moet u de tag gebruiken in de HTML-code van een pagina. U plaatst de IMG tag in uw HTML precies waar u de afbeelding wilt weergeven. De webbrowser die de pagina-code weergeeft, vervangt deze tag door de betreffende afbeelding zodra de pagina is bekeken. Teruggaand naar ons bedrijfslogo-voorbeeld, hier is hoe u die afbeelding aan uw site zou kunnen toevoegen:
Beeldattributen
Als u naar de bovenstaande HTML-code kijkt, ziet u dat het element twee kenmerken bevat. Elk van hen is vereist voor de afbeelding.
Het eerste kenmerk is "src". Dit is vrij letterlijk het afbeeldingsbestand dat u op de pagina wilt weergeven. In ons voorbeeld gebruiken we een bestand met de naam "logo.png". Dit is de afbeelding die de webbrowser zou weergeven toen deze de site weergeeft.
Je zult ook opmerken dat vóór deze bestandsnaam wat extra informatie, "/ images /" is toegevoegd. Dit is het bestandspad. De aanvankelijke schuine streep vertelt de server om naar de hoofdmap van de map te kijken. Het zoekt dan naar een map met de naam "images" en tenslotte naar het bestand "logo.png". Het gebruik van een map met de naam "images" om alle grafische afbeeldingen van een site op te slaan, is een vrij courante praktijk, maar uw bestandspad zou worden gewijzigd in alles wat relevant is voor uw site.
Het tweede vereiste kenmerk is de "alt" -tekst. Dit is de "alternatieve tekst" die wordt weergegeven als de afbeelding om de een of andere reden niet wordt geladen. Deze tekst, die in ons voorbeeld "Bedrijfslogo" luidt, wordt weergegeven als de afbeelding niet kan worden geladen. Waarom zou dat gebeuren? Een verscheidenheid aan redenen:
- Onjuist bestandpad
- Onjuiste bestandsnaam of verkeerd gespeld
- Transmissiefout
- Bestand is van de server verwijderd
Dit zijn slechts een paar mogelijkheden waarom de opgegeven afbeelding mogelijk ontbreekt. In deze gevallen zou onze alt-tekst in plaats daarvan worden weergegeven.
Alt-tekst wordt ook gebruikt door software voor schermlezers om de afbeelding te "lezen" voor een bezoeker met een visuele beperking. Omdat ze de afbeelding niet kunnen zien zoals wij doen, laat deze tekst hen weten wat de afbeelding zelf is. Dit is waarom alt-tekst vereist is en waarom het duidelijk moet aangeven wat het beeld is!
Een veel voorkomend misverstand van alt-tekst is dat het bedoeld is voor zoekmachines. Dit is niet waar. Terwijl Google en andere zoekmachines deze tekst lezen om te bepalen wat de afbeelding is (onthoud dat ze uw afbeelding ook niet kunnen "zien"), zou u geen alt-tekst moeten schrijven om alleen in te zetten op zoekmachines. Auteur duidelijke alt-tekst die is bedoeld voor mensen. Als u ook enkele zoekwoorden aan de tag kunt toevoegen die aantrekkelijk zijn voor zoekmachines, is dat prima, maar zorg er altijd voor dat de alt-tekst zijn primaire doel dient door aan te geven wat de afbeelding is voor iedereen die het grafische bestand niet kan zien.
Andere attributen
De IMG tag heeft ook twee andere kenmerken die u mogelijk in gebruik ziet wanneer u een afbeelding op uw webpagina plaatst: de breedte en de hoogte. Als u bijvoorbeeld een WYSIWYG-editor zoals Dreamweaver gebruikt, wordt deze informatie automatisch voor u toegevoegd. Hier is een voorbeeld:
De BREEDTE en HOOGTE attributen vertellen de browser de grootte van de afbeelding. De browser weet dan precies hoeveel ruimte in de lay-out moet worden toegewezen en kan naar het volgende element op de pagina gaan terwijl de afbeelding wordt gedownload. Het probleem met het gebruik van deze informatie in uw HTML is dat u niet altijd wilt dat uw afbeelding op precies dezelfde grootte wordt weergegeven. Als u bijvoorbeeld een responsieve website heeft waarvan de schaalwijzigingen worden gewijzigd op basis van het bezoekersscherm en de apparaatgrootte, wilt u ook dat uw afbeeldingen flexibel zijn. Als u in uw HTML aangeeft wat de vaste grootte is, vindt u het zeer moeilijk om dit te omzeilen met responsieve CSS-mediaquery's. Om deze reden, en om een scheiding van stijl (CSS) en structuur (HTML) te behouden, is het raadzaam dat u geen breedte- en hoogtekenmerken aan uw HTML-code toevoegt.
Eén opmerking: als u deze instructies voor het verkleinen niet gebruikt en geen grootte opgeeft in CSS, wordt de afbeelding in de browser standaard weergegeven met de standaardgrootte.
Bewerkt door Jeremy Girard
