Sziasztok. Elkéstem egy új cikkel (adtam magamnak néhány szabadnapot, és kimentem a tengerpartra). De remélem ezzel a cikkel egy kicsit bepótolom ezt az esetet :)

Az adaptív képek problémája meglehetősen aktuális, ezért egy kis érveléssel és megvalósítási módszerekkel kezdem, majd kiemelem azt a lehetőséget, amely szerintem a legjobban megfelel.

Tehát körülbelül egy éve úgy gondoltam, hogy egy kép reszponzívvá tételéhez (vagyis a tároló szélességéhez való nyúláshoz vagy zsugorodáshoz) csak a következő kódot kell használnia:

Wrapper img(szélesség: 100%;)

És valóban, bizonyos esetekben ez korlátozható. Ez a trükk nagyszerűen működik, amikor a böngészőablak kisebb lesz. De mi van akkor, ha a tároló szélessége, amelyben a kép található, nagyobb lesz, mint a kép felbontása? Jobb. A kép a tartály szélességében átnyúlik, de a minőség sok kívánnivalót hagy maga után. De mi van akkor, ha támogatásra van szüksége a 2048x1536 képpontos felbontáshoz?

Ha nem használod az svg-t és raszteres képről van szó, akkor az első dolog, ami eszedbe jut, hogy olyan képet készíts, ami a céloldal maximális felbontásához illeszkedik, és a böngészőablak átméretezésekor tömörítve lesz normál minőségben.

És akkor felmerül a teljesítményprobléma. Hülyeség, hogy egy okostelefon ekkora képeket tölt be, amelyek retina felbontásban jól néznek ki. Hiszen a mobilhálózatok sebessége nem olyan nagy, mint egy PC-é, és előfordulhat, hogy egyes felhasználók nem várják meg, amíg a céloldal betöltődik okostelefonjára. Az eredmény egy elveszett ügyfél.

Megpróbálhat több div-t képekkel meghatározni, majd médialekérdezések segítségével elrejteni a feleslegeseket, és csak az aktuális felbontásnak megfelelő képet jeleníteni.

Úgy tűnik, a probléma megoldódott. De tény, hogy a böngészők az oldal megjelenítésének felgyorsítása érdekében a css feldolgozása előtt előre betöltik a html-be írt képeket. Lehet, hogy nem fejeztem ki magam egészen helyesen (javítsatok ki), de ha végrehajtja ezt a trükköt, akkor az összes kép betöltődik, függetlenül attól, hogy mi van a css-ben. Ez azt jelenti, hogy a mobileszközök helyzetét csak rontottuk. Most nem egy, hanem több képet kell feltölteniük.

Ezt úgy ellenőrizheti, hogy megnyitja a fejlesztői eszközöket, és megnézi a „Hálózat” lapot.

Általánosságban elmondható, hogy még mindig sok probléma merülhet fel az adaptív képek létrehozásakor. És jó néhány megoldás is felhalmozódott. Minden a konkrét helyzettől függ.

A html 5-ben megjelent a képcímke, amely lehetővé teszi a legtöbb probléma megoldását, és kifejezetten adaptív (reszponzív) tervezés létrehozására készült. Kialakítása a video- és audiocímkékre emlékeztet. A munka lényege, hogy a képcímkén belül több kép is meg van adva bizonyos képernyőfelbontásokhoz. Valahogy így néz ki:

A sajátosság az, hogy az src helyett az srcset és a médialekérdezésekhez hasonlót használnak. Egy kis kép 319 képpontnál kisebb felbontásban töltődik be. Átlagos kép 320-480px felbontással stb.

Ezen az oldalon láthatja, hogy a böngésző jelenleg támogatja-e a képcímkét.

Általánosságban elmondható, hogy új címkék használatakor azt javaslom, hogy nézze meg ezt az oldalt, és ellenőrizze a dolgok jelenlegi állását.

Amint látja, a jelenlegi helyzet sok kívánnivalót hagy maga után. IOS-eszközökön, Macbook(ok)on és IE-n nincs támogatás (bár az IE-felhasználók nem sajnálják őket, szenvedniük kell :)). Úgy gondolom, hogy nem vagyunk készek ennyi felhasználó elvesztésére. Nem, rosszul fogalmaztam. Ne veszítse el, mert a fő képünk betöltődik és megfelelően jelenik meg. De ennek ellenére szeretném, ha nem veszítenék el az apple technológiás vásárlókat a hosszú oldalbetöltési idők miatt, hiszen ez nagy valószínűséggel fizetőképes közönség :)

A címke előnyeinek most való kihasználásához egy kis szkriptet kell használnod (a head címkék között) picturefill.js .

Mostantól minden eszköznek támogatnia kell ezt a struktúrát az adaptív képek elrendezéséhez. Igaz, nem teszteltem Mac-en (még nem kaptam).

A fent leírt módszerrel ellentétben most csak egy kép kerül betöltésre, és nem három, mint korábban.

Ez nem egy trükkös módszer. Hogyan lehet reszponzívvá tenni a képeket? Kérjük, ossza meg módszereit a megjegyzésekben. Köszönöm.

Ebben a rövid oktatóanyagban megvizsgáljuk a CSS használatával reszponzív képek létrehozásának legegyszerűbb módjait. Nagyon sok különböző megoldás létezik a képek reszponzívvá tételére, ezek mindegyike eltérő bonyolultságú és a böngészőtámogatás mértékében. Példa a reszponzív képek megvalósításának összetett módjára az srcset attribútum használata, amely több képet, több jelölést igényel, és a böngésző támogatásától is függ.

A modern specifikációk lehetővé teszik, hogy a weboldalak oldalain használt képeket rugalmassá és helyesen jelenítsük meg a különböző felhasználói eszközök képernyőjén, ehhez elég csak néhány tulajdonságot használni a CSS klipből.

Alapvető reszponzív képértékek

Kezdjük azzal, hogy nézzünk meg egy alapvető példát, ahol a bejegyzésekben vagy más egyes blokkokban használt egyes képeket teljes mértékben reszponzívvá kell tennünk. Például van egy konténerünk, amelynek alapszélességét adtuk meg: 96%; és állítsa be a maximális szélességet max-width-re: 960px; , ebben a blokkban egy adaptív képet kell megjelenítenünk. Ehhez az elemhez a tárolón belül a szélességet 100%-ra állítjuk, így a szélessége mindig megegyezik a tároló szélességével, függetlenül a nézetablak méretétől. Ennek megfelelően a magasságot automata módba kapcsoljuk, ennek hatására a kép arányosan változik.

HTML: CSS: div.container ( szélesség: 96%; maximális szélesség: 960 képpont; margó: 0 automatikus; /* a fő tároló középre állítása */ ) img ( szélesség: 100%; /* kép szélessége */ magasság: automatikus; /* magasság Képek */ )

vegye figyelembe, hogy az elem akkor is reszponzív lesz, ha a szélesség és magasság HTML attribútumainak rögzített értékeit közvetlenül a jelölésben adták meg.

Sziasztok! Kitaláltuk, mi az az adaptív elrendezés, a rács, és hogyan tehetjük adaptívvá a betűtípusokat. Most nézzük meg, hogyan adaptálhatjuk a képeket.

Ez valójában egy nagyon egyszerű téma, és nem fog sok időt igénybe venni.

Ahhoz, hogy képei érzékenyek legyenek, csak hozzá kell adnia a max-width=100% tulajdonságot.

img (
maximális szélesség: 100%;
}

Minden! Most a képünk nem nyúlik túl a szülőtárolón, és a képernyő felbontásától függően alkalmazkodik.

A képeken kívül ezt a technikát videókhoz és egyéb médiafájlokhoz is használhatja.

img, beágyazás, objektum, videó (
maximális szélesség: 100%;
}

Minden rendben lenne, de ez csak IE7+-ban működik. Ha támogatnia kell az IE6-ot, akkor ez a tulajdonság ott működik a következő bejegyzésben:

img (
szélesség: 100%;
}

Azok. A max-width helyett szélességet írjon.

Egy másik probléma, amellyel találkozhat, a rossz képméretezés a Windows rendszerben. Igen, pontosan a rendszerben, nem a böngészőben. Ha alaposan megnézed, láthatsz néhány műtárgyat.

A probléma megoldása IE esetén egyszerű.

Logó (
háttér: nincs;
szűrő: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Azok. A szűrő tulajdonság segít a probléma megoldásában.

Alkalmazkodó, mindegyik különbözik összetettségükben és a böngészőtámogatás mértékében. Példa a reszponzív képek megvalósításának összetett módjára az srcset attribútum használata, amely több képet, több jelölést igényel, és a böngésző támogatásától is függ.

Hagyjuk a felesleges unalmasságot, a modern specifikációk lehetővé teszik, hogy a weboldalakon használt képeket rugalmassá és helyesen jelenítsük meg a különböző felhasználói eszközök képernyőjén, ehhez elég csak néhány tulajdonságot használni a CSS klipből.

Példákat készítettem adaptív képek többféle változatára, egyetlen képre, két vagy több oszlopos képekre, valamint példát nagyméretű háttérkép használatára, garantált alkalmazkodóképességgel. Minden beállítás a képek szélességi tulajdonságának százalékos értékén, a magasság tulajdonságának automatikus értékén alapul.

img (szélesség: 100%; magasság: automatikus;)

img (szélesség: 100%; magasság: automatikus; )

Alapvető reszponzív képértékek

Kezdjük azzal, hogy nézzünk meg egy alapvető példát, ahol a bejegyzésekben vagy más egyes blokkokban használt egyes képeket teljes mértékben reszponzívvá kell tennünk.
Például van egy konténerünk, amelynek alapszélességét adtuk meg: 96%; és állítsa be a maximális szélességet max-width-re: 960px; , ebben a blokkban egy adaptív képet kell megjelenítenünk.
Ehhez az elemhez a tárolón belül a szélességet 100%-ra állítjuk, így a szélessége mindig megegyezik a tároló szélességével, függetlenül a nézetablak méretétől. Ennek megfelelően a magasságot automata módba kapcsoljuk, ennek hatására a kép arányosan változik.

div.container ( szélesség : 96 % ; maximális szélesség : 960 képpont ; margó : 0 automatikus ; /* a fő tároló középre helyezése */ ) img ( szélesség : 100 % ; /* kép szélessége */ magassága : auto ; /* kép magassága * / )

div.container ( szélesség: 96%; maximális szélesség: 960 képpont; margó: 0 automatikus; /* a fő tároló középre állítása */ ) img ( szélesség: 100%; /* kép szélessége */ magassága: automatikus; /* kép magassága * / )

vegye figyelembe, hogy az elem akkor is reszponzív lesz, ha a szélesség és magasság HTML attribútumainak rögzített értékeit közvetlenül a jelölésben adták meg.

Reszponzív oszlopképek

Néha szeretnénk látni a képeket egymás mellett, vagy egy rácsban, például egy egyszerű képgaléria rendezéséhez.
Ehhez csak kis módosításokat kell végrehajtania a fent használt kódon, az első a szélesség tulajdonság szélességének csökkentése és az elem beállítása a megjelenítési tulajdonság inline-block értéke, azaz. tedd sorba.
Nézzünk két elrendezést: egy kétoszlopos képelrendezést és egy háromoszlopos elrendezést.

1. Kétoszlopos képelrendezés
Kétoszlopos képelrendezés esetén beállíthatjuk a szélességet 48%-ra, vagyis körülbelül a tároló felére. Nem állítjuk be az értékeket 50%-ra az oldalsó párnázás érdekében.

img (szélesség: 32%; kijelző: inline-block;)

img (szélesség: 32%; kijelző: beépített blokk; )

Adaptív képek feltételes elhelyezése

A következő példában megfontoljuk az adaptív képek alkalmazásának lehetőségét különböző elrendezéssel, a megtekintési eszközöktől függően, pl. Okostelefonon nézegetve a képek egy oszlopban, táblagépeken két, nagyobb képernyőkön pedig négy oszlopban jelennek meg.
Ennek megvalósításához @media media lekérdezéseket fogunk használni, megadva azt a médiatípust, amelyre ez vagy az a maximális képszélesség max.

/* Kisméretű eszközökhöz (okostelefonokhoz) */ img (max. szélesség: 100%; kijelző: inline-block; ) /* Közepes eszközökhöz (táblagépekhez) */ @media (min. szélesség: 420 képpont) ( img ( max- szélesség: 48%; ) ) /* Nagyméretű eszközökhöz (laptopok, PC-k) */ @media (min. szélesség: 760 képpont) ( img (max. szélesség: 24%; ) )

Az egész nagyon egyszerű, nem? A médialekérdezések ötlete nagyszerű, már jó ideje létezik, és széles körben használják. A példában látható paraméterek jól működnek ezzel az elrendezéssel; alaposan ellenőrizni kell, hogyan viselkednek más kialakításokban, így...

Teljes képernyős reszponzív kép

Ahhoz, hogy széles formátumú, reszponzív képeket készítsen, amelyek a nézetablak méretének 100%-át kitöltik, egyszerűen el kell távolítania a tároló max-width tulajdonságát (960 képpont érték), és 100%-ra kell állítania a szélességét. A kép szélessége is 100%-ra van állítva.

.container ( szélesség : 100 % ; ) img ( szélesség : 100 % ; )

Tároló (szélesség: 100%; ) img (szélesség: 100%; )

Bár ez a technika nagyon könnyen használható, és erős böngészőtámogatással rendelkezik, ne feledje, hogy a képek mindig teljes méretben jelennek meg, pl. Nagy, nagy felbontású képek jelennek meg a teljes teret kitöltve, ami kis mobileszközök esetén nem mindig megfelelő, hacsak nem háttérképként használják a képet.

Valószínűleg ennyi. Ha külön-külön, különböző méretű képeket szeretne használni a különböző eszközökhöz, használja azokat, biztosan nem lesz rosszabb. Tudsz más módszereket a képek adaptálására, írd meg kommentben, biztosan megfontoljuk, az újak mindig érdekesek.

Megjelenés dátuma: 2013-12-16

A szerzőtől: Ha webhelyeket kódol, akkor fogadhatok, hogy legalább egy ügyfele érdeklődött vagy rendelt olyan weboldalt, amely támogatja az érintéses bevitelt. Ha a reszponzív tervezést választja (amely során webhelye elég rugalmas ahhoz, hogy vizuálisan alkalmazkodjon a képernyő szélességéhez mobilról asztali számítógépre), akkor szüksége lesz egy stratégiára a reszponzív képek létrehozásához – egy reszponzív képmegoldásra.

Az alapok elsajátítása meglehetősen egyszerű, de ha egyszer rájön, rá fog jönni, hogy a képméretezés még csak a kezdet, és meg kell küzdenie a teljesítményproblémákkal és a művészeti irányzattal kapcsolatos problémákkal is. A reszponzív képprobléma megoldásainak széles választékával kell szembenéznie, mindegyiknek megvannak a maga erősségei és gyengeségei – és egyik sem tökéletes! Ez a cikk bemutatja az alapokat, majd felvértezi azokkal az információkkal, amelyekre szüksége van ahhoz, hogy kiválassza az Ön helyzetének legmegfelelőbb reszponzív képmegoldást.

Alapok

Nagyon egyszerű az előtérben lévő képek stílusát a tároló szélességéhez igazítani. A következő kód kerül hozzáadásra a stíluslaphoz, esetleg normalizálási vagy visszaállítási stíluslaphoz:

img (max. szélesség: 100%; )

img( maximális szélesség: 100%;

A legtöbbször ez az apró formázási szabály hozza meg a kívánt eredményt! Álló helyzetben, ha a kép körüli tároló keskenyebb lesz, mint a szélessége, a kép méreteződik a tároló szélességéhez. A maximális szélesség 100%-ra állítása azt is biztosítja, hogy a kép ne legyen nagyobb a tényleges méreténél, ami jelentősen rontaná a minőségét. Ha elakadt az IE 6 vagy 7 támogatása, akkor hozzá kell adnia egy szélesség: 100% stílusszabályt, amely csak ezeket a böngészőket célozza meg, mert nem értik a maximális szélességet.

A nagy felbontású „Retina” képek megnehezíthetik ezt az egyszerű megvalósítást. Tegyük fel, hogy szüksége van egy 150x150 képpontos logóra, hogy a normál méret duplája pixelsűrűséggel jelenjen meg, és a kép elég kicsi ahhoz, hogy két külön variáció beszerzése nem okoz gondot. Tehát létrehozza a logó 300 × 300 képpontos változatát, bekapcsolja – és most már hatalmas! Az első megérzésed az lehet, hogy megpróbálsz valami ilyesmit CSS-ben:

img.sitelogo (max. szélesség: 150 képpont; )

img. sitelogo ( max - szélesség : 150 képpont ;

Sajnos semmi sem működik a várt módon – az embléma képe most már nem fog megfelelően méretezni az oldalon lévő többi képpel együtt.

Egy reszponzív kép maximális szélességének korlátozásához a képtároló maximális szélességét kell korlátoznia, nem magát a képet! Tegyük fel, hogy egy logóképet egy márkaosztályt tartalmazó modulba csomagolt. Íme egy stílus, amely meghozza a kívánt eredményt:

Márkaépítés (maximális szélesség: 150 képpont; )

Márkaépítés ( max - szélesség : 150 képpont ;

Így most az adaptív webhely-elrendezés méretezhető adaptív képeket is tartalmaz. Küldetés teljesítve. Itt az ideje, hogy megtudja, mit kínál ez az ismeretlen kültéri tér a napfénytől kiéhezett fejlesztőnek, igaz?

Nem olyan gyorsan! Két nagy nehézséget még le kell küzdenünk.

Teljesítményprobléma

A fent leírt adaptív képi megoldással minden eszköz ugyanazokat a képeket „táplálja”. Jó munkát végez a kis ikonokkal és logókkal, de a probléma gyorsan nehezebbé válik, ahogy a képek nagyobbak és nehezebbek lesznek. A Retina-képek ezt még tovább élesítik – nem kell nagyméretű Retina-képeket küldenie olyan eszközre, amely nem tudja megjeleníteni a részleteit!

Gondold át. Valóban szükséges 990 x 300 px és 100 KB méretű, asztali felhasználóknak szánt képet küldeni mobiltelefonra? Természetesen előfordulhat, hogy a mobileszközt használó látogató a helyi étkezde Wi-Fi-kapcsolatán van, de előfordulhat, hogy útközben instabil vezeték nélküli kapcsolattal rendelkezik, és fontos információkat próbál megtalálni az Ön webhelyén. Minden mobilfelhasználó, aki feladja, ha egy oldal betöltése túl sokáig tart, potenciálisan elveszett ügyfél!

A természetben manapság sok olyan mobilwebhelyet találhatunk, amelyek akkorák vagy akár nagyobbak is, mint az asztali társai. Guy Podzharny(Guy Podjarny) körülbelül egy éve több tesztet is lefutott, és nem vett észre jelentős javulást: 2011-ben. A webhelyek 86%-a azonos méretű vagy nagyobb volt, és 2012-ben ez a szám 72%-ra csökkent, de az oldalak összmérete nőtt. Dave Rupert is megjegyezte ezt a problémát Mo' Pixels Mo' Problems című cikkében.

KÖVETKEZŐ BONYOLÍTÁS: A BÖNGÉSZŐ ELŐBETÖLTÉSE

Amikor először kezdtem küzdeni a reszponzív webhelyek teljesítményproblémáival, kezdetben azt terveztem, hogy lekérem az oldalon található összes képváltozatot, de telepítek néhány CSS-osztályt olyan médialekérdezésekkel, amelyek elrejtik a nagy képeket, a kicsiket pedig kis szélességben jelenítik meg. szemben az asztali szélességben. Ez logikusnak tűnik: a böngészőnek nem csak a látható képeket kellene letöltenie?

A probléma az, hogy a böngészők túl gyorsak számunkra! A lehető leggyorsabb betöltési idő biztosítása érdekében a böngészők a CSS- vagy JavaScript-feldolgozás megkezdése előtt előre letöltik a forráskódban azonosítható képeket. Tehát a valóságban ez a megközelítés még inkább hátrányos helyzetbe hozza a mobilos látogatókat, mivel kényszeríti őket az összes képlehetőség letöltésére!

Az előletöltés miatt vagy alkalmazás-háttérmegoldásra van szükség (az előletöltés megakadályozására), vagy speciális jelölésre és JavaScriptre.

SÁVSZÉLESSÉG MEGHATÁROZÁSA

A teljesítményrejtvény utolsó darabja a hálózati sebesség. Nyilvánvaló, hogy csak nagyméretű képeket kell megjeleníteni olyan eszközökön, amelyek gyors hálózatra csatlakoznak, de hogyan lehet ezt megállapítani? Számos módszer létezik a sebesség becslésére, de ezek még nem teljesen megbízhatóak.

A W3C egy Network Information API technológián dolgozik, amely nagyon hasznos lehet a jövőben, de jelenleg csak kevés eszköz támogatja (és sajnos kicsik is). Jelenleg néhány reszponzív képmegoldásban valósítják meg, de addig nem fogják széles körben elterjedni, amíg nem lesz megfelelő támogatás. A hálózat mérése nehézkes, és ahogy Yoav Weiss a Smashing Magazine weboldalán írt cikkében érvel, úgy tűnik, hogy a megbízható "média sávszélesség-lekérdezések" a közeljövőben nem lesznek megfelelően megvalósíthatók.

Adam Bradleytől származó Foresight.js JavaScript segítségével teszteli, mennyi ideig tart a böngészőnek betölteni egy 50 KB-os képet, majd tárolja ezeket az információkat, és a sávszélességgel kapcsolatos döntések meghozatalához használja. Van néhány kisebb hátránya: 50 000 képletöltést ad az oldalához, és megakadályozhatja más képek letöltését a tesztletöltés befejezéséig. Számos, jelenleg sávszélesség-érzékelést használó reszponzív képmegoldás a Foresight.js változatát vagy adaptációját használja.

A "művészeti irány" problémája

Tegyük fel, hogy webhelye kezdőlapján egy nagyszerű, széles kép található. Egy pásztori jelenetet ábrázol mezőkkel és erdőkkel, kék égbolttal és pihe-puha felhőkkel, valamint egy boldog családdal a füvön.
Most méretezheti mobileszközhöz 300 px szélességre. Ezzel a mérettel egy vakációzó család úgy néz ki, mint a hangyák a pikniken!

Nagy kép méretezésekor a részletek elvesznek.

Itt van az úgynevezett „művészeti irányzat” problémája. Egyes képek egyszerűen nem méretezhetők jól; a finom részletek elvesznek, és a fényes hatás csökken. Képünk esetében vizuálisan sokkal jobban kijött volna, ha a fotó mobil verzióját nagyítjuk, kivágjuk, és a boldog család kerül a fókuszba. Ehhez a problémához olyan reszponzív képmegoldásra van szükségünk, amely lehetővé teszi a kép különböző verzióinak meghatározását a különböző helyzetekhez, vagy a kép menet közbeni beállítását.

Néha, amikor a képernyő szélessége kicsi, kívánatos a kép kivágása vagy nagyítása.

A megoldás kiválasztása

Szerencsére a webfejlesztő és -tervező közösségben nincs hiány okos, kreatív egyénekből, akik ezen problémák megoldásán dolgoznak. Természetesen az érem másik oldala, hogy az embert könnyen túlterhelheti a létező adaptív megoldások száma. Szerinted melyik illik hozzád a legjobban?

A választás rendkívül nehéz lehet, mert nagyon sok tényező játszik szerepet. Jelenleg nincs minden helyzetre tökéletes megoldás; mindegyik egy adott problémakör megoldására jött létre. A választáshoz mérlegelnie kell őket a projekt sajátos igényei szerint. Chris Coyier nagyszerű munkát végez a döntési tényezők összefoglalásában (beleértve a követési táblázatot is, bár néhány újabb módszert nem említenek). Íme néhány figyelembe veendő tényező:

Foglalkoznia kell a művészeti irány kérdésével (azaz különböző képarányok, kivágások és méretek különböző szélességekhez)?

Van egy nagy webhelye vagy CMS-je, ahol lehetetlen visszamenni, és egyéni jelölést adni minden egyes képhez?

Minden kép jelen van az oldal betöltésekor, vagy néhányat dinamikusan töltenek be JavaScripten keresztül?

Szeretné tesztelni egy felhasználó sávszélességét, hogy megállapítsa, elég gyors-e a kapcsolata a nagy felbontású képek letöltéséhez?

A választott megoldáshoz szükség van olyan keretrendszerre (például jQuery vagy PHP), amely nem elérhető az Ön számára?

Harmadik féltől származó megoldás alkalmazható Önre, vagy belső tárhelyen van szüksége rá?

Ennek érdekében vessünk egy pillantást néhány reszponzív képmegoldásra, amelyek már régóta léteznek, és széles körben használatosak a fejlesztői közösségben.

Felhívjuk figyelmét, hogy a megoldások alábbi listája semmiképpen sem végleges. Vagy én személyesen találtam őket a leghasznosabbnak, vagy már megvan a megbízhatóságuk. Van olyan kedvenc megoldása, amely nem szerepel itt? Mesélj róla nekünk kommentben!

Kipróbált és megbízható adaptív megoldások

KÉPKITÖLTÉS

A hálózat valóban világméretű, és szembe kell néznünk azzal a ténnyel, hogy nem mindenki fér hozzá az optikai kapcsolatokhoz és a 4G hálózatokhoz. Scott Jehl Scott Jehl első kézből tapasztalta meg ezt a digitális megosztottságot, miközben Délkelet-Ázsiában utazott és dolgozott, és határozott szószólója a mobil-első és reszponzív webhelyeknek, amelyek nem terhelik a mobilfelhasználókat. Az ő Picturefill szkriptje a javasolt elem polifillje – a kép API-t emuláló JavaScript-kód –, amely lehetővé teszi számunkra, hogy ma is használhassuk webhelyeinken. A jövő most van, bébi!

A Picturefill nem igényel jQuery-t, de természetesen megköveteli, hogy a picturefill.js szkript szerepeljen valahol az oldalon. A képkitöltésnek speciális jelölésre is szüksége van, div-ekkel a kép variációinak megjelenítésére, amelyeket adat-média attribútumok különböztetnek meg, amelyek médialekérdezésekként működnek a CSS-ben. Opcionálisan beilleszthet egy képet a feltételes megjegyzések közé azoknál a böngészőknél, amelyek nem támogatják a médialekérdezéseket (ez az IE 8-ról szól), és egy alternatív lehetőséget a noscript címkébe azoknál a böngészőknél, ahol a JavaScript le van tiltva (ez a BlackBerryről van szó). Íme egy példa a tipikus Picturefill beállításokra:

< span data - picture data - alt = "Leíró alt tag" > < span data - src = "images/myimage_sm.jpg" > < / span > < span data - src = "images/myimage_lg.jpg" data - media = "(min-width: 600px)" > < / span > < ! -- [ if (lt IE 10 ) & (! IEMobile ) ] > < span data - src = "images/myimage_sm.jpg" > < / span > < ! [ endif ] -- > < ! -АльтернативныйконтентдлябраузеровбезJS . -- > < noscript > < img src = "images/myimage_sm.jpg" alt = "Leíró alt tag" / > < / noscript > < / span >

Ennyit jelent a reszponzív képek megjelenítése, miközben az oldal betöltődik a Picturefill segítségével. Írja be a szkriptet, konfigurálja a jelölést, és minden könnyen fog működni. A Picturefill programozottan is meghívható, ha menet közben szeretne képeket hozzáadni az oldalhoz.

A Picturefill sok egyéni jelölést igényel, így nem biztos, hogy a legjobb választás azok számára, akik nem módosíthatják a webhely forráskódját. Ezenkívül nem határozza meg a sávszélességet. Ha nagyon fontos a projektje szempontjából, akkor fontolja meg a következő megoldást.

HiSRC from Mark Grabanski(Marc Grabanski) és Schmitt Kristóf(Christopher Schmitt) egy jQuery beépülő modul, amely lehetővé teszi egy kép alacsony, közepes és nagy felbontású verzióinak létrehozását, és a szkript megmutatja a legmegfelelőbbet a Retina készenléte és a hálózati kapcsolat sebessége alapján.

A telepítéshez először győződjön meg arról, hogy a jQuery és a HiSRC szkript hozzáadva van valahol az oldalon.

A HTML-kódban először adjon hozzá egy normál képcímkét az oldalhoz, és állítsa be a forrást a kép legalacsonyabb felbontású (vagy legkisebb) verziójára. Adjon hozzá egy osztályt (például .hisrc) a képhez vagy annak burkolójához, hogy meghatározza, mely képeket dolgozza fel a HiSRC. Ezután adjon hozzá speciális jelölést a képcímkéhez: data-1x és data-2x attribútumok a közepes és nagy felbontású verziókhoz. Például:

< img src = "//placekitten.com/200/100" data - 1x = "http://placekitten.com/400/200" data - 2x = "http://placekitten.com/800/400" class = "hisrc" / >

Ezután a DOM betöltése után egyszerűen hívjon meg egy függvényt a használt képosztályon, például:

$(dokumentum).ready(function())( $(.hisrc").hisrc(; ));

$(dokumentum). kész(függvény()( $(".hisrc" ) . hisrc(); } ) ;

Valójában a böngésző először a képforrást tölti be – pl. a kép mobil verziója. A szkript ezután ellenőrzi, hogy a felhasználó mobil sávszélességet használ-e (például 3G). Ha igen, akkor a mobil-első kép marad. Ha a kapcsolat gyors és a böngésző támogatja a Retina képeket, akkor a @2x verzió lesz kézbesítve. Ha a kapcsolat gyors, de a Retina nem támogatott, akkor a @1x verzió kerül kiszállításra.

Talán észrevette, hogy az alacsony felbontású kép mindig betöltődik, még akkor is, ha a szkript később úgy dönt, hogy a felhasználó eszköze megfelelő jelölt a nagy felbontásra. Még ha technikailag kettős letöltésről is van szó, ez csak a gyors kapcsolattal rendelkezőknek okoz kellemetlenséget. Örömmel elfogadom ezt a kompromisszumot!

A HiSRC képes kezelni az oldalhoz dinamikusan hozzáadott képeket. Több képet is lehetővé tesz, így különböző vágások és méretek határozhatók meg a művészeti irányok problémájának leküzdésére.

Ami a gyengeségeit illeti, a HiSRC megköveteli a jQuery-t, így nem lesz hasznos, ha nem használja ezt a könyvtárat. Egyéni HTML-jelölést is igényel, így nem biztos, hogy ez a legjobb választás, ha nagy webhelye van sok örökölt képpel, vagy olyan CMS-je van, ahol nem tudja megváltoztatni a képcímke-kiadást. Ha ez a helyzet, akkor olvass tovább!

ADAPTÍV KÉPEK

Az első két szkripttől eltérően az Adaptive Images Matt Wilcox(Matt Wilcox) – Ez többnyire szerveroldali megoldás. Egy kis JavaScriptet igényel, de az igazi munka az Apache 2 webszerver, a PHP 5.x és a GD könyvtár használatával történik.

A webszerverre való telepítéséhez módosítania kell vagy hozzáadnia kell egy .htaccess fájlt, néhány PHP-fájlt ki kell írnia webhelye gyökérkönyvtárába, és JavaScriptet kell hozzáadnia az oldalakhoz (amely cookie-t ad hozzá a felhasználó képernyőjének rögzítéséhez felbontás), és konfiguráljon néhány vezérlőváltozó pontot a PHP-fájlokban, amelyek megfelelnek webhelye médialekérdezésének.

A telepítési utasítások meglehetősen bőbeszédűek – kicsit hosszú ehhez a cikkhez. További információért látogasson el a hivatalos weboldalra, és kattintson a felül található „Részletek” linkre.

Az Adaptív képekben az a legjobb, hogy nem igényel egyéni jelölést a képekhez. Ha sikerült megfelelően telepíteni és beállítani, akkor ennyi! A PHP szkript elfog minden képkérést, menet közben átméretezi az egyes töréspontokhoz, és automatikusan telepíti az oldalakra.

A PHP számos konfigurációs opcióval rendelkezik, mint például a képminőség, a töréspontok, a gyorsítótár, és még egy élesítési szűrő is, amellyel méretezett képek hozhatók létre.

Számos korlátozása van:

Mivel az Apache és a PHP kombinációját igényli, előfordulhat, hogy az Adaptive Images nem megfelelő a webhely platformjához, vagy nem érhető el a webtárhely szerveréről.

A webszerver azon képességére támaszkodik, hogy képes elfogni minden képkérést (a .htaccess fájlon keresztül). ezért ha a képei valahol máshol találhatók, például egy tartalomszolgáltató hálózaton, akkor ez nem fog működni.

Nem határozza meg a teljesítményt.

Nem célja a művészeti irányítás problémájának megoldása, mert csak az eredeti képeket méretezi át. Nem tudja levágni az eredeti képet, és nem hozhat létre belőle eltérő képarányt.

Bizonyára észrevette, hogy minden megoldáshoz valamilyen módon JavaScript, és gyakran részletes konfiguráció szükséges. Ha olyat keres, amely nem igényel JavaScriptet, és viszonylag könnyen megvalósítható, vegye figyelembe a következőket.

SENCHA.IO SRC

A korábban TinySrc néven ismert Sencha.io Src egy harmadik féltől származó megoldás, amely közvetítőként működik, így nem kell semmit konfigurálnia a kiszolgálón. Egyszerűen küldje el a képet a Sencha szervereire (beállítások megadásával vagy anélkül), és a Sencha feldolgozza azt, és visszaküldi a megfelelő verziót a kívánt méretben.

Tegyük fel, hogy van egy nagy képe:

< img src = "//www.your-domain.com/path/to/image.jpg" alt = "Az én nagy képem" / >

A legegyszerűbb verzióban hozzáadhat egy előtagot az src attribútumhoz a http://src.sencha.io/ webhelyről, például itt:

< img src = "//src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt = "Az én nagy képem" / >

A Sencha.io alapértelmezés szerint átméretezi a képet, hogy illeszkedjen az eszköz képernyőjének szélességéhez, és egy felhasználói ügynök karakterláncot használ az észleléshez. Egy 320 px széles képet küld a telefon a telefonra, egy 768 px széles a táblagépre és így tovább.

A Sencha.io előtag karakterláncot úgy is beállíthatja, hogy meghatározott méreteket, tájolást, százalékos méreteket és tetszőleges számú összetett számítást adjon vissza.

A Sencha.io egy ingyenes szolgáltatás egyéni felhasználók számára, és nagyon kényelmes megoldást jelenthet a reszponzív képek problémájára. Ön azonban egy harmadik féltől való függőséget ad hozzá, ami leállást és az Önön kívül eső problémákat okozhat. Gondosan mérlegelje ezeket a kockázatokat.

Érdemes megfontolni a reszponzív képprobléma megoldásait

A leírt megoldások már alkalmazhatók, de nem az egyetlenek a maguk nemében. A legújabbak némelyike ​​nagyon kompromittált, és szorosan figyelem őket, hogy lássam, hogyan fejlődnek a modern webes technológiákban. Az alábbiakban különösen érdemes megfontolni kettőt.

RÖGZÍTÉS/MOBIFY.JS 2.0

A rögzítés a fejlesztés alatt álló Mobify.js 2.0 új funkciója, amely hozzáférést (vagy "rögzítést") kínál a forrás HTML-jelöléshez, mielőtt azt elemzi vagy megjeleníti a böngészőben. A forráskódhoz való hozzáférés ebben a szakaszban lehetővé teszi a kép src attribútumának megváltoztatását, mielőtt a böngésző letölti azt. Meghibásodás esetén akár alternatívát is készíthet a többi megoldás, például a Picturefill helyett.

Mivel ez a technika közvetlenül megkerüli a natív böngésző előtöltését, ez egy kicsit ellentmondásos pont a webes teljesítmény köreiben. Ha helytelenül használja, valódi webhelyteljesítmény-problémákat okozhat, ahelyett, hogy javítaná őket!