Do This to Improve Image Loading on Your Website – Jen Simmons

Nalaganje slik na spletnih straneh pri nižjih hitrostih povzroči t.i. »jank« efekt. To pomeni, da med nalaganjem celotne vsebine strani vsebine skačejo, ker se vmes vrinejo slike, ki se prenašajo počasneje, kot sama vsebina.

Razlog za t.i. »jank« tiči v tem, da ima element IMG za višino običajno vrednost 0. Ko se vsebina prenese pa slika nima več velikosti 0, zato se ponovno izriše (repaint). Težava je bolj očitna pri vsebinsko bogatih stranmi, kot so npr. novičarski portali.

Tega problema sicer včasih nismo poznali, ker je imela vsaka slika atribute širine in višine, ki so določali prostor za sliko. Ta metoda ni povzročala težav, saj se je prostor za sliko označil prej, tako da efekta »jank« ni bilo. Težava pa je nastala z vpeljavo odzivnega designa (RWD). Slednji namreč zaradi odzivnih slik običajno ne uporablja atributov višine in širine.

Firefox in Chrome pa prinašata novost, in sicer avtomatiziran proces, kjer se avtomatsko določi prostor za sliko na podlagi podatkov višine in širine v kombinaciji s CSS-jem. Vse kar je potrebno narediti je prilagoditi CSS kodo za odzivne slike.

CSS koda:

img {
display: block
width: 100%
height: auto;
}

Platforme, kot je npr. WordPress že avtomatsko doda parametre višine in širine, vse kar je potrebno narediti je preveriti CSS kodo, če je ustrezna. Če pa želimo doseči podoben efekt, kot ga imajo aplikacije, npr. Facebook, … kjer predhodno označimo prostor za sliko, ki se nalaga pa moramo svoji kodi dodati še ozadje. Tu bodite pozorni, če imate prozorne PNG slike, kajti slednje bodo dobile ozadje.

Oznake: imgRWD

Komentiraj


*