Mneneje; razrezati večjo Sliko ali ne?

Vaše mnenje pri nalaganju večjih slik-grafik na spletno stran;

  • format jpeg, (sporočilo na sliki-grafiki je bistvo strani!)
  • dimenzije: 800x300 in 800x800 cca.
  • teža 60 - 170 k
  • ena taka slika na vsaki strani
  • gre za enostavne strani z divi in css
  • želim se izogniti neprijetnemu efektu dvigajoče se zavese...

Torej, bi bilo OK slike razrezati na manjše kose zaradi hitrejšega nalaganja?
2, 4, 6 ? ... manjših kosov, naloženih v en div.
To počnem sedaj in se obnese vredu. Mnogi nasprotujejo.

Kaj mi vi svetujete? Obstajajo boljše varijante?

Hvala.

12 odgovorov

Če je velikost skupnih slik ista kot če je ena, potem bi prej rekel da ne, saj se minimalno pozna na requestih.

Če je manjše, potem načeloma ja. Toda če ni kakšne velike razlike bi rekel da nima smisla.

LP

1

Torej, če prav razumem, ti rešuješ problem curtain effecta s tem, da razrežeš image na manjše enote in jih nato vsako posebej predstaviš v, recimo, zlepljenih <img> tagih oz. podobno? No, vsekakor zanimiv pristop :) Sicer verjamem, da na nek način deluje - ampak, poleg vprašanja requestov, ki ga bomo izpustili tukejle, je to hkrati nočna mora za maintainability, pa cel kup enga dela maš s tem, skratka, priden morš bit.

Ampak, glede na to, da te konckoncev skrbijo uporabniki (kar je dobro), boš pa zadevo elegantno izpeljal z navadnim ajax preloading spinnerjem, to je preverjena, enostavna metoda, ki smo je dandanes vsi navajeni.

Thanks. Sem razumel bistvo odgovorov.

Še dodatno.
Zasledil sem strani, ki vsebujejo podobne slike, kot so moje in se naložijo v "tisočinki" sekunde, direktno, komplet slika. Resnično neopazno za oko. Brez preloader efektov!
Tole njihovo isto sliko sem pobral z neta in jo za preizkus postavil na mojo stran; rezultat=gledališka zavesa!
Tole je moj problem, ne razumem še kjere druge tehnologije obstajajo.

Žal moje znanje ne sega dlje, čeprav sem se resno spravil doštudirat css, java script, jqerry.

Ena od variant je pomnenje slike na obiskovalčevi mašini.
V htaccess dodaš <FilesMatch "background.jpg"> Header set Expires "Sun, 1 Jan 2017 20:00:00 GMT" </FilesMatch>.
Pomeni, da se bo slika shranila ob prvem obisku pri obiskovalcu in se naslednjič nalagala iz njegovega diska namesto iz serverja.

1

Vendar mora za to obiskovalec vsaj enkrat obiskati stran.

Poglej si se CDN, ponavadi vidis da se slike loadajo iz static.domena.com ali kaj podobnega. Veliki imajo lahko server kje v blizini, kar si ti ne mores privosciti.

Sem se spravil malo poštudirat glede vaših namigov. Hvala za odgovore vsem odzgoraj!

Upam, da imaš repeat-x ali repeat-y, če ti tvoja grafika to omogoča, ker načeloma pri teh gradientih lahko narediš pas širine ali višine 1px (druga dimenzija pa je pač kolikor mora biti).
Potem pa še daš v sprite z drugimi slikami ki jih rabiš v cssju in nalaganje bo res hitro.

Če imaš čisto povprečno spodoben strežnik in jpg v normalni resoluciji za splet, potem to sploh ne bi smelo igrati vloge.
170kb je sicer na prvo oko preveč za tako sliko, a kljub temu bi moralo normalno funkcionirat.

@matjaž - všeč +1

@robi123 - nemudoma spremeni v .gif!