Photoshop

 skriv ut »

Översikt över bildformat för webbsidor

När du skall spara bilder som du tänker använda på din webbplats så är antalet användbara bildformat begränsat. De bildformat som fullt ut accepteras av de olika webbläsarna är:

GIF

Bildformatet GIF (Graphics Interchange Format) används oftast för att visa dekorfärgsbilder (8 Bitars färgdjup = 256 färger) i HTML-dokument. GIF passar oftast bäst till bilder som innehåller mindre än 256 färger som teckningar och clipart. Det kan även ge bra resultat till små fotografier. När du sparar en bild som GIF kan du ange hur bilden ska visas efter att den har laddats ned:
Transparent = genomskinlig bakgrund
Interlaced = bilden laddas ner och blir tydligare gradvis,
Animerad = rörliga bilder.

JPEG

Bildormatet JPEG (Joint Photographic Experts Group) används oftast för att visa fotografier och andra kontinuerligt tonade bilder. Till skillnad från GIF behåller JPEG all färginformation i RGB-bilder (24 Bitars färgdjup = 16,7 miljoner färger). JPEG använder också en komprimering som effektivt minskar dokumentstorleken genom att identifiera och ta bort data som inte är väsentlig för att visa bilden. När du öppnar en JPEG-bild packas den upp automatiskt. Eftersom information tas bort kallas JPEG-komprimering ibland för förlustgivande (lossy). Detta innebär att när en bild har komprimerats och sedan packats upp igen kommer den inte att vara identisk med den ursprungliga bilden. När du sparar en bild i JPEG-format så bestämmer du själv kvaliten i steg från 0 till 100 där 0 ger en liten filstorlek men också sämsta visningskvalitet. Även JPEG bilder kan laddas ner gradvis (jämför med GIF-Interlaced) och det kallas då Progressive JPEG.

Några andra bildformat är:

PNG

Bildformatet PNG (Portable Network Graphics) utvecklades som ett alternativ till GIF-formatet. Alla programtillverkare som använder GIF för betala licens till upphovsföretaget vilket medfört att ett licensfritt alternativ har varit efterfrågat. PNG bevarar all färginformation (24 Bitars färgdjup = 16,7 miljoner färger) och alla alfa-kanaler i en bild och använder en förlustfri komprimering för att minska dokumentets storlek. När du sparar en bild i PNG-format kan du välja att visa bilden gradvis när den laddas ned.

FlashPix

FlashPix-formatet, utvecklat av Live Picture och Kodak är anpassat för att öka överföringshastigheten och visningskvaliteten av stora och högupplösta bilder. FlashPix-formatet stödjer gråskalor och RGB-färger men inte alfa-kanaler. När du sparar i FlashPix-formatet kan du även välja att använda JPEG-komprimering.Tekniken bakom formatet delar upp pixelbaserade bilder i hanterbara delar. Bilden spars i flera delar med olika kvalitet vilket skall göra att det även skall gå att zooma i en bild.

SVG

SVG (Scalable Vektor Graphics) är format för Vektorgrafik (teckningar och illustrationer).

Översikt över GIF och JPEG

För att använda bilden på en webbsida kan du spara som GIF eller JPEG. Vanligtvis brukar GIF vara bättre till bilder med få färger: teckningar, text, Clipart och illustrationer. JPEG brukar vara det bästa alternativet för fotografier och tonade bilder som innehåller många färger. Här är några riktlinjer:

Spara som GIF

Nedan finns två exempel som du kan spara Klicka på länken och välj att spara eller högerklicka på länken och välja att "Spara Mål/Spara Länk".OBS! Filen "photoshoplogo.ai" kan få namnet "photoshoplogo.ps" när du sparar ned den - detta har ingen praktisk betydelse.

• photoshoplogo.ai  
• regn.tif  

Bilden i exemplet är inte en Bitmapp-bild utan gjord i ett program som skapar Vektorgrafik. När den öppnas i Photoshop konverteras den till Bitmappformat.

1. Välj menyn: Arkiv/Öppna... (File/Open) och öppna filen "photoshoplogo.ai"
2. Godkänn den storlek som programmet föreslår. Bilden öppnas med transparent bakgrund:
   
   
   
   Det här är en typisk GIF-bild. Den innehåller få färger och då brukar JPEG inte vara det bästa formatet.
   
   
3. I tidigare versioner av Photoshop måste man först "Indexera" färgerna, dvs byta färgläge från RGB till max 256 färger innan det går att spara bilden i formatet GIF.
   
   Photoshop 5.5 och Photoshop 6 erbjuder möjligheten att "spara för webb" med både förgranskning av bildkvalitet och lagringsstorlek på dokumentet. En klar förbättring för dig som skapar webbgrafik.
   
   Välj menyn: "Arkiv/Spara för web" (File/Save for web):
   
   
   
   Du har möjlighet att se din bild i 3 olika förgranskningar förutom Originalet. Ofta räcker det att se Originalet och hur den sparade bilden kommer att bli. I exemplet har vi valt att se 2 dokument:
   
   
   
   
4. Välj Alternativet GIF i menyn och se till att alternativen är valda enligt nedan. Förklaringar till alternativen hittar du längre ned.
   
   
   
   
5. Notera att antalet färger i bilden endast är 199 st även fast du valt att använda 256 färger. Om du däremot hade valt färre färger, tex 128 st, hade bildens lagringsstorlek blivit mindre men även kvaliteten hade blivit sämre.
   
   
   
   Prova att byta antalet färger till 32 istället för 256. Du bör inte kunna se någon synlig försämring i bilden men lagringsstorleken på bilden minskar från 21 Kb till 16 Kb.
   
   
   
   Valet mellan 199 färger eller 32 färger är ditt! Skillnaden i lagringsstorlek, 5 KB är egentligen inte stor om du bara kommer att ha denna bild på din webbsida. Om du däremot kommer att ha ett stort antal bilder, tex 10 st liknande bilder, så ökar ju den totala storleken som ska laddas ner till webbläsaren med 50 Kb.
   
   Gör ditt val, 256 (199) eller 32 färger och bekräfta valet med "OK". Välj ett namn på filen och spara din GIF-bild.
   
   
   Tips! Välj alltid 256 färger som alternativ i GIF-valet för att kontrollera hur många färger din bild innehåller (visas under förgranskningsbilden).
   
   Om du väljer för få färger från början så används bara det antal färger du valt och bildens kvalitet kan bli försämrad.

Översikt över alternativ för GIF-export

Spara som JPEG

Nedan finns två exempel som du kan spara Klicka på länken och välj att spara eller högerklicka på länken och välja att "Spara Mål/Spara Länk".OBS! Filen "photoshoplogo.ai" kan få namnet "photoshoplogo.ps" när du sparar ned den - detta har ingen praktisk betydelse.

• photoshoplogo.ai  
• regn.tif  

Öppna bilden "photoshoplogo.ai" om du inte redan har den öppen sedan tidigare.

1. Välj menyn: "Arkiv/Spara för web" (File/Save for web):
   
   
   
   
2. Du har möjlighet att se din bild i 3 olika förgranskningar förutom Originalet. Ofta räcker det att se Originalet och hur den sparade bilden kommer att bli. I exemplet har vi valt att se 2 dokument:
   
   
   
   
3. Välj filformatet JPEG i menyn och se till att alternativen är valda enligt nedan. Valet "Progressive" liknar Interlaced GIF, bilden visas stegvis tydligare i webbläsaren. Valet optimized gör filstorleken mindre:
   
   
   
   
4. Notera att lagringsstorlek blir större med den kvalitetsinställning som krävs för att den ska se lika bra ut som den gör när du spar den i GIF-format (enligt ovan).
   
   JPEG-formatet ger en storlek på 44 Kb jämfört med GIF-bildens 21 Kb (enligt ovan).
   
   Valet av bildformat är alltså enkelt i det här fallet:
   
   

Bäst kvalitet GIF 21 Kb	Suddigt utseende JPEG 44 Kb
Bilden ovan i 300% Zoom GIF 21 Kb	Bilden ovan i 300% Zoom JPEG 44 Kb

Jämförelse mellan GIF och JPEG på ett fotografi

Nedan finns ett bildexempel som du kan spara Klicka på länken och välj att spara eller högerklicka på länken och välja att "Spara Mål/Spara Länk".

• regn.tif  

JPEG-formatet är lämpligast när det gäller att spara fotografier som innehåller många färger. Jämför formaten GIF och JPEG på fotografiet "regn.tif".

1. Öppna dokumentet "regn.tif".
2. Välj menyn: "Arkiv/Spara för web" (File/Save for web).
3. Välj Alternativet GIF i menyn och se till att alternativen är valda enligt nedan:
   
   
   
   
4. För att bilden ska ha samma kvalitet som Originalet krävs maximalt antal färger, 256 st. (Normalt ger inte GIF-formatet bra resultat på fotografier men i små storlekar sk "thumbnails" kan det ibland vara bättre än JPEG).
   
   
   
   
5. Byt filformat och välj nu istället alternativet JPEG. Använd inställningarna enligt nedan:
   
   
   
   
6. JPEG är ett bättre alternativ till fotografier då de ofta innehåller miljontals färger (24 bitars färgdjup). Lagringsstorleken blir också i det här fallet betydligt mindre än GIF-formatet samtidigt som bildkvaliteten blir bättre.
   
   JPEG-formatet ger en storlek på 18 Kb jämfört med GIF-bildens 41 Kb. Valet av bildformat är alltså enkelt även i det här fallet:
   
   

Bäst kvalitet JPEG 18 Kb	Sämre kvalitet och större storlek GIF 41 Kb
Bilden ovan i 300% Zoom JPEG 18 Kb	Bilden ovan i 300% Zoom GIF 41 Kb

Transparent GIF

De flesta format du sparar dina bilder i skapar en kvadrat runt bilden oavsett om du haft den i transparenta Layer i Photoshop. Bakgrunden blir då Vit. För att en bild ska passa in bättre mot bakgrunder etc måste den sparas som en Transparent GIF.

I Photoshop 6 och senare versioner har exportfiltret "GIF89a" tagits bort till förmån för funktionen "Spara för web" (Save for Web).

I exemplet nedan använder vi den nya metoden.

Nedan finns ett bildexempel som du kan spara Klicka på länken och välj att spara eller högerklicka på länken och välja att "Spara Mål/Spara Länk".OBS! Filen "photoshoplogo.ai" kan få namnet "photoshoplogo.ps" när du sparar ned den - detta har ingen praktisk betydelse.

• photoshoplogo.ai  

Öppna bilden "photoshoplogo.ai" om du inte redan har den öppen sedan tidigare.

OBS! Viktigt! Om du använder dina egna bilder måste du se till att gömma bakgrunds-Layer och andra underliggande Layers. Ditt objekt måste ligga på en transparent bakgrund innan du väljer att "spara för webb" (Save for web).

1. Välj menyn: "Arkiv/Spara för web" (File/Save for web).
2. Se till att formatet är GIF och att alternativen nedan är valda:
   
   
   
   
3. Ett viktigt val är "Mask" (Matte) För att få kantutjämning och rätt färg på dina kantpixlar väljer du den färg som din bakgrund på webbsidan kommer att ha.
   
   Om din GIF-bild ska placeras på en Vit bakgrund väljer du Vit maskfärg (Matte).
   
   I exemplet nedan har färgen R=102, G=0, B=0 valts som Maskfärg (Matte) eftersom bilden ska ligga på en röd bakgrund medde färgvärdena: