↓ Archives ↓

Posts Tagged → billeder

Loadtid på ikoner og andre små billeder

Som nævnt i mit forrige indlæg er det meget tidskrævende at loade mange komponenter på ens webside — hvert request ta’r tid.

Derfor har jeg et lille trick til ikoner. Det er ikke unormalt at en side indeholder 20-30 forskellige ikoner, og det kan i nogen tilfælde tage lang tid at loade da browseren skal lave et request pr. ikon, og med en typisk begrænsning på 2 request på hostnavn skal man ikke undervurdere problemet.

Tricket går ud på at læse ikonerne ind i ens stylesheet, og dermed spare måske 25 request. Det gør selvfølgelig at ens stylesheet bliver større, men samlet bliver loadtiden mindre. Stylesheetet skal selvfølgelig komprimeres med mod_gzip/mod_deflate, og der skal sættes nogle passende cache-headere-

Formatet er som følger:

1
2
3
4
.icon1 {
  background-image: url(data:image/png;base64,
                        BASE64_ENCODED_DATA);
}

Hvor BASE64_ENCODED_DATA skal erstattes med en base64 encoded fil, og image/png skal sættes til den rigtige content-type.

Det er også muligt at gøre det andre steder end i ens stylesheet, som fx:

1
<img src="data:[...]" alt=""/>

Men det ville jeg nok ikke gøre, med mindre html-dokumentet caches.

Fidusen med at have ikonerne i stylesheetet er at det typisk bliver cached grundigt.

Jeg så en ugle!

Jeg er lige kommet hjem herude fra (det var bare hvidt, og ikke grønt som Google siger).

Jeg havde mit kamera med, da jeg håbede lidt at jeg ville se havørnene, men det gjorde jeg selvfølgelig ikke. Jeg så dog en ugle :-O

Resten af billedene er på flickr.

Nattebilleder fra snevejret i Odense

Jeg gik lige en tur i området hvor jeg bor i går aftes. Resultatet kan ser herunder (tryk på billedet)