HTML & CSS for nybegynnere (Del 09): Grafikk for nettet (01)

Når du lagrer bilder i et grafikkprogram, blir det tilbudt forskjellige grafikkformater. Hvilken skal man imidlertid velge når det gjelder å inkludere bildet på en nettside?



Når man ønsker å presentere et bilde på nettsiden sin, har man valget mellom tre formater.

• GIF

• JPEG

• PNG

Men hvilket format velger man for hvilket formål? Velger man heller GIF eller PNG for bilder? Først en kort oversikt over de enkelte formatenes egenskaper.

Denne lille oversikten viser allerede de ulike egenskapene til formatene. Det er derfor ikke overraskende at visse formater egner seg bedre for ulike formål enn andre. Akkurat på dette punktet begynner den følgende delen. Der vil det bli vist når man best bør bruke hvilket format.

Bilder

Ingen tvil, for bilder bruker man JPEG. Her kan bilder komprimeres veldig bra, og kvaliteten kan variere. Du finner her riktig balanse mellom kvalitet og komprimeringsrate.

Screenshots/Diagrammer

For dette egner seg PNG-formatet best. PNG er også interessant for tekniske tegninger, plantegninger osv. PNG kan også brukes til bilder der man arbeider med gjennomsiktige områder.

Skrifter/Logoer

Hvis logoen din inneholder tekst eller hvis du generelt vil vise skrift, bør du bruke GIF eller PNG. På grunn av bedre ytelse foretrekker man imidlertid vanligvis PNG. JPEG er i alle fall uegnet for visning av skrift, fordi kantene vises urent.

Gjennomsiktighet

Når det gjelder visning av gjennomsiktige områder, er JPEG utelukket fra starten av. Igjen er det kun GIF og PNG igjen. Men hvilket av disse formatene skal man bruke når det kommer til gjennomsiktighet? GIF kan i prinsippet håndtere gjennomsiktighet, men resultatene er ofte uklare. Et piksel i GIF-formatet kan enten være helt synlig eller helt gjennomsiktig. I PNG oppstår ikke denne typen problem. Dette formatet har en ekstra alfa-kanal, som gjør at finere gjennomsiktighetsresultater oppnås.

Inkludere bilder

Grafikker kan inkluderes ved hjelp av img-elementet. (Vær oppmerksom på at bilder nå ofte inkluderes via CSS. Omfattende informasjon om CSS vil selvfølgelig følge. Den viste HTML-metoden er imidlertid helt i henhold til standarden og kan brukes trygt i HTML5.)

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

Når det gjelder img, er det et frittstående element. Ved hjelp av de tilhørende attributtene kan bildet beskrives nærmere. Det viktigste attributtet er uten tvil src. For det er her man angir bildet som skal inkluderes. I det viste eksempelet går jeg ut fra at grafikken logo.png befinner seg i samme mappe som HTML-filen der img-elementet ble definert.

For at bildene faktisk skal vises, må stien til dem angis riktig. HTML tilbyr forskjellige måter å referere på.

• Absolutte stier

• Absolutte baneangivelser relativt til basisadressen

• Relative baneangivelser relativt til basisadressen

Først til de absolutte stiene. Denne varianten brukes vanligvis når bildet ikke er på ens egen server. Anta at du vil inkludere sommerfuglen kjent fra PSD-Tutorials.de på nettsiden din. Da kan du i teorien laste den direkte fra serveren den ligger på. Finn først banen til bildet. Det enkleste er å høyreklikke på bildet i nettleseren og velge Kopier bilde-URL.

Det som lastes inn i utklippstavlen, bør til slutt se slik ut:

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

Dette er dermed den fulle adressen til bildet. Denne informasjonen er tilstrekkelig for å inkludere bildet.

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

Man tildeler derfor den fulle stien til bildet til src-attributtet.

Problemet med disse absolutte stiene er imidlertid at man ikke har full kontroll over den inkluderte innholdet. Hvis grafikken du refererer til blir slettet fra serveren eller flyttet til en annen mappe, vil det oppstå en feil i visningen.





Derfor bør denne absolutte referansen faktisk være unntaket.

Absolutte stier i forhold til basisadressen

Dette alternativet er alltid en god idé når grafikken ligger på samme datamaskin/server som HTML-filen og er tilgjengelig via gjeldende protokoll. Dette høres komplisert ut, men det er det ikke.

Et eksempel:

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

Dette er den fulle adressen. Den følgende delen er den absolutte stien.

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

Denne absolutte stien refererer relativt til basisadressen http://4eck-media.de.

Relativ sti i forhold til basisadressen

Dette alternativet som nå blir introdusert, er absolutt det mest vanlige. Her brukes alltid gjeldende sti som referansepunkt, fra hvor adressen til slutt blir henvist. Her er det også noen eksempler. La oss si det er en fil som heter index.htm, hvor du ønsker å inkludere et bilde. I tillegg finnes det på samme nivå en mappe med navnet images, hvor det aktuelle bildet ligger.

index.htm
images
--logo.png

Oppkallet i src-attributtet ville se slik ut i dette tilfellet:

src="images/logo.png"

Hvordan ville dette se ut hvis bildet befinner seg i en mappe som er over HTML-filen?

prosjekt
--images
-----logo.png
--arkiv
-----index.htm

I dette tilfellet ligger index.htm i en mappe under bildet som skal inkluderes logo.png.

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

Syntaksen her betyr altså: Gå en mappe opp, gå deretter inn i mappen images og vis logo.png.

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

I dette tilfellet ser syntaksen slik ut:

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

Bildet logo.png ligger i dette tilfellet to nivåer over index.htm i mappen images.

Fordelen med relative stier er deres fleksibilitet. Du kan for eksempel utvikle prosjektet lokalt og deretter kopiere det til en "ekte" server. Stiene vil være uendret etterpå.