Een afbeelding definieer je met het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je een omschrijving op, welke in plaats van de afbeelding wordt weergegeven in tekst-georiënteerde browsers. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst, welke op de afbeelding volgt, eerder weergegeven. Soms worden de attributen WIDTH en HEIGHT gebruikt om een afbeelding groter of kleiner weer te geven dan hij eigenlijk is. Voorzichtigheid is echter op z'n plaats, omdat de kwaliteit van de afbeelding er vaak op achteruit gaat (zeker als er tekst in de afbeelding is opgenomen).
Afbeeldingen en foto’s laten een pagina leven. Als je een plaatje geselecteerd hebt, kan deze daarna nog op maat gemaakt worden voor het blogbericht of pagina. De titel van het plaatje kan veranderd worden, alsmede het onderschrift en de beschrijving. Daarnaast kan de indeling en het uiterlijk veranderd worden (2). Je kunt aangeven hoe het plaatje uitgelijnd moet worden ten opzichte van de tekst, waar de link naar moet verwijzen, en hoe groot het plaatje moet zijn. Daarnaast kun je zelfs de afbeelding zelf nog bewerken (3).
Als je alle afbeeldingen wilt ordenen of verwijderen, dan zit je goed in het menu Media. Op deze pagina kun je alle afbeeldingen beheren en uploaden. Als je met de muisaanwijzer over een plaatje zweeft, komen alle acties naar voren: bekijken, bewerken en verwijderen. Het uploaden van een nieuwe afbeelding gaat via Nieuw Bestand. Er is nog een manier waarop afbeeldingen bewerkt kunnen worden, en dat is via HTML. Daarmee is er volledige controle over hoe het plaatje eruit gaat zien. Het gedeelte achter ‘a href=’ is de link waar het plaatje naar verwijst. Wil je dat er nergens naar verwezen wordt, dan kun je alles tussen de twee haakjes ‘<>’ verwijderen, evenals ‘’. De img tag is leeg, wat betekent dat er geen afsluitende tag nodig is. src. Dit laat een alternatieve tekst zien, voor het geval de afbeelding niet wil laden. Zweef je met de cursor boven een afbeelding, dan wordt deze tekst ook getoond als tooltip, maar dit is alleen het geval in Internet Explorer. De oplossing die bij alle browsers werkt (Firefox et al.) is om het title attribuut te gebruiken naast alt.
Nu zou je eventueel de grootte van de afbeelding nog kunnen aangeven, met het height en width attribuut, en door het specificeren van de pixels of een percentage. Merk op dat door het op deze manier veranderen van de grootte je alleen maar de grootte verandert van de weergave, niet de grootte van de afbeelding zelf. Leef je niet teveel uit met afbeeldingen. GIF afbeeldingen ondersteunen slechts 8-bits kleuren met een maximum van 256 kleuren voor een afbeelding. GIF afbeeldingen ondersteunen ook transparantie. Afbeeldingen zijn een hoofdbestanddeel van elke web designer, dus is het erg belangrijk dat je begrijpt hoe je ze moet gebruiken.
Om een afbeelding toe te voegen aan je HTML-document hoef je alleen maar een regel tussen te voegen met de tag <img>. Hiermee worden de beelden vastgelegd in HTML. Om een afbeelding op een pagina weer te geven, moet je het attribuut src gebruiken. Src staat voor "source". De url verwijst naar de locatie waar het beeld is opgeslagen. Merk op hoe de img element wordt geopend en gesloten met dezelfde tag. De naam van de afbeelding hebben we "flowers" gegeven. ".jpg" vertelt de browser dat het te maken heeft met een afbeelding. Dit is om twee redenen: Ten eerste GIF-afbeeldingen alleen bestaan uit max 256 kleuren, terwijl de JPEG beelden bestaan uit miljoenen kleuren. Ten tweede het GIF-formaat is beter in het comprimeren van eenvoudige beelden dan de JPEG indeling, die is geoptimaliseerd voor meer complexe beelden. Hoe beter de compressie, hoe kleiner de grootte van het beeldbestand, hoe sneller je pagina's kunnen laden. De GIF en JPEG formaten zijn de meest voorkomende afbeelding bestandstypen, maar de laatste tijd, is het PNG formaat meer en meer populairder geworden (vooral ten koste van het GIF-formaat).
Het alt attribuut wordt gebruikt om een alternatieve beschrijving van een afbeelding te geven, als de afbeelding niet kan worden weergegeven. Dit is vooral belangrijk als de pagina langzaam wordt geladen of als de gebruiker een schermlezer gebruikt. Sommige browsers laten de tekst van het alt attribuut verschijnen in een kleine pop-up box wanneer de gebruiker zijn cursor plaatst op de afbeelding. De "width" en "height" attributen worden gebruikt om de breedte en hoogte van een afbeelding in te stellen. Het is goed om te weten dat de werkelijke grootte in kb of mb van het beeldbestand gelijk blijft ook al wordt de afbeelding op het scherm kleiner weergegeven. Probeer daarom je afbeelding zo min mogelijk te verkleinen met behulp van de "width" en "height" waarden. Probeer in plaats daarvan altijd het formaat van je afbeeldingen in een grafisch programma aan te passen.
In het verleden, gebruikten we het element <center> voor het centreren van afbeeldingen. Een afbeelding uitlijnen naar links of rechts kan heel makkelijk met CSS; dit werd vroeger in HTML gedaan met align="left" of "right". De afbeelding is toegevoegd aan een paragraaf, zodat de tekst rechts van de afbeelding wordt geplaatst. Ze trekken de aandacht, breken tekstblokken op, versterken het verhaal en beïnvloeden zelfs hoe bezoekers jouw merk zien. Of je nou een ervaren webontwikkelaar bent of net begint met WordPress, deze gids geeft je alles wat je moet weten over het toevoegen van afbeeldingen in HTML.
Deze tag fungeert als een placeholder en vertelt de browser waar hij de afbeelding die jij specificeert kan vinden en weergeven. Laten we de belangrijkste onderdelen van deze tag eens bekijken: <img> Dit vertelt de browser dat je een afbeelding wilt invoegen. Het is een zelfsluitende tag, wat betekent dat je geen aparte nodig hebt om ‘m te sluiten. src Dit essentiële attribuut staat voor “source”. Het geeft een cruciale beschrijving van de inhoud van de afbeelding. Zo schrijf je effectieve alt tekst: Wees Beschrijvend: Breng de essentie van de afbeelding duidelijk en beknopt over. Context is Belangrijk: Houd rekening met de rol van de afbeelding binnen de omringende inhoud. Houd het Kort: Streef naar een korte zin of een paar woorden. Vermijd Herhaling: Begin niet met “Afbeelding van…” of “Foto van…”.
Responsieve afbeeldingen zijn essentieel in een multi-device wereld. Afbeeldingen passen zich aan verschillende schermformaten aan voor een naadloze kijkervaring. Afbeeldingen uitlijnen kan met CSS of de HTML float eigenschap. Achtergrondafbeeldingen kunnen ook gebruikt worden als stijl van de pagina; dit kan met background in de body-code of via CSS. Specificeer altijd de afbeeldingsdimensies en voorkom onnodig grote bestanden. Het is beter om afbeeldingen vooraf te schalen in een grafisch programma dan door width/height in HTML te verkleinen.
Infographic: overzicht van de belangrijkste attributen van de img-tag en best practices voor alt-tekst, afmetingen en responsive afbeeldingen.
Hieronder volgt een vereenvoudigde checklist voor het toevoegen van afbeeldingen in HTML:
- Gebruik <img> met src en alt.
- Voeg optional width en height toe voor reserved ruimte.
- Beperk het verkleinen via HTML en schakel bij voorkeur naar grafische bewerking.
- Werk met responsive technieken zodat afbeeldingen mee schalen over apparaten.
- Gebruik descriptive alt-tekst voor toegankelijkheid.
De afbeelding kan ook als achtergrond dienen. Er zijn twee manieren afhankelijk van het soort afbeelding: als repeterende afbeelding gebruik je background met een GIF- of JPG-bestand, of voor niet-repeterende afbeeldingen werk je met background-image en CSS-stijlen voor betere controle over positionering en grootte.
Kernpunten en best practices
- Alt-tekst is cruciaal voor toegankelijkheid en SEO.
- Wees consistent met de afmetingen om layout verschuivingen te voorkomen.
- Gebruik CSS voor lay-out en uitlijning in plaats van oude HTML-attributen zoals align.
- Verklein afbeeldingen in grafische software voordat je ze uploadt.
- Maak afbeeldingen responsive zodat ze op alle apparaten goed passen.