2019.02.8. | Képoptimalizálás, WordPress | 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.