Bandning i bakgrund, JPEG vs PNG

Nyligen gjorde jag en produktfotografering för Adlibris och deras nylansering av läsplattan Letto för e-böcker i samarbete med byrån R/GA. Uppdraget var väldigt hemligt, men nu när den finns att köpa är hemligheten över.

Mitt jobb var dels att fotografera rena produktbilder och dels att fotografera stilleben eller reklambilder som kan användas i marknadsföringen och som dekor på deras webbshop där det passar, alla med olika tema.

Just den här bilden tog jag medan jag testade olika ljussättningar, den har inte använts, men är ett bra exempel på problem med att få till tonade bakgrunder som ser bra ut i webbläsaren, när allt verkar vara jättefint i Photoshop.

Tonad bakgrund är inte alltid så lätt

Bilden ovan är så som den såg ut på kamerans skärm, efter lite småjusteringar i Lightroom 4. Den tonade bakgrunden kommer från en blixt under produktfotobordet med blått färgfilter på. Precis bakom produkten är ljusaste punkten och sedan tonar den av mot kanterna på ett lagom sätt så produkten står ut lite i bilden.

Direkt i kameran såg allt fint ut, och det kändes som en lagom övergång från mörkt till ljus och nyanserna kändes lagom för att få produkten att stå ut lite.

Problemet är bara att toningen innehåller bandningar (”banding” på engelska) vilket i princip är när bildens gradvisa övergång från en nyans till en annan inte kan göras på ett mjukt sätt utan får en trappstegseffekt av olika färgfält.

Bilden är relativt okomplicerad och kan sparas i 100% JPEG-kvalité utan att den blir för stor för webben (i mitt tycke dvs). Men även då kommer problemet som inte syns när när man redigerar den i Photoshop som PSD-fil. Då ser allt mjukt och fint ut.

Gör en egen tonad bakgrund istället

Eftersom formen i bilden är så enkel var det lätt att snabbt göra en friläggningsbana med banverktyget och sedan maska in en toning (gradient) på ett eget lager som gick från blått till svart ute i kanterna. Då såg allt ännu finare ut i Photoshop.

Problemet kom dock tillbaka när jag skulle spara om bilden för webben i Photoshop, även denna gång som JPG med högsta kvalité. Photoshop klarar helt enkelt inte av med detta filformat och färgprofil i webbläsaren att göra en mjuk övergång utan måste låta övergångarna från de olika stegen i färgens ljushet ske i trappsteg.

Inte roligt.

PNG funkar bättre än JPEG ibland

Här är den första bilden igen, dvs den redigerade Photoshop-filen sparad för webb som 24-bitars PNG. Den blå tonade bakgrunden sköts på ett föredömligt sätt och jag kan inte se några hackiga övergångar på min skärm.

Som fotograf sparar jag otroligt sällan bilder som PNG, de tenderar att bli väldigt stora jämfört med JPG och eftersom jag inte sysslar med webdesign är jag inte intresserad av transparens eller andra fördelar filformatet har. Men för just detta, en bild med enkla toningar och former, löser det problemet snyggt.

Tonade bakgrunden till porträtt

Hade det varit ett porträtt skulle jag aldrig tagit den här vägen för att få till en snygg bakgrundstoning för webben, då hade jag hellre lagt på lite brus på bakgrunden eller hela bilden för att få bort bandningen. Det brukar räcka med ganska lite för att bakgrundstoningar ska mjukas upp och inte vara hackiga.

Exemplet ovan, porträttet med avskärmat huvudljus, hade lite liknande problem med den tonade bakgrunden, men där passade det bättre med lite brus och korn.

Ibland ser allt så bra ut i kameran, men efter lite arbete i Photoshop krävs det lite fusk för att få tillbaka den mjuka övergång som man så lätt luras av på kamerans bildskärm. Det tar lite extra tid, men är det enkla former är det inte så svårt.

Hellre det än att störa sig på kantiga bakgrundstoningar, tycker jag.