Archívum - Júl 2, 2014
Responsive/Adaptive kép megoldások
Sziasztok!
A következő helyzetre keresek használható megoldást:
Teljes képernyő szélességű képeket szeretnék megjeleníteni ( min 1920x500 ), rugalmasan. Nem galéria, egy oldalon csak 1 db, dinamikusan kapom, kvázi háttérkép.
De nem tényleges background-image, mert nem akarom minden eszközre és sávszélességre ezt lekérni. Böngészgettem milyen megoldások léteznek erre a feladatra és kipróbáltam a HiSrc.js -t.
( Sajnos a szép, egyszerű szabvány, az srcset még várat magára... )
Ami tetszik benne, hogy ellenőrzi a sávszélességet, egyszerű a beillesztése és magam szerkeszthetem meg a képeket, nem csak lekicsinyíti.
Ezzel szemben - amennyire megértettem a módszert - 2 dolgot ellenőriz összesen, a sávszélességet és a window.devicePixelRatio értéket. 3 képet adhatok meg: 1 - az alacsony sávszélességre ( mobil eszközre ) egy alacsony méretet/minőséget, 2 - gyors netre + pixelRatio = 1 - re ( pl asztali monitor ), 3 - gyors net + pixelRatio > 1 -re ( ezek szintén lehetnek retina mobil eszközök ).
Tehát, ha gyenge a net akkor akkor a kis kép megy ez rendben van, ne kelljen letölteni a nagyot. A 2-es verzióra állítanám a 'normális' képet amit megkap a desktop és a 3-as lenne elvileg akkor kicsit kisebb retinára optimalizált kép. Csakhogy van mobil eszköz is ( pl Iphone3g ) ami ugyan úgy pixelRatio = 1 és akkor wifin a desktop képet kapná. Teljesen felesleges ekkora képet küldeni rá. Illetve más felbontásokra is kisebb képeket kellene küldeni vagy más pontra fókuszálva, mivel a rugalmasságot egyszerűen width = 100% oldottam meg és egy ekkora kép nem feltétlenül mutat jól teljesen lekicsinyítve.
Van tapasztalatotok ezzel a módszerrel?
Kérdezném, hogy teljesen jól értem e a lényegét?
Tudtok esetleg tanácsolni valamilyen jobb eljárást?
Köszönöm, a segítséget!
■ A következő helyzetre keresek használható megoldást:
Teljes képernyő szélességű képeket szeretnék megjeleníteni ( min 1920x500 ), rugalmasan. Nem galéria, egy oldalon csak 1 db, dinamikusan kapom, kvázi háttérkép.
De nem tényleges background-image, mert nem akarom minden eszközre és sávszélességre ezt lekérni. Böngészgettem milyen megoldások léteznek erre a feladatra és kipróbáltam a HiSrc.js -t.
( Sajnos a szép, egyszerű szabvány, az srcset még várat magára... )
Ami tetszik benne, hogy ellenőrzi a sávszélességet, egyszerű a beillesztése és magam szerkeszthetem meg a képeket, nem csak lekicsinyíti.
Ezzel szemben - amennyire megértettem a módszert - 2 dolgot ellenőriz összesen, a sávszélességet és a window.devicePixelRatio értéket. 3 képet adhatok meg: 1 - az alacsony sávszélességre ( mobil eszközre ) egy alacsony méretet/minőséget, 2 - gyors netre + pixelRatio = 1 - re ( pl asztali monitor ), 3 - gyors net + pixelRatio > 1 -re ( ezek szintén lehetnek retina mobil eszközök ).
Tehát, ha gyenge a net akkor akkor a kis kép megy ez rendben van, ne kelljen letölteni a nagyot. A 2-es verzióra állítanám a 'normális' képet amit megkap a desktop és a 3-as lenne elvileg akkor kicsit kisebb retinára optimalizált kép. Csakhogy van mobil eszköz is ( pl Iphone3g ) ami ugyan úgy pixelRatio = 1 és akkor wifin a desktop képet kapná. Teljesen felesleges ekkora képet küldeni rá. Illetve más felbontásokra is kisebb képeket kellene küldeni vagy más pontra fókuszálva, mivel a rugalmasságot egyszerűen width = 100% oldottam meg és egy ekkora kép nem feltétlenül mutat jól teljesen lekicsinyítve.
Van tapasztalatotok ezzel a módszerrel?
Kérdezném, hogy teljesen jól értem e a lényegét?
Tudtok esetleg tanácsolni valamilyen jobb eljárást?
Köszönöm, a segítséget!
