Bilder på webbsidor

Bilder som man vill visa på sin webbsida lagras alltid som skilda filer, och man hänvisar till dem med hjälp av img-elementet i XHTML-dokumentet. Allmänna instruktioner om hur man placerar bilder på webbsidor:

  1. Lagra bilden i samma katalog som webbsidan. Om du har många bilder kan du skapa en egen katalog för dem (se kodexemplet nedan).
  2. Skriv in img-elementet på önskat ställe på webbsidan och ange bildens filnamn med hjälp av src-attributet: bilden läggs in på det ställe på webbsidan som du har valt. Ge bilden ett alternativt namn med alt-attributet:
<img src="hundbilder/vovve.jpg" alt="Kort på min Vovve!" />

Om du kopierar en bild från t.ex. Internet ska du komma ihåg att du behöver tillstånd av ägaren till bildens upphovsrätt om du vill publicera den på din egen webbsida.

Allmänt om hur man använder bilder på Internet

På webbsidor använder man vanligen bilder av format JPEG, GIF eller PNG. JPEG lämpar sig utmärkt för fotografier, medan filformaten GIF och PNG används för sina särskilda ändamål (läs mera om dessa filformat).

Om du vill kan du också utnyttja bilder i stilmallarna: med en CSS-mall kan man lägga in t.ex. en bakgrundsbild för vilket element som helst.

Ibland lägger folk in t.ex. digitala fotografier direkt på en webbsida. Sådana bilder är ofta mycket stora, och borde förminskas innan man publicerar dem på webben. Ofta gör man dock fel då man försöker bestämma storleken via HTML-koden.

Ett exempel på fel tillvägagångssätt: Ragnar har en digital bild på 3200×2100 pixlar. Han vill förminska bilden för att lägga in den på en webbsida, så han ger bildelementet en mindre storlek via attributen width och height.

<img src="luiro.jpg" width="600" height="200" alt="" />

Ett exempel på rätt tillvägagångssätt: Ragnar öppnar den digitala bilden med ett bildbehandlingsprogram och förminskar bilden till önskad storlek. Sedan länkar han till bilden från webbsidan utan att försöka använda något fuffens för att förminska bilden via XHTML-koden. Slutresultatet är en webbsida som laddas snabbt och ser snygg ut.

Om du alltså har behov av att förminska en bild ska du inte göra det genom att tvinga den att bli mindre på skärmen, utan använd ett bildbehandlingsprogram!