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!
Fontossági sorrendben kb
Internet tarifa (forgalmi vagy általánydjas) - erre nincs mód.
Sávszélesség - erre nincs igazán mód (persze az extrémek azért detektálhatók, ha túl nagy lesz a DOMContentLoaded előtt eltelt idő és a document.body.innerHTML.length aránya).
Fizikai pixelméret - ez a legtöbb esetben detektálható.
Amivel valójában számolhatsz az a pixelméret. Nem szeretnéd számottevően nagytani a képeket a kijelszőn (a kontrasztvesztés miatt).
Egy "merjünk nagyot" megoldás egy Apache modul lenne, ami progresszv PNG-ket használva kérés után X miliszekuntummal (a kép nagyságától függően) elvágná a kiszolgálást. Vagyis teszemazt 5 megabites Internettel és afölött mindenki a teljes fájlokat kapná, azalatt viszont csak arányosan kevesebbet (fél megabites kapcsolattal a fájl első 10%-át - persze ez a görbe tuningolható). A progressziv kódolás gondoskodik róla, hogy a letöltött bájtok képi információként optimálisan haszonsuljanak (hatás szempontjából megkülönböztethetetlen egy kisebb méretű, de felnagyitott képtől).
Egy másik lehetséges megoldás
Csak ezekről a nagy fotókról