obrazky na resp. webe

mam zoznam fotografii, ktore maju velkost v originali napr. 1024x768 a velkost napr.400KB. Tieto fotografie sa v zozname zobrazuju ako 200x150, avsak su len fixne zmensene v image tagu.

Tych fotografii je tam viac, takze pre mobilne zariadenia by som chcel nejak usetrit data uzivatelom, pretoze sa fotografie nacitavaju v povodnej velkosti, akurat su zmensene.

Nechcem vsak vytvarat zvlast thumbnaily pre kazdu foto. Kedysi som pouzival php clasuu tusim thimthumb, ktora za chodu zmensovala obrazky a ukladala do cache priecinka, no tento subor bol celosvetovo hacknuty, a nechcem momentalne nic podobne pouzit.

Ako by ste riesili taky zoznam obrazkov na mobiloch? Zbytocne bude nacitavat obrazky vo full velkostiach, ked zobrazi mensie...

Máš dve možnosti - ako si povedal, buď za chodu zmenšiť obrázky a uložiť do cache, alebo si vopred uložiť viacero veľkostí a užívateľovi zobrazovať správnu veľkosť (osobne mám radšej toto riešenie, samozrejme sa to musí riešiť dynamicky pri vkladaní cez administráciu. Určite nie manuálne cez photoshop alebo dačo podobné). Je v podstate jedno, ktorý spôsob si vyberieš, ale použiť jeden obrázok a len dynamicky zmenšiť je zlé riešenie.
V prípade väčšieho počtu obrázkov je fajn pouvažovať aj o asynchrónnom načítaní.

php modul ti aj tak vrati iba pozadovanu velkost a nie podla zariadenia. php nie je riesenie.

html5 predstavilo atribut srcset, ktory sluzi presne na toto, ale este nie je podporovany vsetkymi browsermi - http://caniuse.com/#feat=srcset
takze ako najlepsie riesenie vidim pouzit srcset alebo iny data atribut, do ktoreho vlozis pole obrazkov, a spravny obrazok dosadis pomocou js.

priklad:
<img src="" data-src="{'desktop' : ' my-image_full.jpg', 'tablet' : 'my-image_medium.jpg', 'mobile' : 'my-image_small.jpg'}">
a pomocou js dosadit do src ten ktory treba podla zariadenia.

hatto13: to riesenie je zaujimave, hoci ako pises zatial neni uplne crossbrowser podporovane, ale podla toho by som musel vytvorit rozne velkosti obrazkov. Tak isto aj walther co pise, vytvarat mensie velkosti pre 600 a viac obrazkov sa mi nezda moc cool...

Samozrejme tie thumbnaily viem vytvorit hned pri vkladani cez administraciu automaticky, o to nejde, len zbytocne budem zaberat priestor hostingu rovnakymi obrazkami roznych velkosti.

Ale zrejme v zaujme usetrenia dat na mobiloch to predsa len spravim tak. Napr. to pomocou php on the fly sa resizne obrazok len vtedy ked ho uzivatel zobrazi a ulozi sa do cache docasne, kde sa stale prepisuje po istom case novymi thumbnailmi. Toto nie je tiez zle riesenie, ale nechcel som toto pouzit.

S tym asynchronnym nacitanim neviem presne co myslis.

to riesenie s js je crossbrowsove (iba nativne srcset bez js nie).
600 obrazkov vobec nie je vela, a ani ked vytvoris 3 rozne velkosti pre kazdy. to je uplne normalne na weboch ze pocet obrazkov sa pohybuje v tisicoch. radsej zabrat viac priestoru ako zbytocne nacitavat o niekolko mb viac pri kazdom refreshi.

najidealnejsie riesenie by si mal:
vytvarat obrazky on the fly v php, s tym ze by si vytvorit tri(4, viac) rozmery pre obrazok, a pouzil by si to riesenie s js co som ti napisal vyssie.
v takomto pripade by si vytvaral obrazky len ked by bolo treba a boli by cachovane na serveri a v prehliadaci by si zobral iba ten rozmer, ktory treba.

a uplne najlepsie by bolo keby si pouzil este lazy loading -> obrazok sa nacita iba ked nanho naskrolujes (odporucam https://www.npmjs.com/package/blazy ). a to je v podstate to asynchronne riesenie, lebo obrazky sa nacitavaju az ked uz je zvysok stranky nacitanej. alebo pomocou ajax-u ich nacitavat.

diky!

Ak si noekto vypne js tak bude mat ale polku stranky na dve veci este na to by som myslel

To sa dá ľahko vyriešiť

kralicek: kolko dnesnych stranok funguje bez js?