Bakgrundsbilder som täcker webbläsarfönstret

De flesta webbplatser har en enfärgad bakgrund. En del har en upprepningsbar bakgrundsbild (textur), som t ex kan föreställa en trästruktur eller en tapet. Sådana bilder kan man skapa i t ex Adobe Photoshop med en kreativ kombination av filtret ”Förflyttning”, klonpensel och lagerhantering. Eftersom behovet av upprepningsbara bilder inom t ex spelutveckling och 3d-modellering har funnits sen tidernas gryning är det naturligt att även äldre versioner av Photoshop klarar det med bravur.

Men ibland vill man ha en bild som verkligen täcker hela fönstret, utan upprepning. T ex en stämningsfull höstbild. Då behöver man tänka på att folk har olika skärmupplösning, och en bild i full HD (1920*1080) som ser jättebra ut på en bra skärm kommer att bli extremt beskuren på en lågupplöst netbook. Dessutom är det slöseri med bandbredd. Därför behöver man använda JavaScript för att se vilken upplösning besökaren har. JavaScriptet skickar sedan en förfrågan till en php-fil som körs i en dold iframe. Php-filen skalar då om bilden med hjälp av gdlib så att den blir rätt upplösning, och sätter den som bakgrund på sidan med ett JavaScript.

Att skala om bilder för varje besökare kostar dock en hel del processorkraft för vilken server som helst, och ger en oacceptabel fördröjning för besökaren. Därför sparas alla omskalade bilder, och php-filen kollar först om det inte redan finns en bild med rätt upplösning.

Men varför skärmupplösning? Blir inte bilderna mindre om man går på fönsterstorlek i stället?

Jo, de blir mindre. Och om det handlade om bildspel är det bättre med fönsterstorlek. Men användartester visar att många besökare gärna förstorar webbläsarfönstret om bakgrundsbilden är riktigt snygg. Och det ser inte så bra ut om bilden bryts mot en enfärgad bakgrund. Dessutom blir det färre omskalade kopior av bilden som behöver sparas på servern.

Uppdatering 2010-09-17

Vi använder ovanstående lösning för vår egen webbplats www.jarnakommunikation.se. Det är viktigt att omskalning och beskärning sker med avseende på både höjd och bredd, för att undvika att bilden förvrängs. Då ser det ut ungefär som när ett tv-program för 4:3-format sträcks ut i widescreen-format.

Jesper Thörn Webbutvecklare, Nätv.tekniker 073 656 51 72 jesper@jarnakommunikation.se