ugrás a tartalomhoz

Responsive/Adaptive kép megoldások

iddqd · 2014. Júl. 2. (Sze), 11.10
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!
 
1

Fontossági sorrendben kb

vbence · 2014. Júl. 2. (Sze), 17.22
Fontossági sorrendben kb ezeket kellene számtásba venni:

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).
2

Egy másik lehetséges megoldás

inf · 2014. Júl. 3. (Cs), 04.31
Egy másik lehetséges megoldás a vektorgrafika SVG-vel, mondjuk ez erősen limitált, ha fényképekről van szó, de esetleg design elemek esetében működhet...
3

Csak ezekről a nagy fotókról

iddqd · 2014. Júl. 3. (Cs), 08.57
Csak ezekről a nagy fotókról van szó, a többi elem nagyrészt background-image és media query -vel lecserélem ha kell.