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.
Relaterade inlägg:
Internet Explorer? Byt webbläsare!
Korta versionen: Vi rekommenderar alla som använder webbläsaren Internet Explorer att byta till en snabbare, säkrare och allmänt bättre webbläsare. Vi rekommenderar följande webbläsare: Firefox, Safari, Chrome eller Opera.
Ofta när jag besöker våra kunder för att hålla en snabbkurs i hur man redigerar, uppdaterar och sköter om sin webbplats med hjälp av webbpubliceringssytem som TYPO3 och WordPress så upptäcker jag att det är Internet Explorer som fortfarande används som standardwebbläsare på datorerna. Detta är inte konstigt då Internet Explorer är en webbläsare som följt med när man installerat Windows på sin dator. Men Sedan många år så har Internet Explorer varit ett mycket dåligt val när man ser på konkurrensen.
Det finns många anledningar till varför du bör byta ut Internet Explorer, jag tänkter inte gå igenom alla här men titta till exempel på nedanstående graf över de olika webbläsarnas prestation vad gäller JavaScript (ju kortare bar, desto bättre resultat):
Källa: Computerworld
Så, använder du Internet Explorer? Iväg med dig och ladda ner någon annan (Firefox, Safari, Chrome, Opera) gratis webbläsare :)
Relaterade inlägg:
