Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 
Photoshopskolan Skriv ut sidan skriv ut»

Spara för web
Transparent GIF - JPEG (5.5-6)

När du skall spara bilder som du tänker använda på Internet, på din hemsida/webbsida så är antalet användbara bildformat begränsat. Idag finns det bara två bildformat som fullt ut accepteras av de olika programmen som läser webbsidor, webläsarna/browsers;

När du skall spara bilder som du tänker använda på Internet, på din hemsida/webbsida så är antalet användbara bildformat begränsat. De bildformat som fullt ut accepteras av de olika webläsarna (browsers) är:

GIF

Formatet 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 brukar också ge bäst 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

Formatet 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 (jfr GIF-Interlaced), det kallas då Progressive JPEG.

Det finns flera andra filformat som kan komma att vara alternativ framöver även om de inte stöds fullt ut idag:

PNG

Formatet 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). Det är ännu inte standardiserat som ett webformat men kommer troligen att bli en konkurrent till Macromedias Flash.

Ö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:

Vilket format ska du välja?
Streckteckningar - Färgteckningar - ClipArt GIF
Färgteckningar med toningar JPEG
Text - enfärgad, fylld eller med effekter GIF
Fotografier i fullfärg JPEG
Fotografier i gråskala GIF
Bild med transparent bakgrund GIF
Animerade bilder, bild eller text som animeras GIF
Bild som laddas ner otydlig och gradvis blir skarpare GIF/JPEG

 

Jämförelse GIF och JPEG

Guiden nedan är en praktiskt jämförelse mellan GIF och JPEG där du får prova att spara din bild i olika format. Du behöver en bild som är sparad i ett vektorformat och en bild i Bitmappformat. Nedan finns två exempel som du kan spara - hur du laddar hem och sparar bilder i AI- och TIF-format varierar beroende på vilken webbläsare du använder. Antingen klickar du bara på länken nedan och väljer att spara på din disk eller också kanske du måste högerklicka på länken och välja att "Spara Mål/Spara Länk" (OBS! att "photoshoplogo.ai" kan få namnet "photoshoplogo.ps" när du sparar ned den - detta har ingen praktisk betydelse för övningen):

 

Spara som GIF

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(ps)"
  2. Godkänn den föreslagna storleken. 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 gick att spara bilden i formatet GIF.

    Photoshop 5.5 och 6 erbjuder möjligheten att "spara för web" med både förgranskning av bildkvalitet och lagringsstorlek på dokumentet. En klar förbättring för dig som skapar webgrafik:

    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
Färgtabell
Perceptual
 Anpassar färgerna med prioritet till färger som bäst uppfattas av det mänskliga ögat.
Selective
 Anpassar färgerna liknande Perceptual men prioriterar stora färgytor och bevarande av websäkra färger. Är tillsammans med Adaptive det alternativ som ger bäst visuellt resultat. Selective är också det förvalda alternativet.
Adaptive
 Anpassar färgerna genom att ta de vanligast förekommande färgerna . Om tex en bild består av gröna och blå färger skapas en färgtabell som består av i första hand de färgerna. Är tillsammans med Selective det alternativ som ger bäst visuellt resultat.
Web
 Använder standard 216 websäkra färger. Det innebär att färgerna ger bäst resultat i de flesta webbläsare. Har du inte arbetat med websäkra färger i din bild tidigare är det för sent att välja alternativet nu eftersom färgerna byts ut. websäkra färger används när du vill prioritera visning på bildskärmar som bara visar 256 färger.
Dagens bildskärmar visar oftast miljontals färger och websäkra färger används mest till enfärgade eller större ytor...
Custom
 Behåller de tidigare valda GIF-färgerna och ändrar dem inte när ändringar sker i bilden.
Windows
 Använder Windows systemfärger som baseras på en 256 färgers tabell.

Dither (Gitter)
Diffusion

De flesta bilder som används innehåller miljoner färger (24 bitars färgdjup) men många webbläsare/bildskärmar visar endast 256 färger (8 bitars färgdjup). Dither (Gitter) är ett sätt för datorn att simulera färger som inte finns tillgängliga. Genom att blanda tex röda och gula färger ges ett intryck av att färgen blir orange. Difussionsgitter skapar ett slumpvis mönster som blir mindre synligt än Pattern och Noise.
Dagens bildskärmar visar dock oftast miljontals färger och kräver normalt inget Dither (Gitter).

Om du använt Diffussions-dither kan du välja i procent hur pixelfärgen blandas för att undvika att ränder/skarvar ska uppstå.
Pattern
 Mönstergitter ger en halvtonsliknade rutmönster.
Noise
 Brusgitter ger ett slumpvis mönster liknande Diffussionsgitter men utan att "skarvar" uppstår.

Övriga alternativ
Transparency
 Anger om vissa färger ska vara genomskinliga så att bakgrunden på webbsidan syns i de områdena. Du kan bara få transparens om bilden ligger i ett eget Lager med transparens runt i Photoshop. Om du tex har ett Vitt bakgrundslager måste du dölja det innan du spar för web och väljer alternativet Transparency...
Matte
 Vilken färg du vill att kantutjämningspixlarna ska ha. Om din bild tex ska ligga på en Vit bakgrund anger du kantutjämningspixlarnas färg ska vara vit. Detta för att bilden inte ska se kantig/taggig ut i kanterna.
Interlaced
 Gör att bilden visas i flera steg, sammanflätas, i webbläsare. Bra alternativ om du vill att det ska gå att tidigt se vad stora bilder föreställer innan de är helt nerladdade. Om Interlaced/sammanflätad inte är valt så visas bilden inte i full storlek förrän den är helt nerladdad i webbläsaren.
Lossy
 Du kan ange vilken komprimering, kvalitetsförsämring du vill ha i din GIF-bild. Mer förlust ger mindre lagringsstorlek men sämre kvalitet på bilden. OBS! Valet är inte tillgängligt om du valt Interlaced.
 

 

Spara som JPEG

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

  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 lagringsstorleken på bilden 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!

    JPEG-formatet ger en storlek på 44 Kb jämfört med GIF-bildens 21 Kb i tidigare övning. 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% förstoring
GIF 21 Kb

Bilden ovan i 300% förstoring
JPEG 44 Kb

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

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" som du sparade innan du började med övningen.

  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% förstoring
JPEG 18 Kb
 Bilden ovan i 300% förstoring
GIF 41 Kb

Tips! Värdet i sekunder som anges till vänster i statusrutan ovan är den tid det tar innan bilden är helt nedladdad i webbläsaren med en modemhastighet av 56,6 Kbps.

Du kan själv ställa in vilken hastighet (bandbredd) du vill jämföra med i menyn längst upp till höger.

Tänk på att all övrig grafik på webbsidan och själva HTML-koden också ökar den totala storleken på din webbsida. En riktlinje är att den totala storleken på allt på webbsidan inte bör överstiga 100 Kb.

 

 

Transparent GIF

De flesta format du sparar dina bilder i skapar en kvadrat runt bilden oavsett om du haft den i transparenta Lager 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" I exemplet nedan använder vi alltså den nya metoden.

GIF-bild utan Transparens

 GIF-bild med Transparens

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

OBS!
Om du använder dina egna bilder måste du se till att dölja bakgrundslagret och andra underliggande Lager. Ditt objekt måste ligga på en transparent bakgrund (schackrutigt mönster runt objektet) innan du väljer att "spara för web".
OBS!

  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. Kommer tex din GIF-bild att ligga på en Vit bakgrund väljer du Vit maskfärg.

    I exemplet nedan har färgen R=102, G=0, B=0 valts som Maskfärg eftersom bilden ska ligga på en vinröd bakgrund med i huvudsak de färgvärdena..
Transparent bild
utan kantutjämning
(Mask (Matte): Ingen)

 Transparent bild
med kantutjämning
(Mask: samma färg som bakgrunden)