Spara för webben

1. Inledning

I Photoshop finns möjligheter att optimera sina bilder för webben. De sparas då som GIF-, JPEG- eller PNG-filer. Optimeringen kommer man åt via menyn Arkiv - Spara för webben... Man kan också spara sina bilder via Spara som...-alternativet, men då har man ingen möjlighet att påverka den optimering som sker.

Man pratar om filernas olika vikt. En optimerad bild väger mindre än en icke-optimerad. Skillnaden kan vara ganska betydelsefull på webben, då en alltför tung bild kan ta lång tid att ladda.

Men vid all filoptimering förlorar originalbilden information. Det kan vara pixlar som försvinner, färger som tas bort eller detaljer som blir suddiga. Denna bildförstöring behöver dock inte bli så stor, om optimeringen sker med varsam och kompetent hand.

En optimerad bild som tappat för mycket i kvalitet tenderar att "pixeliseras". Det betyder att man ser pixlarna (bildpunkterna) i den, dvs att den har förlorat i kvalitet. Du kan läsa mer om pixlar på sidan om bildtyper >

2. Optimera en bild i Photoshop

Först av allt måste vi ha en bild att arbeta med. Jag väljer filen zebra.jpg, som följer med Photoshop. Men självklart går det att använda vilken annan bild som helst!

Öppna filen i Photoshop. Här hittar du filen >

Tips!
Förmodligen vill webbläsaren öppna filen. Du kan enklast spara den genom att högerklicka på länken och välja "Spara mål som". I Mac håller du nere musknappen över länken och väljer "Spara mål som".

Obs!
Du kan också alltid öppna bilden och sedan högerklicka på den (hålla nere musknappen i Mac) och spara bilden den vägen.

Gå sedan in under Arkiv - Spara för webben...

Nu dyker en stor ruta upp, som är arbetsfönstret för optimering av bilder. Längst till vänster hittar du fyra olika rutor, som bilden visar:

Handen låter dig ta tag i bilden och flytta runt den. Detta är användbart när du har förstorat den med zoomverktyget, så att inte hela bilden får plats. Förstoringsglaset använder du för att zooma. Håll nere Alt-tangenten för att zooma ut ur bilden igen.

Tips!
Du kan även zooma genom att skriva in ett visst procentvärde längst nere till vänster i Spara för webben-rutan.

Pipetten gör det möjligt att få reda på vilken färg en viss yta har. Färgen syns i den nedersta rutan av de fyra. Den kallas för pipettfärgsväljaren. Du ser också vilken färg som har valts i färgtabellen längst till höger på skärmen.

Längst upp finns fyra flikar. Original visar det okomprimerade originalet. Optimerad förhandsvisar bilden så som Photoshop kommer att spara den med nuvarande inställningar.

Visa 2 (eller 2-up) visar både originalfilen och den optimerade versionen. Visa 4 (4-up) är som Visa 2, men innehåller dessutom ytterligare två alternativ. I båda dessa lägen kan man alltså förhandsstudera de inställningar man själv vill göra.

Klicka på fliken Visa 4

På skärmen ser du nu originalfilen, som är en Photoshop-fil (PSD-fil). Den väger 657kB, vilket motsvarar halva utrymmet på en diskett. Till höger om denna bild finns en föreslagen GIF-version, som är på c:a 160kB.

Som du ser finns det även uppgifter om hur lång tid det skulle ta och ladda filen, vid en viss dataöverföring. Här är grundinställningen 28,8kbit per sekund. De flesta har dock ungefär 56kbit, så vi ändrar denna inställning.

Klicka på den lilla svarta pilen ovanför bilden uppe till höger

Då aktiveras en meny som du ser på bilden. Den kallas för Förhandsvisa-menyn.

Ändra värdet till vad du vill. 56,6kbit är det jag själv använder. När du ändrat anpassar Photoshop alla värden på skärmen.

Man kan i den här menyn även ställa in om man vill använda andra färguppsättningar. Men om bilderna man gör skall läggas ut på Internet finns det inga skäl att ändra. Skall de däremot läggas in på en intern hemsida på ett företag och alla använder samma slags operativsystem, kan man ställa in en annan färguppsättning.

Att en bild tar 30 sekunder att ladda är ju givetvis inte så bra. Man brukar därför göra "tumnaglar" (thumbnails) av stora bilder, eller dela upp dem i delar. Du kan läsa mer om detta på mina sidor om bilder och färger >

Här skall vi nu studera hur en hög komprimering påverkar bildkvaliteten. De två nedersta bilderna ger en aning om möjligheterna. I min dator är båda GIF-varianter. Det som skiljer dem är att de utnyttjar olika färgreduceringsalgoritmer.

Dessa ställer man in under menyn längst upp till höger, som du ser på bilden. Under Selektiv hittar du ett antal olika alternativ. Den indikerar ett antal olika sätt att reducera färger på.

Perceptuell använder en färgskala med färger som det mänskliga ögat är känsligt för.

Selektiv är ungefär som perceptuell, men använder om möjligt webbsäkra färger. Bör användas om man inte känner till alternativen.

Adaptiv favoriserar de vanligaste färgerna i bilden.

Webb utnyttjar endast de 216 webbsäkra färgerna och bör endast användas för enklare bilder med få färger. Du hittar en palett med de webbsäkra färgerna under den här länken >

Egen kallas Custom på engelska och låser fast nuvarande färgskala.

Mac/Windows använder de färgskalor som finns inbyggda i respektive operativsystem. Som jag sade tidigare bör man vara restriktiv med dessa inställningar, eftersom besökarna på Internet oftast har olika plattformar. Satsa i stället på webbsäkra färger.

Det finns mycket man kan ställa in för att påverka optimeringen. Det finns t.ex inställningar för hur ljuset skall återskapas i en optimerade bilden. Detta kallas med ett finare ord för diffusion.

Gitter innebär att en färg simuleras genom att blanda färger av andra nyanser. Detta åstadkommer man på skärmen genom olikfärgade pixlar, som från ett visst håll smälter samman och bildar en ny färg.

Man kan också ställa in hur många färger som skall användas, liksom hur många pixlar som skall tas bort. Färgförlusten påverkas av en mängd olika faktorer och det finns särskilda böcker för hur man kan ställa in olika värden.

Man kan givetvis också gå från andra hållet och ställa in hur stor filen skall bli efter optimeringen. Då ställer Photoshop in de värden som åstadkommer detta.

För att komma dit klickar man på den svarta pilen med en rund ring omkring. Välja alternativet Optimera till filstorlek och skriv in hur stor filen skall vara, t.ex 30kB. Blir du inte nöjd kan du också återställa bilden inifrån denna meny.

Tänk också på att man får upp något olika menyer, beroende på vilket filformat man väljer att exportera till. Ett bra sätt att komma in i de olika alternativen är att testa själv:

Klicka på handen och ta tag i zebran. Dra i den så att du får fram zebrans ögon

Klicka på den högra bilden längst ner och ändra inställningarna så att du ser hur de påverkar bildkvaliteten.

Jämför hur olika inställningar påverkar kvaliteten och hur detta i sin tur påverkar nerladdningstiden.

3. Ändra färger i bilden

I vissa av optimeringslägena har man också tillgång till en färgtabell, som du ser på bilden.

Med denna och med pipetten kan man hitta olika färger i bilden. För att välja flera färger håller man bara nere Shift- eller Ctrl-tangenterna och markerar en ny färg.

De fyra rutorna längst nere i färgpaletten gör det möjligt att ändra färgerna i bilden. Det första alternativet gör färger webbsäkra.

Man kan också låsa fast färger så att de säkert kommer med vid optimeringen. Det tredje och fjärde alternativet innebär att man lägger till eller slänger färger.

En färgruta får en vit prick i sig om den är webbsäker och en svart prick om den har ändrats.

Man kan lätt ändra en färg genom att dubbelklicka på den och skriva in den färgkod man vill ha. Rutan märkt med # är till för HTML-färgkoder.

En fyrkant i nedre högra hörnet betyder att färgen är låst. En schackrutig fyllning betyder att färgen är transparent (genomskinlig) och alltså inte alls syns sedan bilden optimerats.

Slutligen: När man är klar klickar man bara på OK och sparar filen på ett lämpligt ställe.