Spara för web (5)

Photoshop 5.5 och senare versioner »

När du skall spara bilder som du tänker använda på Internet, på din hemsida/websida 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 websidor, webläsarna/browsers;

När du skall spara bilder som du tänker använda på Internet, på din hemsida/websida 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 websida 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 weblä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):

photoshoplogo.ai (80 Kb)
regn.tif (130 Kb)

Exempel 1: Spara som GIF och JPEG

Du skall öppna en bild som inte är en Bitmappbild utan gjord i ett program som skapar Vektorgrafik. När den öppnas i Photoshop konverteras den till Bitmappformat.

Välj menyn: Arkiv/Öppna" (File/Open) och Öppna filen "photoshoplogo.ai(ps)" som du sparat innan du började övningen.
Godkänn den föreslagna storleken 498x498 pixlar. Bilden öppnas med transparent bakgrund:

Exempel 1: Spara som GIF

Det här är en typisk "GIF-bild". Den innehåller få färger och då brukar JPEG inte vara det bästa formatet. För att spara bilden i GIF-format måste du "Indexera" färgerna dvs byta färgläge från RGB till max 256 färger.

Välj menyn: "Bild/Läge/Indexerade Färger" (Image/Mode/Indexed Color).
Du blir tillfrågad om du vill lägga samman alla lager (Indexerat läge i Photoshop stöder inte Lager) - välj "OK":
I dialogrutan för Indexerade färger har du flera valmöjligheter, speciellt om antalet färger i bilden är fler än det maximala 256 färger. I det här fallet innehåller Logotypen bara 179 färger och det finns ingen anledning att välja något annat. Bekräfta valen genom att välja "OK".
Nu är bilden färdig att sparas som GIF. Välj menyn: "Arkiv/Spara Kopia" (File/Save a Copy) och ge den namnet "photoshoplogo".
Slutligen får du välja om den skall vara "Sammanflätad" (Interlaced) eller inte. Det innebär att den laddas in "suddig" och gradvis blir skarpare. Skillnaden märks mest på stora bilder som tar lång tid att ladda ner i webläsaren/browsern. Välj att göra den "Sammanflätad" (Interlaced):

TIPS! Välj att "Spara Kopia" istället för att "Spara" eller "Spara Som". När du väljer "Spara Kopia" har du hela tiden Originalet kvar öppet och kan fortsätta att spara fler kopior när du tex provar dig fram mellan olika bildformat.

TIPS 2! Redigera ALDRIG bilder i läget "Indexerad Färg". Behöver du bearbeta, storleksförändra eller göra pixeländringar i bilden bör du byta till läge "RGB" innan du redigerar bilden. Kantutjämningen blir annars sämre pga att antalet färger är för få. Byt alltid läge på bilder du öppnar i tex GIF-format från "Indexerad Färg" till "RGB"

Exempel 1: Spara som JPEG

För att prova att spara bilden i formatet JPG och se om den blir bättre eller sämre så måste du gå tillbaka till fullfärgsläge RGB annars innehåller bilden redan från början för få färger (vår bild innehöll även från början bara 179 färger men använd denna metod ändå). Du kan alltså normalt inte byta läge igen ifrån "Indexerade Färger" till "RGB" om antalet färger reducerats. Använd istället Händelsepaletten för att backa till momentet innan du bytte färgläge, eller använd snabbkommandot CTRL+ALT+Z för att ångra i flera steg.

Du ser att du är tillbaka i rätt läge om du har fått tillbaka Lagren och om det står RGB i dokumentets titelfält högst upp:

För att spara som JPEG behöver du inte byta färgläge eftersom JPEG stödjer fullfärg och till skillnad från GIF spar bilden i upp till 16,7 miljoner färger.

Välj menyn: "Arkiv/Spara Kopia" (File/Save a Copy)
Byt formatet från PSD till JPEG (JPG) och namnge bilden till "photoshoplogo".
I dialogrutan för att spara som JPEG kan du bestämma vilken kvalitet din bild skall ha. Här gäller att ju lägre kvalitet desto större blir komprimeringen av filstorleken, bilden blir alltså mindre men den ser också sämre ut. JPEG komprimerar genom att samla ihop pixlar med liknande färg och ge dem samma färg enligt ett genomsnittligt färgvärde. Det brukar ofta resultera i att bilden ser "flammig" ut. En bra regel brukar vara att lägga sig mittemellan och utgå från kvaliten 5 och sedan minska kvaliteten om filstorleken blir för stor. Dra i reglaget så att kvaliteten blir 5:medium.
Du kan också trimma ner storleken litet till genom att välja "Baslinje/Optimerad". Rekommenderas inte då risken då är att flera webläsare/browsers inte kan tolka och visa bilden. Välj här istället "Baslinje/Standard" eller "Progressiv" som ger samma effekt som "Sammanflätad" (Interlaced) GIF:

Jämför GIF och JPEG

Öppna de båda bilderna "photoshoplogo.gif" och "photoshoplogo.jpg" som du sparade tidigare och jämför storlek och kvalitet.

Din GIF-bild bör ha blivit ca 16 Kb stor och din JPEG-bild 26 Kb. Kvalitetsmässigt kan det vara svårt att se vilken som är bäst men om du zoomar in dem i 200-300% så ser du att JPEG-bilden är "flammig" pga komprimeringen.

Prova gärna att spara Originalbilden en gång till i JPEG-format med tex kvaliteten "2". Storleken blir då mindre men bildkvaliteten blir också betydligt sämre.

Bäst kvalitet GIF 16 Kb	Suddigt utseende JPEG 26 Kb
Bilden ovan i 300% förstoring GIF 16 Kb	Bilden ovan i 300% förstoring JPEG 26 Kb

Exempel 2: Kantutjämning

När du sparade Logotypen som GIF använde du Paletten "Exakt" eftersom den innehöll 179 färger, - alltså färre än det maximala antalet 256 färger.

Logotypen ser ut att innehålla endast 5 färger: blå, brunbeige, gul, grå och vit. Att bilden i verkligheten innehåller 179 färger beror på "kantutjämningen. För att en rundad form inte skall få en "hackig" kant så fylls rundningen ut med pixlar i liknande nyanser. En Svart linje på en Vit bakgrund består tex av flera Grå nyanser som tonas från Svart till Vitt.

Exemplen nedan visar bokstaven "P" med och utan kantutjämning i normal storlek och förstorad 1200%

2 färger GIF 282 Byte Inte kantutjämnad (Aliased)	16 färger GIF 464 Byte Kantutjämnad (Anti-aliased)
2 färger 1200% förstoring	16 färger 1200% förstoring

Ofta när du sparar en bild som GIF är antalet färger i bilden fler än 256 st. För att få fler färger i Logotypen så att den innehåller fler än 256 färger skall du lägga till ett par Effekter.

Se till att du jobbar i Originalbilden (formatet PSD) och inte i GIF/JPEG-bilderna som du sparat tidigare. (Om du har stängt originalbilden upprepar du punkt 1 ovan).

kontrollera att du arbetar i Lagret med Logotypen. Den ligger i ett transparent Lager ovanför det Vita Lagret. Det är en förutsättning för att Effekten skall påverka enbart Logotypen:
Högerklicka i Lagret och välj menyn "Effekter" (Effects). Använd den första och förvalda effekten "Skugga" (Drop Shadow). Du kan också använda menyn: "Lager/Effekter/Skugga..." (Layer/Effects/Drop Shadow...)
Ändra det förvalda värdet för "Avstånd" (Distance) och "Oskärpa" (Blur) till 10 pixlar. När du använder Effekterna i Photoshop måste du ofta anpassa inställningarna beroende på hur stora dina bilder/text är i pixlar. I detta fallet var det förvalda värdet 5 för litet:
Välj sedan i listmenyn eller genom att klicka på knappen "Nästa" (Next) effekten "Avfasning och Relief" (Bevel and Emboss). Inställningar för den effekten kan du prova dig fram till, eller enligt nedan...

Exempel 2: Spara som GIF

För att spara Logotypen som en GIF-bild måste du som i tidigare exempel förbereda den genom att ändra färgläget från RGB till Indexerad Färg.

Välj menyn: "Bild/Läge/Indexerade Färger" (Image/Mode/Indexed Color) Lägg samman Lagren genom att bekräfta "OK". Nu innehåller bilden fler färger än 256 st, pga Effekterna som du har lagt till. Paletten som används är "Adaptiv". Tittar du i listmenyn ser du att du kan välja fler alternativ än "Exakt" eftersom antalet färger är över 256 st. Här är en översiktlig beskrivning över Paletterna:

"Adaptiv" innebär att det skapas en Palett som är baserad på provtagning från de vanligaste områdena i färgspektrumet i den aktuella bilden. Med andra ord så blandas de maximala 256 färgerna på ett sätt så att de ser ut att vara flera och bilden ser ganska bra ut.
"System" använder Windows- eller Macintoshsystemets inbyggda 8-bitarspalett, som är baserad på en enhetlig provtagning av RGB-färgerna. Färgerna anpassas alltså på bästa sätt till Windows ELLER Macintosh.
"Web" ändrar till de sk "Websäkra" 216 färgerna som säkrast överenstämmer i både webläsare/browsers och Win/Mac-miljö. Har du inte valt de färgerna när du jobbat med din bild tidigare, brukar det vara försent att välja det nu... (Du kan även välja "Enhetlig" (Uniform) eller "Egen", vill du veta mer om de alternativen så kan du använda Photoshops Hjälpmeny).

Du har också möjlighet att påverka blandningen av de maximalt 256 färgerna genom sk "Gitter" (Dither). Det rekommenderas inte till bilder med många färger tex fotografier pga de kan se sämre ut med än utan "Gitter" på vissa bildskärmar.

Du kan också påverka "Färgmatchning" (Color Matching). Alternativet "Bäst" är bäst och "Snabbare" är fort och fel.
Den stora märkbara kvalitets- och storleksändringen styr du genom att välja "Adaptiv" och sänka Färgdjupet, dvs antalet färger.

Du kan välja mellan 3 bitars färgdjup (8 färger) upp till 8 bitars färgdjup (256 färger). Prova dig fram genom att alltid ha alternativet "Förgranskning" (Preview) valt. Då ser du direkt om kvaliteten försämras.

Vår Logotype blir synbart sämre i 6 bitars färgdjup (64 färger) och du bör därför använda minst 7 bitars färgdjup (128 färger). en lämplig inställning är tex enligt nedan.
Spara bilden i GIF-format med menyn: "Arkiv/Spara Kopia... (File/Save a Copy...) och ge den namnet "photoshoplogo_effekt"

Exempel 2: Spara som JPEG

Använd Händelsepaletten för att backa till momentet innan du bytte färgläge, eller använd snabbkommandot CTRL+ALT+Z för att ångra i flera steg. (se övningspunkt 3 ovan).

Spara bilden med menyn "Arkiv/Spara kopia..." (File/Save a copy...). Om du spar bilden som JPEG i medelkvalitet så blir bilden ungefär lika stor och det kan vara svårt att se skillnad i kvalitet mellan GIF-bilden och JPEG-bilden om du inte zoomar in dem till större visningsstorlek. Bägge bilder bör bli ca 25 Kb stora.

Vilken bild skall du då välja? Nedladdningstiden blir ungefär lika lång för bägge två men GIF-formatet har två fördelar: du kan göra dem Transparenta och Animerade. (mer om det i kommande övningar).

GIF 27 Kb	JPEG 26 Kb
Bilden ovan i 300% förstoring GIF 27 Kb	Bilden ovan i 300% förstoring JPEG 26 Kb

Jämför 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.

Öppna dokumentet "regn.tif".
Använd menyn: "Arkiv/Spara Kopia" (File/Save a Copy) och formatet JPEG. Spar a bilden under namnet "regn".
I dialogrutan för JPEG-alternativ kan du börja med kvaliteten "5" och gärna valet "Progressiv" för stegvis inläsning i webläsaren/browsern.
Öppna JPEG-bilden och titta på kvaliteten - kanske kan du spara Originalet en gång till och välja kvalitet "2" eller "3", prova dig fram!
När du är nöjd med din JPEG-bild skall du prova att spara om Originalbilden "regn.tif" i formatet GIF. Börja med att förbereda den för GIF-formatet: "Bild/Läge/Indexerade Färger" (Image/Mode/Indexed Color).
Bilden innehåller fler än 256 färger och alternativet "Adaptiv" är förvalt. Prova att minska färgdjupet till 7 eller 6 bitar och notera hur kvaliteten försämras.
Välj att spara i "bästa" GIF-kvalitet: Adaptiv, 8 bitar/256 färger, Bästa Färgmatchning, Inget Gitter.
Spara den i GIF-format med menyn: "Arkiv/Spara Kopia..." (File/Save a Copy...), ge den namnet "regn".

Öppna slutligen både "regn.jpg" och "regn.gif" och jämför storlek och kvalitet. JPEG-formatet är lämpligast i bägge fallen:

Bäst kvalitet
JPEG 11 Kb

Sämre kvalitet och större storlek
GIF 40 Kb