Ma a webes reszponzív képekről fogunk beszélni, ami egy nagyon népszerű és meglehetősen problematikus téma.

Ha rákeresünk erre a témára, számtalan cikket találunk mindenféle magyarázattal, azonban én nem fogom ezeket megismételni, hanem másképp tanítom meg.

Töltsd be a képeket helyesen, növeld az SEO rangsorolásodat és kínálj jobb felhasználói élményt a weboldaladnak.

Mik azok a reszponzív képek?

A reszponzív képek automatikusan alkalmazkodnak (kellene alkalmazkodniuk) a képernyő méretéhez. De… ez a helyes módja? Nos, igen és nem. Ha rágoogolsz erre, vagy megnézel modern keretrendszereket mint a Bootstrap, észreveszed, hogy a “reszponzív képek” definíciójuk egy egyszerű CSS, hasonló ehhez:

1max-width: 100%;
2height: auto;

Bár ez “működik”, nem teljesen helyes. Több oka van ennek, de a legfontosabb a képméret. Nem a kép “szélességéről/magasságáról” beszélek, hanem a tényleges képméretről kilobájtban/megabájtban.

A legtöbb weboldal (a weboldalak kb. 80%-a, amit ezekben az években láttam) hihetetlenül nagy képeket használ és egyszerűen “skálázzák” őket fel és le. Egy ilyen kép általában 1000px-től akár 4000px-ig terjed, és láttam még 8000px-est is!!! (mennyire őrült ez).

Ezek a képek általában nagyon nagyok, 1 MB-tól 10 és akár 20 MB-ig. Nagyon ritkán láttam, hogy az emberek tömörítik a képeiket exportáláskor. Ezzel együtt, képzeld el, ha van egy képekben gazdag weboldalad 5, 10, 20 vagy több képpel és egy felhasználó meglátogatja a weboldaladat mobilon. Még 5G-n is ez rengeteg adat csak a képekre, nem is beszélve a többi tartalomról.

Hogyan hozzunk létre reszponzív képeket?

A böngészők segítségünkre vannak az image source set (srcset) támogatásával. Ezzel a funkcióval hatékonyan több verziót tarthatunk a képből különböző méretekben, és a böngésző a képernyő mérete alapján választja ki a megfelelőt. Na, ez reszponzív!

A legtöbb ember azonban nem tud megbirkózni az image source set-ekkel különféle okok miatt, a “Fogalmam sincs”-től a “Nem értem”-ig és még sok más.

Ahogy a technológia fejlődött, most online eszközöket és API-kat használhatunk, hogy automatikusan létrehozzuk ezeket a source set-eket. De ne olyan gyorsan, az automatikus létrehozás nem jelenti azt, hogy egyszerűen kimásolhatod az eredményt és elvárod, hogy megfelelően működjön.

Minden munkám és tesztem alapján nincs “egy méret mindenkire” megoldás, és mindig szükség van némi extra munkára.

A megfelelő HTML kép-tagek kiválasztása

Ez az első és legfontosabb dolog, amit meg kell értened. Használhatod a hagyományos <img />-t vagy a modern <picture> taget.

Mindkettőnek megvannak a buktatói, de saját tapasztalatom szerint a <picture> mindig nyer. Ezt a taget a böngészők széles körben támogatják, szóval ez nem lehet probléma.

Nincs automatikus módszer a helyes méretek generálására (amennyire tudom) dinamikus weboldalakhoz. Vegyük például a jól ismert WordPress-t, ez rendszertelen és helytelen méreteket generál attól függően, milyen képet töltesz fel és hova helyezed.

Az img tagek használata

Az img tagek a weboldalak többségén megtalálhatók; reszponzív képekhez az <img /> tageket a srcset attribútummal kombinálják, de magabiztosan mondhatom, hogy egyikük sem működik helyesen.

Az egyik probléma, hogy az <img /> tag nem működik helyesen egyes böngészőkben, például Chrome-ban. Valójában van egy nyitott kérdésem a stackoverflow.com -on ezzel kapcsolatban, magyarázat nélkül miért.

Egy másik probléma, hogy a sizes attribútumot nehéz helyesen beállítani. Rengeteg cikk van nagyon tompán és hiányosan megírt magyarázatokkal, amiket őszintén szólva nagyon frusztrálónak találtam.

Mindezek alapján nem fogom tárgyalni az <img /> használatát reszponzív képekhez, mert véleményem szerint értelmetlen.

A picture tagek használata

A picture tagek szerintem a legjobbak, lehetővé teszik számunkra, hogy manipuláljuk és utasítsuk a böngészőt, hogy a kívánt képet töltse be.

Sok más funkciót is támogat, mint például az art direction megadása, alternatív képformátumok és más. Ezekkel a képességekkel elérhetjük a célunkat.

Nem probléma viszont, ideje volt ennek a böngészőnek idén meghalni .

Reszponzív képméretek generálása

Ahogy fentebb említettük, sok online eszközt használhatunk a helyes képek méretezését és forráskódjukat néhány kattintással elvégezni.

Ajánlom ezt használni: https://responsivebreakpoints.com/ kiindulópontként. Az eszköz átméretezi a képeidet és generálja a töréspontokat a reszponzív képekhez.

Például az oldalukon lévő kutyás kép több különböző méretű képet és a hozzájuk tartozó HTML kódot generál:

 1<picture>
 2
 3<source
 4		media="(max-width: 767px)"
 5		sizes="(max-width: 1534px) 100vw, 1534px"
 6		srcset="
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
16		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
17<source
18		media="(min-width: 768px) and (max-width: 991px)"
19		sizes="(max-width: 1983px) 70vw, 1388px"
20		srcset="
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
27		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
28<source
29		media="(min-width: 992px) and (max-width: 1199px)"
30		sizes="(max-width: 2400px) 60vw, 1440px"
31		srcset="
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
36		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
37<img
38		sizes="(max-width: 7000px) 40vw, 2800px"
39		srcset="
40		dog_c_scale,w_480.jpg 480w,
41		dog_c_scale,w_713.jpg 713w,
42		dog_c_scale,w_1036.jpg 1036w,
43		dog_c_scale,w_1180.jpg 1180w,
44		dog_c_scale,w_1313.jpg 1313w,
45		dog_c_scale,w_1433.jpg 1433w,
46		dog_c_scale,w_1606.jpg 1606w,
47		dog_c_scale,w_1748.jpg 1748w,
48		dog_c_scale,w_1884.jpg 1884w,
49		dog_c_scale,w_2015.jpg 2015w,
50		dog_c_scale,w_2133.jpg 2133w,
51		dog_c_scale,w_2260.jpg 2260w,
52		dog_c_scale,w_2377.jpg 2377w,
53		dog_c_scale,w_2345.jpg 2345w,
54		dog_c_scale,w_1871.jpg 1871w,
55		dog_c_scale,w_2800.jpg 2800w"
56		src="dog_c_scale,w_2800.jpg"
57		alt="">
58</picture>

Figyeld meg, hány képernyőméretet fed le nekünk, menő ugye? De elég jó ahhoz, hogy egyszerűen kimásold a weboldaladra? NEM.

A legnagyobb probléma ezekkel az image source set-ekkel a sizes és media attribútumok. Elég bonyolult megérteni és még bonyolultabb helyesen működésre bírni.

Mindezekkel együtt, amit tenned kell, hogy rövidebb és érthetőbb legyen a kód. A weboldalam (amelyet most olvasol) a Bootstrap által biztosított általános reszponzív töréspontokat használtam és létrehoztam a saját set-jeimet.

Hozz létre reszponzív képméreteket magad

A legjobb (és őszintén szólva egyetlen megoldás) a kép tagek létrehozása saját magad.

Ez jól működik, ha egy egyedi weboldalt fejlesztesz a nulláról, de ha valami olyasmid van mint a WordPress, az egy másik történet, és arról lesz egy másik cikk.

Kiindulópontként egy világos és egyszerű módszer kellett az eszköz-töréspontok megértéséhez; ezért a Bootstrap által biztosítottakat használtam, amelyek rendkívül megbízhatók:

TöréspontEszközMéret
X-SmallKis eszközök (álló telefonok, 576px alatt)<576px
SmallKis eszközök (fekvő telefonok, 576px-től)≥576px
MediumKözepes eszközök (tabletek, 768px-től)≥768px
LargeNagy eszközök (asztali gépek, 992px-től)≥992px
Extra largeNagy eszközök (nagy asztali gépek, 1200px-től)≥1200px
Extra extra largeNagy eszközök (nagyobb asztali gépek, 1400px-től)≥1400px

A fentiekkel létrehoztam a “saját” image source set-jeimet, amelyek a megfelelő képet töltik be a fenti eszközméreteknek megfelelően:

 1<picture>
 2
 3<source srcset="" media="(min-width: 1400px)">
 4<source srcset="" media="(min-width: 1200px)">
 5<source srcset="" media="(min-width: 992px)">
 6<source srcset="" media="(min-width: 768px)">
 7<source srcset="" media="(min-width: 576px)">
 8<source srcset="" media="(min-width: 320px)">
 9<img src="" width="" height="" class="" alt="" >
10</picture>

Ez világos áttekintést és megértést ad arról, mi kellene történjen és hogyan. Más szóval, tudom, melyik képnek kell betöltődnie melyik eszközön, és meg is fogja tenni.

Bár ez használatra késznek tűnik, még nem teljesen kész. Ezeknek a képeknek a betöltése egy adott eszközön nem elég jó, mert a kép még mindig túl nagy lehet.

1. Példa:

  • Egy nagy eszközön (nagy asztali gépek, 1200px és felette) a konténered, ahová a képkészletet beágyazod, 800px-es fix méretű
  • A böngésző megnézi a viewportot, ami például 1920px, és betölti az 1400px-es képet (amikor valójában a 768px-es képméret kellene…)

2. Példa:

  • Bármilyen eszközön a konténered, ahová a képkészletet beágyazod, 400px-es fix méretű (ez lehet például egy kártya vagy egy egyszerű doboz)
  • A böngésző megnézi a viewportot, ami például 1920px, és betölti az 1400px-es képet (amikor valójában a 320px-es képméret kellene…)

Tehát rossz képet töltesz be, ez költséges neked és a felhasználódnak. Először sebességet veszítesz (ami egyébként befolyásolja az SEO rangsorolásodat), majd a felhasználód örökké vár a kép betöltésére, ha mobilon van vagy lassú a sávszélessége.

A helyes megoldás az, hogy megvizsgálod a konténert, ahová a képet beágyazod, és meghatározod a megfelelő méretet.

Ezt nagyon egyszerűen megteheted a lap vizsgálatával és különböző eszközök emulálásával; a konténerek általában többé-kevésbé ugyanakkorák maradnak.

Tehát a fenti 1. Példához a kódomat a következőképpen módosítottam:

1<picture>
2
3<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
4<source srcset="" media="(min-width: 992px)">
5<source srcset="" media="(min-width: 768px)">
6<source srcset="" media="(min-width: 576px)">
7<source srcset="" media="(min-width: 320px)">
8<img src="" width="" height="" class="" alt="">
9</picture>

Mit jelent ez? Elég magától értetődő, de azért elmagyarázom:

  • Minimum 320px szélességű eszközön töltsd be a 320px-es képet
  • Minimum 576px szélességű eszközön töltsd be a 576px-es képet
  • Minimum 768px szélességű eszközön töltsd be a 768px-es képet
  • Minimum 992px szélességű eszközön töltsd be a 992px-es képet
  • Minimum 1200px VAGY 1400px VAGY 2500px szélességű eszközön töltsd be az 1200px-es képet

Az utolsó sor biztosítja, hogy a böngésző ne töltsön be nagyobb képméretet, amikor a konténer mérete csak 800px (vagy 1200px az én esetemben, amikor a cikk kibontás gombra kattintasz)

A fentieket közel tökéletesnek tartom a megfelelő képméret betöltése szempontjából. Még a Google Pagespeed is kedveli, és nem generál figyelmeztetéseket, mivel a megfelelő képméretet töltjük be.

A reszponzív képeid tesztelése

Elég biztos vagyok benne, hogy a fentiek elolvasása után van egy általános képed arról, hogyan teszteld, hogy a képeid helyesen töltődnek-e be, de azért elmagyarázom.

A tesztelési folyamat ijesztő lehet, ha sok képed van, de megéri a fáradságot.

Amit tenned kell, az egyszerű, csak időbe telik:

  • Nyisd meg a kívánt böngészőt és töltsd be az oldalad
  • Nyisd meg a fejlesztői eszközöket, menj a Hálózat fülre és válassz csak “Képek” szűrőt
  • Frissítsd az oldalad több eszközön (mobil, tablet stb.) és nézd meg, mely képek töltődnek be

Ennyi, semmi különös.

Tippek és trükkök

  • Ha sok képed van (több mint egy fejléc), használd a loading=lazy attribútumot. Többet olvashatsz róla itt .
  • Ha nem tudod magad exportálni/átméretezni a képeidet, online szolgáltatásokat használhatsz erre. CDN-t is kínálnak, amely elképesztően gyorsan tölti be a képeidet. Ajánlom a Cloudflare Images -t.
  • Nevezd el a képeidet helyesen, ez nagyon fontos. Ha nem nevezed el helyesen a képeidet (például image-small.jpg vagy image-320.jpg), akkor teszteléskor nem tudod könnyen kideríteni, melyik kép töltődik be.

Ennyi lenne, remélem ez a cikk segített.