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

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:

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.Képátméretezés Divi 11.alt tag fontossága

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:

  • képátméretezés - képoptimalizálásteljes 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.

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!

 

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

Slider és Post Slider háttérképek Képátméretezés Divi 13

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

 

Teljes szélességű háttérképek vetítéshez Képátméretezés Divi 14

 

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 Képátméretezés Divi 15.

 

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épátméretezés Divi 16

 

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:

  1. Eredeti hatalmas méretű fotókat töltünk fel, amelyek piszkosul lelassítják az oldalt.
  2. 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

Blog modul kiemelt képek Képátméretezés Divi 17.

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)

 

Blog modul - kiemelt képek rácselrendezéssel (grid) Képméretezés Divi18
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 Képméretezés Divi 19

 

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

 

Shop (áruház) modul termékképek méretei Képátméretezés Divi 21.

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

Testimonial (Ajánlás) portré képek beállításai

 

Testimonial (Ajánlás) portré képek beállításai2

 

Az alapértelmezett beállítás szerint a Divi ebben a modulban 90x90-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

Antal-Pap Judit

SEO szakember,  keresőoptimalizálás szakértő, web-designer

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

Weboldal sebesség teszt – SEO elemzés 3.

Weboldal sebesség teszt – SEO elemzés 3.

A honlap sebesség is rangsorolási tényező! Messze nem a legmeghatározóbb ugyan, de fontos! Ugyanis, ha webhelyed nem elég gyorsan töltődik be, és a látogatóidnak nem lesz türelme vagy ideje kivárni, akkor  idő előtt lelépnek, és visszamennek a találati listára. Ezzel viszont azt üzenik a Google-nek, hogy nem volt jó a honlapod, és lejjebb sorolhatja a találati listában. Lehet, hogy szuper a tartalmad, csak éppen a weboldal sebesség szörnyen lassú. Az online weboldal sebesség teszt segít kideríteni, hogy milyen gyors a weboldalad, és min érdemes változtatni.

Weboldal sebesség teszt 9 perces videó

A weboldal sebesség teszt videós átirata

Google PageSpeed Insights – weboldal sebesség teszt

  1. Első lépésként vizsgáld meg, milyen gyors a weboldalad, teszteld le! Kattints a következő linkre:

Google PageSpeed Insights

  1. Másold be/ írd be a vizsgálandó honlap URL-jét:

Pl.: http://seo.antikaotika-design.hu/

  1. Kattints az ANALYZE (elemzés) gombra! Pár másodpercen belül megkapod a kiértékelést.
  2. Váltogass a MOBILE/DESKTOP fülek között.  85-ös érték felett már elégedett lehetsz!

https://developers.google.com/speed/pagespeed/insights/

A Google PageSpeed Insights egy 1-100-ig terjedő skálán osztályozza a honlapokat.

Ha a teszt eredménye nem kielégítő, akkor azonnali megoldásra van szükségünk!

 

A honlap betöltési idejét többféle módon javíthatod:

Honlap gyorsítás a képek optimalizálásával

Van amelyiket magad  is meg tudod oldani. Több, különböző képszerkesztő programok segíthetnek  a képek tömörítésében. Ha van eredeti fotód, tömörítést követően töltsd fel. A sok felszabadult megabyte-tal javíthatod weboldalad teljesítményét.

Olvasd el: Képátméretezés – képoptimalizálás – SEO tippek 4.

Weboldal sebesség optimalizálása gyorsítótárazással

A WordPress honlapok jól optimalizálhatók, talán csak annyi a gond velük, hogy kell egy kis idő, hogy betöltődjenek, pláne ha a honlapot túlterheljük dizájn elemekkel, amit az én http://retro-vintage.hu honlapomnál elkövettem. Ettől függetlenül nagyon jól teljesít a honlap! 🙂

A honlapsebességet “lazy loading” megoldással is optimalizálhatod úgy, hogy a  dizájn elemek csak fokozatosan töltődnek be, ahogy görgeted az oldalt.

A gyorsításhoz használjuk a “Caching” bővítmények valamelyikét:

Ingyenes honlapsebesség gyorsító WordPress bővítmények:

weboldal sebesség teszt caching plugin előtt

Weboldal sebesség teszt caching plugin előtt

 

weboldal sebesség teszt caching plugin után

Weboldal sebesség teszt caching plugin után

Fizetős honlapsebesség gyorsító WordPress bővítmény:

WP-Rocket

 

Weboldal sebességet befolyásoló további tényezők

  • szerver válaszideje
  • böngésző gyorsítótárazása
  • szkriptek és CSS tömörítése
  • stb.

Google PageSpeed Insights teszten kívül az alábbi sebességteszteket is érdemes megnézni, hogy a fenti problémákról minél több infót megkapj:

A honlapod gyorsítását bízd szakemberre, és ügyelj arra, hogy a változtatások előtt legyen biztonsági mentés!

Keresőoptimalizált szövegírás – ahogy a Google szereti

Keresőoptimalizált szövegírás – ahogy a Google szereti

Lorem ipsum dolor sit amet, keresőoptimalizált szövegírás – ahogy a Google szereti

Ne lepődj meg, hogy ez a cikk latinul van! Nézd meg a Keresőoptimalizált szövegírás videót, és mindent megértesz.

A videóban található keresőoptimalizálási bővítményt  itt tudod letölteni: Yoast SEO plugin

Lorem ipsum dolor sit amet, keresőoptimalizált szövegírás consectetur adipiscing elit. Cras quis diam aliquet, varius diam ac, bibendum tortor. Sed condimentum lorem a nulla efficitur mollis. Mauris facilisis ex eget massa posuere, in tincidunt ex facilisis. Quisque varius, ex at consequat suscipit, nibh felis accumsan erat, et tempus lorem quam a enim. Pellentesque tempus ac neque ac eleifend. Nunc nec quam nec justo volutpat venenatis quis at nulla. Nam enim metus, consequat ac finibus non, mollis a risus. Pellentesque eu finibus lacus. Nullam feugiat non nibh sit amet malesuada.

Lorem ipsum dolor sit amet, keresőoptimalizált szövegírás consectetur adipiscing elit.

Mauris pharetra velit vitae lacus rhoncus, at posuere magna imperdiet. Praesent blandit tempor ipsum, ac vehicula odio vehicula mattis. Aenean leo orci, ullamcorper quis pretium vitae, vehicula eget augue. Etiam a aliquet neque. Suspendisse eget nisl eu enim maximus hendrerit. Sed ornare porttitor lacus, vel efficitur lectus molestie a. Vivamus tristique sodales luctus. Duis ultrices risus vitae massa posuere imperdiet. In hac habitasse platea dictumst. Nunc eu consequat massa. Donec vitae libero a sapien hendrerit rhoncus et eget sem. Quisque mauris lectus, ornare in elit eu, condimentum fermentum sapien. Aliquam vulputate tellus ac velit luctus tristique ac vitae mi.

Nullam bibendum, magna eu volutpat sodales keresőoptimalizált szövegírás

Vivamus fringilla arcu nibh, vel lacinia tortor ultricies vitae. Aenean semper rutrum urna ac ultricies. Suspendisse feugiat diam id velit pharetra feugiat. Nulla laoreet aliquet porttitor. Sed eu erat rutrum, rhoncus nunc ac, egestas lacus. Integer suscipit lobortis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut iaculis lectus arcu keresőoptimalizált szövegírás – ahogy a Google szereti, non vulputate augue sollicitudin a. Proin laoreet ante vitae pulvinar dignissim. Pellentesque et nibh est. Nam vel nisi nec erat sagittis egestas sed non tortor. Praesent sem ligula, vestibulum vel pellentesque nec, feugiat ac ante. In eleifend dignissim quam, at tristique neque vehicula convallis. Quisque elementum ligula sit amet lorem viverra maximus. Morbi a feugiat sapien, eget cursus lectus.

Keresőoptimalizált szövegírás

Donec consequat leo luctus, ultricies odio at, porta libero. Aliquam ac orci ut purus sodales lobortis at vel quam. Praesent at bibendum risus. In at ultricies quam. Nunc sit amet turpis urna. Sed suscipit sollicitudin tortor sodales finibus. In dapibus, magna non auctor tincidunt, quam augue finibus ex, non finibus dui urna in quam. Ut tempor tristique purus, nec finibus justo keresőoptimalizált szövegírás – ahogy a Google szereti consectetur at. Sed eget nunc ac dolor imperdiet pellentesque. Ut fermentum felis erat, non vulputate massa porta ac. Proin fringilla dui et molestie laoreet. Donec ullamcorper lacinia facilisis. Morbi sed congue odio. Nunc vehicula diam quam, eu convallis ipsum euismod eu.

Nunc cursus sem velit, in porta felis eleifend ac. Nam venenatis felis massa, vel luctus massa ornare non. Morbi iaculis posuere neque sed suscipit. Curabitur luctus velit vitae viverra iaculis. Suspendisse nec elit ac arcu porttitor posuere ut ut felis. Morbi eget lacus in tellus mollis fringillakeresőoptimalizált szövegírás – ahogy a Google szereti Vestibulum dignissim dapibus auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel arcu in urna fringilla placerat. Sed malesuada vitae sem vel auctor. Aenean venenatis tincidunt diam at commodo. Integer laoreet vitae ipsum eget maximus. Fusce volutpat tortor turpis, a vehicula leo feugiat at. keresőoptimalizált szövegírás.

Érdekel?  ⇒ Keresőoptimalizált honlapkészítés

 

 

Antal-Pap Judit

Antal-Pap Judit

SEO szakember,  keresőoptimalizálás szakértő, web-designer

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

 

 

Kérem a 70 SEO tipp - 30 oldalas eBookot INGYEN!

 

Örülünk, hogy itt vagy! A letölthető ajándékod linkjét email-ben küldtük el. Ha nem találod, nézz szét a SPAM mappádban! Sok sikert kívánunk!

Pin It on Pinterest

Oszd meg, ha hasznosnak találod!

Köszönöm, hogy megmutatod a barátaidnak is! Csak egy kattintás az egész...