Divi WP sablon képátméretezés alfától omegáig
Divi WP sablon képátméretezés alfától omegáig
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:
Weboldal sebesség teszt
A képeket még a feltöltés előtt érdemes optimalizálni:
- átméretezéssel(pixel)
- tömörítéssel (kb)
- illetve levágni a „felesleget” pl. ha keskeny fejlécként szeretnéd használni
Ideális, ha a képfájlok mérete 60kb és 200kb között marad. Így nem
lassítják túlságosan az oldal betöltési idejét.
Válaszd ki a megfelelő szerkesztőprogramot a következő cikkből:
Képszerkesztő programok illetve a „méret a lényeg?”
Ha feltöltöttük a képet, ne felejtsük el kitölteni az „alt tag„-et, vagyis a 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.
teljes szélességű képkéntEzekhez 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.
Rendelkezésünkre áll egy nagyszerű online kalkulátor: Aspect Ratio Calculator, hogy átszámoljuk pixelbe a fenti arányokat.
Mitől függ a képméret a Divi sablon esetében?
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!
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ége hatá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.
Forrás:
The Ultimate Guide to Using Images within Divi
How to Choose the Best Image Sizes for your Divi Website
Antal-Pap Judit
Saját honlapok:
Antikaotika, Antikaotika-design, Antikaotika-SEO, Retro-Vintage
Ha Photoshopban szerkeszted a fotóidat a Fájl menüben találod a Save for Web vagy magyarul a mentés webre funkciót. Újabban ezt az Exportálás menüpontban találod.Itt megfelelően optimalizálhatod a tömörítési, és színkezelési beállításokat, kifejezetten az interneten való megjelenésre.
