26 besökare, 1 medlem och 2 Studenter är online nu
Loopia

Photoshop

 

GIF utan Transparens


GIF med Transparens


 

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

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

 

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.

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

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 webbsäkra färger. Det innebär att färgerna ger bäst resultat i de flesta webbläsare. Har du inte arbetat med webbsäkra färger i din bild tidigare är det för sent att välja alternativet nu eftersom färgerna byts ut. webbsä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 webbsä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

Diffusion

De flesta bilder som används innehåller miljoner färger (24 bitars färgdjup) men många webbläsare och 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. Difussions-gitter 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 och skarvar ska uppstå.

Pattern

Mönstergitter ger en halvtonsliknade rutmönster.

Noise

Brusgitter ger ett slumpvis mönster liknande Diffussions-gitter men utan att "skarvar" uppstår.

 

Övriga alternativ


Transparency

 

Anger om vissa färger ska vara genomskinliga så att bakgrunden på webbsidan syns i områdena. Du kan bara få transparens om bilden ligger i ett eget Layer med transparens runt i Photoshop. Om du tex har ett Vitt bakgrunds-Layer måste du dölja det innan du sparar för webb och väljer alternativet Transparency.

Matte

Vilken färg du vill att pixlarna för kantutjämning ska ha. Om din bild ska ligga på en Vit bakgrund anger du att pixlarnas färg ska vara Vit. Detta för att bilden inte ska se kantig eller 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 valet Interlaced (sammanflätad) inte är gjort 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

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.

Ö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".

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

 

Tips! Värdet i sekunder som anges till vänster i statusrutan ä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.

 

 

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.

GIF utan Transparens


GIF med Transparens


 

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.

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

Transparent GIF utan kantutjämning

Transparent GIF med kantutjämning