2019.02.8. | KépoptimalizálásWordPress | 0 hozzászólás

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.

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 olvassaautomatikusan 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.

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?…

…tovább olvasom.

Kapcsolódó képek: