HTML & CSS för nybörjare (Del 09): Grafik för webben (01)

När du sparar bilder i ett grafikprogram erbjuds olika grafikformat. Vilket av dem ska man välja när det gäller att infoga bilden på en webbsida?



Om man vill presentera en bild på sin webbplats, har man valet mellan tre format.

• GIF

• JPEG

• PNG

Men vilket format väljer man för vilket ändamål? Ska man använda GIF eller PNG för foton? Först en kort översikt över de olika formatens egenskaper.

Denna lilla översikt visar redan de olika egenskaperna hos formaten. Det är naturligtvis inte förvånande att vissa format passar bättre för vissa ändamål än andra. Det är precis här följande avsnitt börjar. Där visas när det är bäst att använda vilket format.

Foton

Inga frågor, för foton använder man JPEG. Eftersom bilder kan komprimeras mycket bra här, medan kvaliteten kan väljas varierande. Här hittar du rätt balans mellan kvalitet och kompressionsgrad.

Skärmdumpar/Diagram

För detta är PNG-formatet bäst lämpat. PNG är också intressant för tekniska ritningar, planritningar osv. PNG kan också användas för bilder där man arbetar med transparenta områden.

Typsnitt/Logotyper

Om ni har text i er logotyp eller över huvud taget vill visa skrift, bör ni använda GIF eller PNG. På grund av bättre prestanda väljer man vanligtvis PNG. JPEG är i vilket fall som helst olämpligt för att visa texter, eftersom kanterna visas suddigt.

Transparens

När det gäller visning av transparenta områden, utesluter JPEGs direkt. Kvar blir alltså GIF och PNG. Men vilket av dessa två format ska man nu använda när det gäller transparens? GIF kan principiellt hantera transparens, men resultaten är oftast suddiga. En pixel kan i GIF-formatet antingen vara helt synlig eller helt transparent. Detta fenomen inträffar inte med PNG. Detta format har en extra alfa-kanal, vilket resulterar i finare transparensresultat.

Infoga Bilder

Grafik kan infogas med img-elementet. (Observera att bilder numera ofta infogas via CSS. Detaljerad information om CSS kommer naturligtvis senare. Den visade HTML-vägen är dock helt standardkonform och kan även användas utan problem i HTML5.)

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

I img behandlar det sig om ett fristående element. Med hjälp av de relevanta attributen kan bilden beskrivas mer detaljerat. Det viktigaste attributet är utan tvekan src. Eftersom här anges vilken bild som ska infogas. I det visade exemplet antar jag att grafiken logo.png finns i samma mapp som HTML-filen där img-elementet har definierats.

För att bilderna faktiskt ska visas måste sökvägen till dem anges korrekt. HTML erbjuder olika möjligheter för referenser.

• Absoluta sökvägar

• Absoluta sökvägar relativt basadressen

• Relativa sökvägar relativt basadressen

Först till de absoluta sökvägarna. Denna variant används normalt när bilden inte finns på den egna servern. Antag att ni vill infoga fjärilen känd från PSD-Tutorials.de på er webbplats. Då kan ni teoretiskt ladda den direkt från den server där den ligger. Först fastställer sökvägen till bilden. Det enklaste sättet att göra detta är att högerklicka på bilden i webbläsaren och sedan välja Kopiera bild-URL.

Vad som laddas in i Urklipp borde slutligen se ut så här:

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

Detta är alltså den fullständiga adressen till bilden. Denna information räcker för att infoga bilden.

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

Man tilldelar den fullständiga sökvägen till bilden till src-attributet.

Problemet med dessa absoluta sökvägar är dock att man inte har någon verklig kontroll över den infogade innehållet. Om bilden som ni refererar till raderas från servern eller flyttas till en annan katalog uppstår ett visningsfel.





Därför bör denna absoluta referensering vara undantaget.

Absoluta sökvägar relativt basadressen

Denna variant är alltid lämplig när bilden ligger på samma dator/server som HTML-filen och är nåbar via aktuell protokoll. Det låter komplicerat, men det är det inte.

Ett exempel:

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

Detta är den fullständiga adressen. Följande del är då den absoluta sökvägen.

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

Denna absoluta sökväg hänvisar relativt till basadressen http://4eck-media.de.

Relativa sökvägar relativt basadressen

Den nu presenterade varianten är förmodligen den mest använda. Här tas alltid den aktuella sökvägen som referenspunkt, från vilken adressering slutligen sker. Här är några exempel igen. Antag att det finns filen index.htm, där du vill infoga en bild. Dessutom finns på samma nivå katalogen images, där bilden finns.

index.htm
images
--logo.png

Uppropet i src-attributet skulle se ut så här i detta fall:

src="images/logo.png"

Hur skulle det se ut om bilden befinner sig i en katalog som ligger ovanför HTML-filen?

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

I det här fallet ligger index.htm en katalog under bilden som ska infogas logo.png.

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

Syntaxen betyder här alltså: Gå upp en nivå, byt sedan till katalogen images och visa logo.png.

project
--images
----logo.png
----2013
------januari
--------index.htm

Här är syntaxen:

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

Bilden logo.png ligger i det här fallet två nivåer över index.htm i katalogen images.

Fördelen med relativa sökvägar är deras flexibilitet. Du kan till exempel utveckla projektet lokalt och sedan kopiera det till en "riktig" server. Sökvägarna förblir oförändrade efter det.