Afbeeldingen invoegen met HTML - hoe het werkt
Als u een afbeelding op uw website wilt invoegen met HTML, gebruikt u de img-tag. Lees hier hoe dit precies werkt en waar u op moet letten.
Hoe afbeeldingen in te voegen met HTML - de basis
- Met de dag
kan afbeeldingen invoegen. - De afbeeldingsbron wordt binnen de tag gegeven:
voegt het bestand "testbild.webp" in uit de submap "afbeeldingen" op de website. - Externe bronnen via URL zijn ook mogelijk:
integreert het CHIP-logo van onze servers.
HTML-kenmerken voor ingesloten afbeeldingen
Verschillende attributen kunnen worden toegevoegd binnen de img tag:
- Gebruik "breedte" en "hoogte" om de grootte van de afbeelding op de website te bepalen: De afbeelding
wordt vierkant weergegeven met een zijlengte van 100 pixels. - Met "alt" definieert u een alternatieve tekst die wordt weergegeven als de betreffende afbeelding niet kan worden geladen. Stel dit kenmerk altijd in wanneer u afbeeldingen met HTML invoegt.
- Het kenmerk "border" geeft de dikte van het frame in pixels aan. Een foto met
heeft een frame dat relatief dik is met vijf pixels. - Gebruik "uitlijnen" om de afbeelding uit te lijnen. Waarden voor dit kenmerk zijn "onder", "boven", "midden", "links", "rechts" en "midden".
- Met "hspace" en "vspace" kunt u (horizontaal en verticaal) een afstand tot de afbeelding instellen.
Welk formaat moet ik gebruiken?
Er zijn verschillende afbeeldingsindelingen die u in de HTML-code kunt opnemen.
- JPG: afbeeldingen in JPG-indeling worden het meest gebruikt voor webpagina's. Dit formaat vertegenwoordigt 16, 7 miljoen kleuren. Bovendien kan een JPG zeer goed worden gecomprimeerd. Het afbeeldingsbestand kan daarom erg klein worden gemaakt, wat een snelle laadtijd mogelijk maakt.
- PNG: het PNG-formaat kan ook 16, 7 miljoen kleuren weergeven en kan worden gecomprimeerd. Het voordeel ten opzichte van het JPG-formaat is dat de compressie mogelijk is zonder verliezen.
- Gebieden die zijn gedefinieerd in PNG-indeling kunnen ook transparant worden weergegeven. Zeer oude browsers hebben echter problemen met het weergeven van transparanten.
- GIF: Als u bewegende afbeeldingen met HTML wilt invoegen, is het GIF-formaat geschikt. In dit formaat worden slechts 256 kleuren weergegeven en compressie vindt automatisch plaats zonder instellingsopties.
- Het GIF-formaat is het meest geschikt voor kleine, geanimeerde afbeeldingen of logo's. Om ervoor te zorgen dat logo's harmonieus in een pagina passen, kunnen transparanten worden gebruikt in GIF-indeling zoals een PNG.
HTML voorbeeld
- Dit integreert het CHIP-logo van onze website.
- Het wordt weergegeven met een hoogte van 100 pixels en een breedte van 200 pixels.
- Als het niet kan worden geladen, wordt "CHIP-Logo" weergegeven als lege tekst.
- De foto wordt omlijst door een frame van twee pixels.
- Het is rechts uitgelijnd en bevindt zich op 50 pixels van andere zijelementen.