Képek optimalizálása weboldalra
A weboldal optimalizálás egyik legfontosabb szegmense a képek optimalizálása. Gyorsabb lesz tőle a weboldalad, javul a felhasználói élmény, és a keresőmotorok is előszeretettel fognak előre sorolni a keresési találatok listáján. Ebben a cikkben összefoglalom neked, hogy milyen lépéseken keresztül tudod jól használni a képeidet a weblapodon. Készen állsz? 🙂
Korábban azt gondoltam, hogy minél kevesebb képet használunk egy weboldalon, annál jobb, mert „a sok képtől olyan lassú”. Ez csak részigazság. A teljes igazság az, hogy a sok optimalizálatlan képtől olyan lassú. Egyébként a google keresője pedig pont hogy előnyben részesíti azokat az oldalakat, amelyek képi tartalomban gazdagok. Webáruházak esetén hatványozottan igaz.
Ez a bejegyzés kincset fog érni számodra, ha alkalmazod is az itt leírtakat. Kövesd végig a tanácsaim és igyekezz ezek után mindig így feltölteni a képeid!
Weboldalakhoz való képformátumok
A különböző képformátumok különböző előnyökkel járnak, és a helyes választás nagyban befolyásolhatja a weboldalad teljesítményét. Mikor mit használj?
JPG/JPEG: A legnépszerűbb webes képformátum,raszteres képekhez való és jól tömöríthető.
PNG: Akkor alkalmazzuk, amikor átlátszó háttérrel szeretnénk megjeleníteni a képeinket. (Erre a jpeg nem alkalmas.) Általában a png képeket viszont nehezebb minőségromlás nélkül elfogadható méretre tömöríteni.
WebP: Az egyik legjobb képtömörítési formátum. Többnyire a jpeg-nél is sokkal kisebb fájlméreteket eredményez, miközben megtartja a minőséget. Hátránya, hogy a régebbi böngészők és a Safari sem támogatja ezt a formátumot.
SVG: Vektorgrafikák megjelenítéséhez használjuk. (pl: logók, ikonok) Minél egyszerűbb a grafika, annál gyorsabb a betöltési ideje is.
Weboldalra optimalizált képek mérete és felbontása
Nem érdemes nagyobb képeket használni, mint amire valójában szükség van, mivel lassítja a betöltési időt és sok problémát generál.
Az én tanácsom, hogy a kép felbontása maximum 1920x1080px legyen. (ez egy teljes képernyős háttér mérete) Egy blogbejegyzéshez elég az 1200px szélesség, a logókhoz, ikonokhoz és kisebb méretű képekhez pedig max 300px.
Képek szerkesztéséhez millió programot használhatsz. Válaszd azt amelyik számodra a legkézenfekvőbb. Tippként itt hagyom az egyik kedvencem, a Photopea-t. Ez egy végtelenül egyszerű online képszerkesztő ami egy „butított változatban” utánozza a photoshopot. (Akkor akadtam rá, amikor képet kellett volna körbevágnom egy laptopon amin semmilyen grafikai szoftver nem állt rendelkezésemre, szóval nagyon örültem neki! 🙂 )
Így csináld! Drag and drop módszerrel behúzod a képet a szerkesztőablakba. A felső menüsávban kiválasztod a „Kép” menüpontot, majd a „Képméret…” opciót, és átírod a méreteket. Ha be van jelölve a magasság melletti „lánc ikon”, akkor csak a szélesség értékét kell átírnod, mert méretarányosan hozzáigazodik majd a magasság is. A 72dpi weboldalra szánt képekhez elég szokott lenni. Nyomj egy okét, és mentsd töltsd le magadnak az elkészült képet.
+Tipp! Ha vágni is szeretnél a képből, menj a „Vászon méret…” opcióra vagy használd a bal oldali eszközsávból a vágó eszközt. (felülről az 5. ikon)
A képek mérete minden esetben maximum 300kb legyen, de minél kisebb annál jobb.
Amennyiben a felbontást beállítottad még egy fontos lépést tehetsz a méretcsökkentés érdekében: tömörítsd őket! Így jelentős minőségromlás nélkül tovább csökkentheted a fájlok méretét.
Ingyenes online eszközök: tinypng.com, optimizilla
Weboldalra optimalizált képek elnevezései
A kép neve
Ha jól optimalizált képeket szeretnél, akkor kérlek felejtsd el a „image.jpeg” vagy a „biusebfdfisfklnfkf.jpg” nevű fájlneveket. Tudom, hogy egyszerűbb rátenyerelni a billentyűzetre, de keresőoptimalizálás szempontjából számít, hogy mit hogyan nevezel el. 😀
Ne használj ékezeteket vagy bonyolult karaktereket és a lényeg, hogy minél rövidebben és pontosabban leírd a kép tartalmát. Ha kapcsolódik, beleírhatod a kulcsszavaid vagy a márkád nevét is, csak ne legyen túl általános. pl: weboldal.jpeg, hanem pl: weboldal-optimalizalas-profi-kephasznalattal.jpeg
A kép alt szövege
WordPress-ben feltöltés után meg lehet adni a képek alt szövegét is. A keresőmotorok miatt is fontos, és a látássérülteket is segíti. (A vakok és gyengénlátók képernyőolvasó szoftvereket használnak, amelyek felolvassák a képek alternatív szövegét, így segítséget kapnak a tartalom megértéséhez.)
Az alternatív szöveg megegyezhet a kép nevével is, de inkább legyen leíró jellegű. Szerepelhetnek benne a releváns kulcsszavaink, de ne ragaszkodjunk hozzájuk minden áron. Ezen kívül nyugodtan tartalmazhat még ékezetes karaktereket is. pl: Weboldal optimalizálás profi képhasználattal
Ellenőrizd a munkád!
Használj ellenőrző eszközöket, mint a Google PageSpeed Insights, hogy további javaslatokat kapj a képek optimalizálására.
Összegzés
Remélem segítettem neked ezzel a bejegyzéssel és már látod, hogy a weboldal optimalizálás nem egy elérhetetlen dolog. Már tudod, hogy melyik formátumú képet milyen esetekben kell alkalmaznod. A nagy méretű és nagy felbontású képeket le tudod faragni, és szereztél információkat arról is, hogy hogyan tudod hatékonyan elnevezni a képeid, hogy azok tényleg támogassák a weboldalad.
Hidd el, hogy hosszú távon a belefektetett energiád megtérül. Alkalmazd kitartóan ezt a tudást!
Maradt még kérdésed? Írj nekem bátran! 🙂
Kissné Rácz Viktória
Webdesigner, wordpress fejlesztő. 2016-ban végeztem grafikusként, de szakemberré az elmúlt 8 év alatt váltam. Ma már főként weboldalkészítéssel, logó és arculat tervezéssel és social média anyagok készítésével foglalkozom.
Letölthető anyagok
