Bricks Builder Image

A Bricks Builder Image elem elsőre annyinak tűnik, hogy kiválasztasz egy képet a médiatárból, és kiteszed az oldalra. Csakhogy alatta jóval több történik, mint egy sima <img> tag: a Bricks a kiválasztott kép mellé generál egy egész responsive forráskészletet (srcset), gondoskodik a lazy loadról, és a beállításoktól függően teljesen más HTML wrapperbe csomagolja a képet – hol <figure>-be, hol <picture>-be, hol pusztán egy <img>-be. Én ott szoktam elakadni ezen a ponton, amikor valaki azt kérdezi, miért nem egyszerűen egy kép – a válasz az, hogy az Image elem mögött a teljesítmény, az akadálymentesítés és a SEO három rétege is ott van, és ha ezekkel nem foglalkozol, a kép meglesz, de lassabb és kevésbé kereshető lesz nála, mint amilyen lehetne.

A választás azon múlik, mit hordoz a kép: tartalmat vagy díszítést. Ha a kép információt ad – egy termékfotó, egy csapattag portréja, egy diagram, akkor Image elem kell neki, mert az valódi taget ad ki, alt szöveggel, ami a keresőknek és a képernyőolvasóknak is elérhető. Ha a kép csak háttérdíszítés, amit akár el is lehetne tüntetni a tartalom sérülése nélkül, azt a Section vagy Container Background beállításával old meg, mert az CSS-ben él, nem HTML-ben, és nem is kell neki alt szöveg. Egyszerű, vonalas vagy monokróm grafikához pedig az Icon elem a jobb választás, mert az színezhető és méretezhető anélkül, hogy külön képfájlt kellene hozzá karbantartanod.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Image”, és a kívánt szülőbe húzod, tipikusan egy Container-be vagy Block-ba. Az elem üresen egy „No image selected” helyőrzővel jön létre – ez a szerkesztőben látszik, a frontenden nem jelenik meg, de üresen hagyva üres helyet foglal a layoutban, ezért az első lépés mindig a tényleges kép kiválasztása az Image mezőben, a médiatárból vagy feltöltéssel. Ha ugyanazt a képet több helyen is használod eltérő méretben, ne töltsd fel újra: válaszd ki ugyanazt a médiatár-elemet, és a méretezést a Bricks Object fit és Aspect ratio beállításaival oldd meg, ne külön fájlokkal.

HTML tag. Alapértelmezetten figure, ez akkor is megmarad, ha felirat vagy overlay kerül a képre. Az egyszerűbb div taget akkor válaszd, ha a képnek nincs sem felirata, sem szemantikai szerepe, csak illusztráció. A tag mező csak akkor jelenik meg, ha nincs beállítva Sources (responsive forráskészlet) – ilyenkor a Bricks automatikusan picture taget használ, mert annak megvan a saját szemantikája.

Sources (responsive képek). Ez az elem egyik legkihasználatlanabb funkciója: töréspontonként külön képet adhatsz meg, nem csak méretet. Egy széles, panorámás hero-képnél mobilon gyakran jobban működik egy szűkebb kompozíciójú, függőleges változat, mint ugyanannak a képnek a lekicsinyítése. A Sources mezőben töréspontot választasz (vagy egyedi media query-t adsz meg), és hozzá egy külön képet – a sorrend számít, a legkisebb töréspontnál kezdd, és az alap töréspontnál adj meg egy forrást, hogy legyen fallback kép.

Aspect ratio és Object fit. Az Aspect ratio mezővel (például 16/9 vagy 1/1) fixen rögzítheted a kép arányát, függetlenül az eredeti fájl méretétől – ez azért fontos, mert enélkül a képek betöltés közben elugrasztják a layoutot (ez a Cumulative Layout Shift, a Google Core Web Vitals egyik mért értéke). Az Object fit dönti el, hogyan viselkedik a kép ebben a rögzített keretben: cover kitölti és level vág, ha kell, contain mindig teljesen látható marad, akár üres sávokkal a keret szélén.

Alt szöveg. A Custom alt text mező felülírja a médiatárban tárolt alapértelmezett alt szöveget. Ez a legfontosabb egyetlen mező az egész elemen: az alt szöveg mondja meg a képernyőolvasónak és a Google Képkeresőnek, mi látható a képen. Beszédesen, a kép tartalmát leírva írd meg, ne a fájlnevet vagy azt, hogy „kép”. Dekoratív, tartalom nélküli képnél hagyd üresen – ilyenkor a Bricks automatikusan egy üres alt attribútumot ad ki, amit a képernyőolvasók helyesen kihagynak, szemben azzal, mintha egyáltalán nem lenne alt attribútum.

Felirat (Caption). A Caption type mezőben választhatsz: nincs felirat, a médiatárban a képhez rögzített szöveg (Attachment), vagy egy itt megadott, egyedi szöveg. Feliratos képnél a Bricks figure/figcaption párost ad ki, ami szemantikailag helyes HTML struktúra egy kép és a hozzá tartozó magyarázó szöveg között.

Loading. Alapértelmezetten lazy, tehát a kép csak akkor töltődik be, amikor a látogató a közelébe görget. Ez jó dolog a teljesítménynek, egyetlen kivétellel: az első képernyőn (a görgetés nélkül látható részen) lévő, kiemelt képnél állítsd eager-re, különben a Google a legfontosabb betöltési méréseknél (Largest Contentful Paint) büntetni fogja az oldalt a felesleges késésért.

Link és Lightbox. A Link mezőben adod meg, mi történjen kattintásra: kinyílhat egy lightboxban nagyítva, elvihet a kép saját médiatár-oldalára, a fájl közvetlen URL-jére, vagy egy tetszőleges linkre. A Lightbox beépített PhotoSwipe galériát ad, saját animációval, felirattal és méretezéssel – külön pluginra vagy scriptre nincs szükség hozzá. Ha egyszerűen csak a kép mellett akarsz egy linket, ami máshová visz (nem nagyítva megjeleníteni), az „Other (URL)” opció a helyes választás.

A képek a legtöbb oldal legsúlyosabb betöltési tényezői, ezért itt van a legnagyobb tere annak, hogy egy jól beállított Image elem mérhetően felgyorsítsa az oldalt. Négy dolog számít igazán. Az alt és title szöveg minden tartalmi képen legyen kitöltve, mert ez a képkeresős forgalom alapja, és az akadálymentesítésnek is ez az első számú követelménye. A lazy loading maradjon bekapcsolva minden képen, kivéve az első képernyőn látható, kiemelt képet, amit eager-re kell állítani. Az Aspect ratio mindig legyen beállítva olyan képeknél, amiknek a mérete a betöltés előtt nem ismert a böngésző számára, mert ez tartja stabilan a layoutot görgetés közben. És a Sources mezővel érdemes külön, kisebb felbontású képet adni mobilra, hogy ne egy asztali méretre optimalizált, nagy fájlt küldj le egy telefonra feleslegesen.

A fájlformátum és a tömörítés nem az Image elem beállítása, hanem a feltöltés előtti lépés, de idetartozik: WebP vagy AVIF formátumban feltöltött kép jellemzően feleannyi, mint az ugyanolyan minőségű JPEG, és a Bricks natívan kezeli ezeket a formátumokat.

A leggyakoribb panasz, hogy a kép betöltés közben elugrasztja alatta a tartalmat. Ez majdnem mindig a hiányzó Aspect ratio vagy a beállítás nélküli szélesség-magasság párosa. Adj meg egy rögzített arányt (16/9, 4/3, 1/1, amelyik illik a layouthoz), és a böngésző már a kép letöltése előtt fenntartja neki a helyet.

Ha a kép nem a várt módon vágódik vagy nyúlik el a kerete belsejében, az az Object fit értékén múlik. A cover mindig kitölt és vág, ha kell, a contain mindig egészben látható marad, akár üres sávokkal. Portré- és négyzetes elrendezéseknél a cover a bevált, termékfotóknál, ahol a teljes tárgy fontos, inkább contain kell.

Ha a kép nem tölt be azonnal az első képernyőn, és ez rontja a Largest Contentful Paint mérést, a Loading mező eager-re állítása old meg. Ezt viszont csak a valóban legfelső, azonnal látható képen tedd meg – minden más képen maradjon lazy, különben pont az ellentétes hatást éred el.

Ha a kép mellett a lightbox nem a várt méretben vagy vágásban nyílik meg, nézd meg a Lightbox image size mezőt: alapból a kép teljes (Full) méretét használja, amit érdemes tudatosan kisebbre állítani, ha az eredeti fájl nagyon nagy felbontású, mert különben a nagyítás is lassan tölt be.

Ha egy dekoratív, tartalom nélküli kép mégis felolvasásra kerül a képernyőolvasóban, az azt jelenti, hogy az alt szöveg mezőbe valami bekerült, amit nem kellett volna. Dekoratív képnél hagyd teljesen üresen a Custom alt text mezőt, ne írj bele egy szót vagy egy szóközt.

Mielőtt élesbe teszed az oldalt, érdemes végigfutni ezeken: minden tartalmi képen van-e beszédes alt szöveg, dekoratív képen üres-e az alt, be van-e állítva az Aspect ratio a layout-ugrás elkerülésére, csak az első képernyőn látható képen van-e eager loading, a mobil nézethez van-e külön, kisebb kép a Sources mezőben, és a lightbox mérete illik-e az eredeti fájl felbontásához. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. Több mint 20 éve webfejlesztőként, 18 éve WordPress fejlesztőként dolgozom. Specialitásom a Bricks Builder, SEO és a biztonságos weboldalak fejlesztése.