HTML-gids

Afbeeldingen

<img src="plaatje.gif" width="200" height="300" border="0" alt="Een beschrijvende tekst bij de afbeelding">

Hierboven ziet u een voorbeeld van de code voor een afbeelding. Er is geen sluittag. Deze code bevat een verwijzing naar het adres van de afbeelding. De afbeelding maakt zelf dus geen deel uit van de pagina, maar wordt gevormd door een apart bestand dat door de browser wordt ingevoegd.

src="..." : de verwijzing naar het adres van de afbeelding die wordt ingevoegd
   src="plaatje.gif" : naar een afbeelding in dezelfde map
   src="mapnaam/plaatje.gif" : naar een afbeelding in de map 'mapnaam'
   src="../plaatje.gif" : naar een afbeelding in de bovenliggende map
   src="http://www.website.nl/plaatje.gif" : naar plaatje op een andere website
width="..." : de breedte van de afbeelding in pixels
height="..." : de hoogte van de afbeelding in pixels
border="..." : de dikte van het kader om de afbeelding (0 is geen kader; dat is vooral handig wanneer de afbeelding gebruikt wordt als link, want standaard krijgen afbeeldingen die als link gebruikt worden een kader)
alt="..." : een beschrijvende tekst die zichtbaar wordt als u met de muis het plaatje aanwijst

De bestandsformaten die voor afbeeldingen in een HTML-pagina gebruikt mogen worden zijn .jpg en .gif. Beide formaten hebben hun eigen manier om een afbeelding zo efficiënt mogelijk op te slaan, dus met gebruik van zo weinig mogelijk geheugenruimte. Want hoe kleiner een bestand is, hoe sneller het geladen kan worden. Daarbij is .jpg het beste bruikbaar voor complexe afbeeldingen met veel kleuren zoals foto's en .gif meer voor de wat eenvoudiger afbeeldingen met grote effen kleurvlakken. Een .gif plaatje bevat namelijk maximaal slechts 256 kleuren. Voor foto's is dat meestal te weinig, al kunt u de betere programma's wel zo instellen dat bij het omzetten naar een .gif bestand juist die kleuren gebruikt worden die het beste resultaat geven. Echter, .gif twee voordelen ten opzichte van .jpg. U kunt met .gif meerdere afbeeldingen (beeldramen) samenvoegen in 1 bestand, waarbij die afbeeldingen na elkaar worden getoond en er een animatie ontstaat. En u kunt met .gif een kleur selecteren die transparant moet worden weergegeven, waardoor de afbeelding gedeeltelijk doorzichtig wordt en de pagina-achtergrond er doorheen komt. Op die manier kunt u bijvoorbeeld ronde afbeeldingen maken. (Een ronde afbeelding is gewoon rechthoekig, maar u geeft alles wat buiten het rondje staat 1 effen kleur, die u vervolgens doorzichtig maakt; u ziet dan alleen nog maar het rondje.)

U kunt in de meeste tekenprogramma's bij het opslaan van de afbeeldingen instellingen kiezen die de bestandsgrootte nog verder kunnen inperken. Bij .jpg kunt de u de effening en de compressie verhogen. Bij .gif kunt u het aantal kleuren verlagen. Dat heeft allemaal wel gevolgen voor de kwaliteit van de afbeelding, maar lang niet altijd is dat meteen te zien. Zoek dus steeds naar die insteling waarbij de bestandgrootte zo klein mogelijk en de kwaliteit nog net aanvaardbaar is. Op die manier zorgt u er voor dat de laadtijd van uw pagina's optimaal blijft.

Start | Basis | Links | Opmaak | Kleuren | Afbeeldingen | Tabellen | Opsommingen | Formulieren | Frames | Speciale tekens | Meta-tags