HTML & CSS for begyndere (Del 09): Grafikker til web (01)

Når du gemmer billeder i et grafikprogram, tilbydes forskellige grafikformater. Men hvilket af dem skal man vælge, når det handler om at inkludere billedet på en hjemmeside?



Når man vil præsentere et billede på sin hjemmeside, har man valget mellem tre formater.

• GIF

• JPEG

• PNG

Men hvilket format skal man vælge til hvilket formål? Skal man foretrække GIF eller PNG til fotos? Først en kort oversigt over de enkelte formaters evner.

Denne lille oversigt viser allerede de forskellige egenskaber ved formaterne. Det kommer derfor ikke bag på nogen, at visse formater egner sig bedre til specifikke formål end andre. Dette afsnit viser netop, hvornår det er bedst at bruge hvilket format.

Fotos

Der er ingen tvivl om, at man bruger JPEG til fotos. Her kan billeder komprimeres meget godt, og kvaliteten kan variere. Man finder den rette balance mellem kvalitet og kompressionsgrad.

Skærmbilleder/Diagrammer

Til dette formål egner PNG-formatet sig bedst. PNG er også interessant til tekniske tegninger, plantegninger osv. PNG kan også anvendes til billeder, hvor der arbejdes med transparente områder.

Skrifter/Logos

Hvis dit logo indeholder tekst eller du generelt vil vise tekst, skal du bruge GIF eller PNG. På grund af bedre ydeevne vælger man normalt PNG. JPEG er absolut uegnet til visning af skrifttyper, da kanterne vises utydeligt.

Gennemsigtighed

Når det drejer sig om at vise gennemsigtige områder, er JPEG udelukket fra starten. Tilbage er så GIF og PNG. Men hvilket af disse to formater bruger man så, når det kommer til gennemsigtighed? GIF kan i princippet håndtere gennemsigtighed, men resultaterne er ofte upræcise. Et pixel i GIF-formatet kan enten være fuldt synligt eller fuldt gennemsigtigt. Dette fænomen opstår ikke ved PNG. Dette format har en ekstra alphakanal, hvilket resulterer i finere gennemsigtighedsresultater.

Indlejring af billeder

Grafikker kan indlejres via img-elementet. (Bemærk venligst, at billeder i dag ofte indlejres via CSS. Detaljerede oplysninger om CSS følger selvfølgelig stadig. Den viste HTML-metode er dog helt standardkonform og kan også bruges problemfrit i HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Ved img drejer det sig om et selvstændigt element. Ved hjælp af de tilsvarende attributter kan billedet beskrives nærmere. Det vigtigste attribut er uden tvivl src. Her angiver man billedet, som skal indlejres. I det viste eksempel antages det, at grafikken logo.png er i samme mappe som HTML-filen, hvor img-elementet defineres.

For at få billederne til at blive vist korrekt, skal du angive stien til dem korrekt. HTML tilbyder forskellige muligheder for reference.

• Absolutte stier

• Absolutte sti-angivelser i forhold til basiskoden

• Relative sti-angivelser i forhold til basiskoden

Først til de absolutte stier. Denne metode bruges normalt, når billedet ikke ligger på ens egen server. Hvis du for eksempel vil inkludere den kendte sommerfugl fra PSD-Tutorials.de på din hjemmeside, kan du teoretisk set downloade den direkte fra serveren, hvor den ligger. Først find billedets sti. Dette gøres nemmest ved at højreklikke på billedet i browseren og vælge "Kopier billed-URL".

Det, der indlæses i udklipsholderen, bør i sidste ende se sådan ud:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dette er den fulde adresse til billedet. Denne information er tilstrækkelig til at indlejre billedet.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Man tildeler således det fulde sti til billedet til src-attributet.

Problemet med disse absolutte stier er dog i sidste ende, at man ikke har reel kontrol over det indsatte indhold. Hvis det grafik, I henviser til, bliver slettet fra serveren eller flyttet til en anden mappe, vil der opstå en fejl i visningen.





Derfor bør denne absolutte henvisning faktisk være undtagelsen.

Absolutte stier i forhold til basadressen

Denne variant er altid passende, når grafikken ligger på samme computer/server som HTML-filen og er tilgængelig via den aktuelle protokol. Det lyder kompliceret, men det er det ikke.

Et eksempel:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dette er den fuldstændige adresse. Den følgende del er den absolutte sti.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Denne absolutte sti refererer relativt til basadressen http://4eck-media.de.

Relative stier i forhold til basadressen

Denne nu præsenterede variant er sandsynligvis den mest almindelige. Her tages altid den aktuelle sti som referencepunkt, hvorfra der til sidst adresseres. Her er nogle eksempler igen. Lad os antage, at der findes filen index.htm, som I vil inkludere et billede i. Derudover eksisterer på samme niveau mappen images, hvor det pågældende billede ligger.

index.htm
images
--logo.png

Opkaldet i src-attributet ville se således ud i dette tilfælde:

src="images/logo.png"

Hvordan ville det dog se ud, hvis billedet befinder sig i en mappe, der ligger over HTML-filen?

projekt
--images
-----logo.png
--archiv
-----index.htm

I dette tilfælde ligger index.htm en mappe under det billedet, der skal inkluderes, logo.png.

src="../images/logo.png"

Syntaksen betyder her: Gå en mappe op, skift til mappen images der og vis logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

I denne situation er syntaksen som følger:

src="../../images/logo.png"

Billedet logo.png ligger i dette tilfælde to niveauer over index.htm i mappen images.

Fordelen ved de relative stier er deres fleksibilitet. I kan for eksempel udvikle projektet lokalt og derefter kopiere det til en "rigtig" server. Stierne vil forblive uændrede efterfølgende.