Sätt i bilder med HTML - hur det fungerar
Om du vill infoga en bild på din webbplats med HTML använder du img-taggen. Läs här exakt hur detta fungerar och vad du måste se upp för.
Hur man sätter in bilder med HTML - grunderna
- Med dagen
kan infoga bilder. - Bildkällan anges i taggen:
infogar filen "testbild.webp" från undermappen "bilder" på webbplatsen. - Externa källor via URL är också möjliga:
integrerar CHIP-logotypen från våra servrar.
HTML-attribut för inbäddade bilder
Många attribut kan läggas till i img-taggen:
- Använd "bredd" och "höjd" för att bestämma storleken på bilden på webbplatsen: Bilden
visas fyrkant med en sidolängd av 100 pixlar. - Med "alt" definierar du en alternativ text som visas om respektive bild inte kan laddas. Du bör alltid ställa in detta attribut när du sätter in bilder med HTML.
- Attributet "border" anger ramens tjocklek i pixlar. En bild med
har en ram som är relativt tjock med fem pixlar. - Använd "justera" för att justera grafiken. Värden för detta attribut är "botten", "topp", "mitt", "vänster", "höger" och "mitt".
- Med "hspace" och "vspace" kan du (horisontellt och vertikalt) ställa in ett avstånd till bilden.
Vilket format ska jag använda?
Det finns olika bildformat som du kan inkludera i HTML-koden.
- JPG: JPG-format används oftast för webbsidor. Detta format representerar 16, 7 miljoner färger. Dessutom kan en JPG komprimeras mycket bra. Bildfilen kan därför göras mycket liten, vilket möjliggör en snabb laddningstid.
- PNG: PNG-formatet kan också visa 16, 7 miljoner färger och kan komprimeras. Fördelen med JPG-formatet är att komprimeringen är möjlig utan förluster.
- Områden definierade i PNG-format kan också visas på ett öppet sätt. Men mycket gamla webbläsare har problem med att visa OH-film.
- GIF: Om du vill infoga rörliga bilder med HTML är GIF-formatet lämpligt. Endast 256 färger visas i detta format och komprimering sker automatiskt utan några inställningsalternativ.
- GIF-formatet är bäst lämpat för små animerade bilder eller logotyper. För att säkerställa att logotyper passar harmoniskt på en sida kan OH-film användas i GIF-format som en PNG.
HTML-exempel
- Detta integrerar CHIP-logotypen från vår webbplats.
- Det visas med en höjd av 100 pixlar och en bredd på 200 pixlar.
- Om den inte kan laddas visas "CHIP-Logo" som tom text.
- Bilden är inramad av en tvåpixels ram.
- Den är högerjusterad och är 50 pixlar från andra sidoelement.