A kedvenc WordPress sablonom a Divi. A Divi egyszerűvé teszi a képek megjelenítését a honlapunkon. Néha azonban kihívást jelent a megfelelő képméret kiválasztása a különféle modulokhoz. Ha hatalmas fájlméretben töltjük fel a képet, akkor az lassítja a weboldalt, ha pedig túl kicsi méretet választunk, akkor „pixeles” lesz a kép, és gagyi hatást érünk el vele. Milyen a megfelelő képátméretezés, ha Divi sablont használunk?
Divi WordPress sablon és a SEO
A keresőoptimalizálás egyik fontos eleme a képek és a multimédiás tartalmak optimalizálása. A képek méretei befolyásolják a weboldal sebességét és a felhasználói élményt egyaránt, ezért fontos megérteni, hogyan lehet kiválasztani a legjobb képméreteket a Divi sablonnal ellátott WordPress oldalra.
A honlap sebességről itt olvashatsz illetve nézhetsz videót:
Ha feltöltöttük a képet, ne felejtsük el kitölteni az „alt tag„-et, vagyisa helyettesítő szöveget.
A keresőmotorok számára fontos információt jelent a cím, a helyettesítő szöveg és a felirat.
A cuki cicás képnél a Google nem biztos, hogy a cuki cicát látja, de ha beírod, hogy „cuki cica” az alternatív szövegbe, akkor a találati listán a „cuki cica”kulcsszóra is előrébb kerülhetsz, ha ez a célod.
A DIVI sablonnál a Google nem olvassa automatikusan a háttérképeket, mivel azok nem img tag-ek közé vannak zárva. Tehát ha a metaadatai nincsenek kitöltve, nem gond. A háttérképek a CSS-ben jelennek meg, és leginkább csak dizájn szempontból jelentős.
A Divi WordPress sablonnal sokféle módon lehet használni a képeket:
teljes szélességű képként
fejléc modulokban
galériában
projektmodulokban
blog modulokban
blogbejegyzésekben
fülszövegben (blurb)
webáruházban
stb.
Ezekhez a modulokhoz különböző képméretekre lesz szükség.
Alkalmazkodjunk a kész elrendezéshez!
Léteznek kész „layoutok” (elrendezések), amelyeknél érdemes figyelembe venni az ajánlott képméretet, ha a saját fotóinkat akarjuk felhasználni.
Nézzük meg, hogy mekkora illetve milyen arányú képeket jelenítenek meg a demo oldalon.
A Divi sablont három különböző méretarányra (szélesség: magasság) optimalizálták:
16: 9 – a standard monitor arány- a teljes szélességű fejlécek számára ideális.
4: 3 – a régebbi monitor aránya, szinte négyzetes és nagyszerű a legtöbb kép esetében.
3: 4 – állókép (magasabb, mint széles) portréképekhez megfelelő ez az arány.
Nincs szabványos, „tökéletes” méret, ami az összes weboldal számára
érvényes, mert az ideális méret sablononként eltérő lehet.
A Divi sablont használó weboldal tökéletes képméretezése három fő
tényezőtől függ:
1. Képarány: a kép magassága és szélessége
2. Oszlopok/hasábok elrendezése:a kép maximális szélességét
határozza meg
3. Reszponzivitás: a kép méretének módosítása különböző méretű
képernyőkre (mobil, tablet, stb.)
A Divi alapértelmezett elrendezési beállításai alapján 1080px szélességet kell beosztani!
A fenti képen látható, hogy az oszlopok (column) méretezésénél nincs
megadva a kép magassága, csak a szélessége.
Az általános szabály az, hogy a kép legalább olyan széles legyen, mint az oszlop, amelybe beilleszted.
A következő képméretek követik a 16: 9 képarányt
1 oszlop: 1080 x 608
¾ oszlop: 795 x 447
⅔ oszlop: 700 x 394
½ oszlop: 510 x 287
⅓ oszlop: 320 x 181
¼ oszlop: 225 x 128
A következő képméretek követik a 4: 3 képarányt
1 oszlop: 1080 x 810
¾ oszlop: 795 x 597
⅔ oszlop: 700 x 526
½ oszlop: 510 x 384
⅓ oszlop: 320 x 241
¼ oszlop: 225 x 170
A pontos méretek megadásánál vegyük figyelembe, hogy a 4 oszlopos elrendezés kisebb kijelzőn 2 oszlopra csökken.
Az eredeti 4 oszlopos elrendezés 4: 3 képaránnyal: 225px: 170px-es képméretet jelent.
Ha a fenti méretben töltjük fel a képeket, akkor a képfájl mérete pozitívan befolyásolja az oldal betöltési idejét.
A hátránya, hogy nem tölti be az oszlopszélességet kisebb képernyőkön, például tableten.
A 2 oszlopos elrendezés 370px szélességű képméretet kíván.
Tehát ha azt szeretnénk, hogy a kép kitöltse az oszlopszélességet, a 225 képpontos szélesség helyett 370 képpontos képméretet kell használni.
Slider és Post Slider háttérképek Diviben
Ha képeket vagy blogbejegyzéseket szeretnél vetítés formájában bemutatni, akkor az alábbi szempontokat kell figyelembe venni:
A vetítés háttérképei legalább olyan szélesnek legyenek, mint az adott oszlop.
Így egyszerű a dolgunk, hiszen csak a DIVI sablon szabványát kell figyelnünk.
A vetítés hátterének magasságát a rajta elhelyezett tartalom határozza meg, így lehet, hogy módosítania kell a háttérkép magasságát.
A következő képméretek a 16: 9 képarány-szabványnak felelnek meg:
1 oszlop: 1080 x 608
¾ oszlop: 795 x 447
⅔ oszlop: 700 x 394
½ oszlop: 510 x 287
⅓ oszlop: 320 x 181
¼ oszlop: 225 x 128
A következő képméretek követik a 4: 3 képarány-szabványt:
1 oszlop: 1080 x 810
¾ oszlop: 795 x 597
⅔ oszlop: 700 x 526
½ oszlop: 510 x 384
⅓ oszlop: 320 x 241
¼ oszlop: 225 x 170
Ha azt szeretnénk, hogy a vetítés a mobil eszközök oszlopainak szélességét lefedje, használjuk ezeket az irányelveket:
4: 3 képarány esetén:
1 oszlop: 1080 x 810
⅔ oszlop: 770 x 578
¾ oszlop: 770 x 578
½ oszlop: 770 x 578
⅓ oszlop: 770 x 578
¼ oszlop: 370 x 278
16: 9 képarány esetén:
1 oszlop: 1080 x 608
⅔ oszlop: 770 x 433
¾ oszlop: 770 x 433
½ oszlop: 770 x 433
⅓ oszlop: 770 x 433
¼ oszlop: 370 x 208
Teljes szélességű háttérképek vetítéshez
Ajánlott minimális szélesség: 1920px
A teljes szélességű vetítés háttérképének szélességét mindig a böngésző
szélessége határozza meg. A szabványos képernyőméretek alapján javaslom, hogy a képek legalább 1280px szélesek legyenek.
Ha nagyon fontos számunkra, hogy a képek nagyobb monitorokon se legyenek pixelesek, inkább 1920px széles kép használata ajánlott.
Ahogy korábban írtam, a magasságot mindig a tartalom mennyiségehatározza meg, így a kép magasságát igazítsuk ehhez. Ha kell, vágjunk meg
a képet.
Slider és Post Slider Kiemelt kép
Most a diák és a bejegyzésben használt kiemelt képek méreteiről lesz
szó, amelyek a háttér előtt jelennek meg. A diaképek csak akkor jelennek meg, ha a vetítés ⅔ , ¾ vagy 1 oszlopszélességet foglal el.
Fontos, hogy a dia képmérete legalább ilyen széles legyen, hogy optimálisan jelenjen meg a különböző méretű kijelzőkön.
1 oszlop: 450
¾ oszlop: 330
⅔ oszlop: 320
Megjegyzés: A 768px-nél kisebb böngésző szélessége elrejti a képet, és csak a bejegyzés kivonatát jeleníti meg.
Képek megjelenítése Lightbox-ban
Képgalériáknál használjuk a lightbox-ot. Ez azt jelenti, hogy a fotókra rá lehet kattintani, és külön ablakban megnézhetjük a feltöltött képet. A képgalériáknál két szélsőségbe eshetünk:
Eredeti hatalmas méretű fotókat töltünk fel, amelyek piszkosul lelassítják az oldalt.
Túloptimalizáljuk a képméretet, és nagyon kicsi pixelszélességet adunk meg.
Ha a képeket szeretnénk kattinthatóvá tenni, akkor érdemes nagyobb képméretet használni, hogy akár teljes képernyőméretben gyönyörködhessen a fotóinkban a honlapra látogató.
Általában 1500 x 844 méretezés jól működik nagy kijelzőn is, ha teljes képernyő szélességben akarjuk bemutatni a fotóinkat.
Blog modul kiemelt képek – teljes szélességű elrendezéssel
Képszélesség: egyenlő az oszlop szélességének méretével. A blogmodul használata során a megjelenítendő képek hozzáadása nem túl bonyolult.
A kiemelt képeknek olyan szélesnek kell lenniük, mint az oszlop, amelybe
beillesztjük.
Oldalsávos elrendezésnél például, egy kétharmados oszlopban legalább 700px szélességű képet kell használni, mivel ez a Divi kétharmados oszlopának szélessége.
Ne felejtsük el, hogy a kiemelt képet eredetileg a blogbejegyzésben kell beállítani.
Nézzük meg, hogy a bejegyzésünk vajon kétharmados oszlopot használ vagy sem. Ha nem, akkor a lenti méretek az irányadók.
Íme a méretezés:
1 oszlop: 1080
¾ oszlop: 795
⅔ oszlop: 700
½ oszlop: 510
⅓ oszlop: 320
¼ oszlop: 225
Blog modul – kiemelt képek rácselrendezéssel (grid)
Szélesség: egyenlő az egyoszlopos oszlop szélességével (alapértelmezett 795px)
A teljes szélességű blogelrendezéséhez hasonlóan a kiemelt kép méretét itt is magánál a blogbejegyzésnél kell beállítani.
Ami nagyszerű a rácselrendezésben, hogy a Divi a médiagalériába feltöltött képek kisebb változatát használja automatikusan (400px szélességgel).
Emiatt nem kell aggódnunk, hogy túl nagy lesz a képünk a rácsszerkezetben való megjelenítéshez.
Blurb (fülszöveg) modul képméretek
Maximális szélesség: 550px
A fülszöveg modulban elhelyezett kép méretezése is az oszlopszélességet követi, kivéve az 1 oszlopos elrendezést.
Ilyenkor a normál 1080px képszélesség helyett 550px-t adjunk meg!
1 oszlop: 550px
½ oszlop: 510px
⅓ oszlop: 320px
¼ oszlop: 225px
Személy modul (Person Module) képméretek
A bemutatkozó résznél érdemes használni a saját portrénkkal.
Ajánlott méret: szélesség: 600px
3: 4 – 600 x 800 (portrékhoz ajánlott)
16: 9 – 600 x 338
4: 3 – 600 x 400
Reszponzivitás
Egy 1 oszlopos elrendezésnél a kép a tartalom bal oldalán jelenik meg, 320px-es méretben.
Ha a képernyő mérete kisebb, mint 767px, a kép a tartalomterület szélességét 600px szélességgel veszi át.
Shop (áruház) modul termékképek méretei
Ajánlott szélesség: 330px
Ajánlott oszlopszám: 3 vagy több
Íme a termékképek szélessége különböző elrendezésekben:
6 oszlop: 150px
5 oszlop: 183px
4 oszlop: 240px
3 oszlop: 332px
2 oszlop: 520px
1 oszlo
Az alapértelmezett beállítás szerint a Divi ebben a modulban 90×90-es méretre alakítja át a képeket, és körként jeleníti meg.
A legideálisabb ezért, ha a feltöltött kép is pontosan 90x90px.
Persze lehet bármilyen 1:1-es képarányú (négyzet alakú) fotót alkalmazni, de a feleslegesen nagy fájlméret lelassítja az oldal betöltési idejét.
A Tervezés fülön (Advanced Design Setting) testre szabhatjuk a portré kép méretét és a szegély sugarát egyaránt.
Az Antikaotika-design + SEO kiemelkedő hozzáértéssel ad tanácsokat és a nem vagy alig említhető SEO ismeretekkel rendelkező web lap tulajdonos ingyenesen kap értékelést a weblapjáról.
Judit kiváló és nagyon lelkiismeretes SEO tanácsadó. Honlapom teljesítménye látványosan javult, mióta együtt dolgozunk. Szívből ajánlom mindenkinek, aki szeretné, hogy honlapja jobban teljesítsen. Bár az együttműködésünk előtt sok SEO tanfolyamot elvégeztem és így sok mindent tudtam keresőoptimalizálás témában, Judittal való együttműködés és tanácsadása mégis rengeteg újdonságot, a gyakorlatban alkalmazható, hasznos tudást adott számomra, ami számokkal is mérhető.
Egy ingyenes elemzéssel nézettem át induló vállalkozásom honlapját Judittal. Jóval felülmúlta a várakozásaimat annyi hasznos információt kaptam tőle. Így igénybe vettem a Skype-os SEO videó konzultációt is, ami szintén jóval több volt, mint amire számítottam. Konkrét megoldásokat kaptam, amelyek már látható eredményeket is hoztak.Mindezt segítőkészen, türelmesen, számomra is érthető formában, amit ez úton is külön köszönök Juditnak!Én biztosan Őt választom további SEO, szövegírás vagy honlapkészítő munkához!Pataki Krisztina
Vállalkozásom honlapját az ingyenes elemzés szolgáltatással nézettem át. Azt gondoltam (mivel ingyenes), hogy egy rövid és általános elemzést fogok kapni, 1-2 ötlettel. Ezzel szemben egy nagyon is komplex, több mint fél órás értékelést készített Judit, rengeteg tanáccsal, használható ötlettel, konkrétumokkal és az én vállalkozásom számára specifikus ajánlásokkal. Nagyon sokat segített az elemzése, mely tömören összefoglalta a lényeget ebben a témában, mellébeszélés és sallangok nélkül. Biztos vagyok benne hogy fogunk vele együtt dolgozni a jövőben.Ezúton is köszönjük szépen a hasznos tanácsokat!
Én mindig örólök annak amikor az internet mocsarában végre találok egy aranyrögöt. Most is ez történt - megtaláltam az ANTIKAOTIKA SEO honlapot ésegyszerűen imádom.Ez egy olyan profin megszerkesztett, megírt website, amely tartalmilag, stilisztikailag és nyelvtanilag is maga a csúcs.Könnyen érthető, olvasmányos, tele referenciákkal és rengeteg inspiráló anyaggal.Évekkel ezelőtt készítettem egy weboldalt a családi vállalkozásunknak és magára hagytam, nem töródtem vele vártam a csodát. Most azonban arra készülök, hogy az oldalamat a "mennyekbe" repítsem azaz a találati lista legelejére - nyilván az antikaotika segítségével.Rengeteg vállalkozás, SEO szakember van a piacon, ezért megtalálni az igazit nehéz. Úgy érzem én megtaláltam - a legjobb, akit kiválasztottam a rengetegből az nem más, mint Antal-Pap Judit SEO szakember.
Óriási meglepetés volt már az első beszélgetésünk is. Nagyon sok segítséget kaptunk. Nagyon készséges és kiváló szakember.Mellesleg óriási türelemmel kezelte tudatlanságomat.
Nagyon részletes elemzést kaptam Judittól teljesen ingyen. Sokat segített nekem a kereső optimalizálásban. Nagyon segítőkész. Csak ajánlani tudom mindenkinek....
Nagyon részletesen es alaposan elemez. A kérdéseimre kielégítő válaszokat kaptam. Barkinek ajanlom aki elakadt, vagy egy összetett SEO feladatot szeretne megvalósítani.Köszönöm a segítséget.
Köszönöm Juditnak az elemézést a pólós oldalunkhoz, ritka az olyan SEO szakember, aki ilyen szintű elemzést készít és időt szán és ingyenes elemzi az oldalt. Köszönjük neked, amint aktuálissá válik a munka, keresni fogunk! :)
Én SEO oktatásra jelentkeztem Judithoz, nagyon sok mindent tanultam/tanulok tőle, szuper jó dolgokat mutat meg. Már most látszik a webáruházunkon a változás. Elégedett vagyok!
Szuper első körös elemzést kaptam ami - nagyon jól érthető módon - már most rávilágított pár olyan dologra, amit javítani szükséges a honlapomon. Köszönöm és ajánlom mindenkinek!
Judit lelkiismeretes, profi munkaja altal az oldalunk latogatottsaga es ezaltal ugyfeleink megrendelese nagyban novekedett. Mar most tobbszorosen megerte a SEO es a kovetkezo evekben meg nagyon sok anyagi hasznot fog hozni. Koszonom az idot es a turelmet. Attila
Nagyon sok hasznos tanácsot kaptam Judittól azzal kapcsolatosan, hogy hogyan lehetne még több látogatója a honlapomnak. Biztos vagyok benne, hogy bárkinek aki a szolgáltatásait igénybe veszi, magas szakmai színvonalon, a legjobb tudása szerint, lelkiismeretesen fog segíteni.
Judit nemcsak alapos technikai ismeretekkel rendelkezik egy szuper, igényes honlap készítéséhez, hanem marketinges tapasztalatai is óriási segítséget nyújtanak abban, hogy el tudjam dönteni milyen elemeket is szeretnék használni, megjeleníteni rajta: kreatív, számomra ideális megoldásokat javasolt a skype-meetingeken. Juditban az is egyedi, hogy ő nem rizsál, hanem konkrétan és őszintén elmondja egy adott helyzetből mit lehet kohozni. Oktató videói hatalmas segítséget nyújtanak a honlap kezelésében, amely elengedhetetlenül szükséges minden honlaptulajdonos számára, így számomra is. Nagyon világosan érthetően magyarázza el az egyes lépéseket a videókban. Bloggerként is rengeteget tanultam tőle SEO-témában, amelyet azóta is beépítek szövegíróként munkáimba. Teljesem megbízom benne emberileg és szakmailag is és jó szívvel ajánlom!Bereczki Enikőgenerációs szakértőmarketing szövegíró, blogger
Nagyon hasznos és érdekes volt, kifejezetten jól felhasználható a honlapelemzés videó laikusok számára is. Örülök, hogy rátaláltam az antikaotika oldalára. Köszönöm szépen.
Köszönöm a sok jó tanácsot, hasznos volt a második videó, mert ott egyértelmű, hogy negyed annyian keresnek rá a virágküldés szolgáltatásra, mint évekkel ezelőtt. Kaptam jó tanácsot, a linképítés nekem is a fejemben van, csak riogatnak mások, hogy később a pr cikk sem lesz jó :(