Képek feltöltése a weboldaladra

Utoljára ellenőrizve: 2026. október 29.

A weboldalad első benyomását a képek adják. Ezek a legnagyobb fájlok is rajta: egy telefonos fotó 3–⁠5 MB, weboldalra előkészítve ugyanez 300–⁠400 KB, szemre mégsem látszik különbség. Így az oldal mobilon is gyorsan betölt, amit a Google is figyel. A képekre kattintva nagyobb méretben is megnézheted őket.

1. Válassz jó képet

A saját, jó minőségű fotó mindig többet ér a stockképnél: a látogató a valódi csapatodat, termékedet és helyedet akarja látni. Ha teheted, fotóssal készíttesd.

Világos és éles

Így ne: sötét, bemozdult, ferde. Így jó: sok fény, éles, egyenes, az arcok jól látszanak. Nappali fénynél fotózz, a téma az ablak felé nézzen, a telefont tartsd két kézzel vagy támaszd meg.

Szöveg nélkül

Így ne: ráírt szlogen. Eltakarja a képet, mobilon apró és olvashatatlan lesz, a kereső nem szövegként látja és lefordítani sem lehet. Így jó: tiszta kép, a szöveget a weboldal írja mellé vagy rá.

Egységes stílus

Egy oldalon belül a képek hasonló fényűek és hangulatúak legyenek. Ne keverd ugyanabban a szakaszban a rajzot, a stockfotót és a telefonos képet, a termékfotók pedig azonos háttér előtt készüljenek.

Ha nincs saját képed

Ingyenes képbankok: Unsplash, Pexels, Pixabay. A képeik üzleti célra is ingyen használhatók, de a kép oldalán mindig nézd meg a licencet. A „Creative Commons” jelölés önmagában nem elég: van, amelyik tiltja az üzleti felhasználást, más kötelezővé teszi a szerző feltüntetését.

Fizetős képre az Envato Elements és a Magnific (korábban Freepik) kínálatát ajánljuk. Mindkettőre van előfizetésünk: ha találsz ott egy jó képet, küldd el a linkjét és letöltjük neked.

2. Méret és vágás

A Képoptimalizáló Weboldalra beállítása a kép hosszabbik oldalát 1920 px-re kicsinyíti. Ez szinte minden helyre elég, a kisebb képernyőkre a WordPress magától készít kisebb változatot. Ahol pontos arány kell (megosztási kép, termékfotó, portré), ott előbb vágd méretre a képet a telefonod vagy a géped képszerkesztőjével, utána optimalizáld.

Hová kerül	Méret (px)	Mire figyelj
Teljes szélességű fejléc, háttérkép	1920 × 1080	Fekvő kép. Telefonon csak a közepe látszik (lásd lent).
Kép szöveg mellett	1200 × 900	Elég a képernyő felének szélessége, de az 1920 px sem baj.
Blogcikk kiemelt képe	1200 × 630	Ebből lesz a cikk megosztási képe is.
Megosztási kép (og:image)	1200 × 630	Lásd lent.
Termékfotó	1200 × 1200	Négyzetes, minden terméknél ugyanolyan háttérrel és távolságból.
Portré, csapattag	800 × 800	Négyzetes, az arc középen, fölötte egy kis hely.
Logó	SVG, vagy PNG legalább 600 px szélesen	Átlátszó háttérrel. Az SVG-t küldd el nekünk, mi töltjük fel.
Webhely-ikon (favicon)	512 × 512	Négyzetes PNG, a WordPress legalább ekkorát kér.
E-mail, űrlap melléklete	legfeljebb 1024	Erre való a Képoptimalizáló E-mailhez, űrlaphoz beállítása.

Ha a weboldalad terve más arányt kér (például álló portrét), az az irányadó. Ha bizonytalan vagy, kérdezz meg minket.

Asztali gépen és telefonon

Ugyanaz a fejléckép asztali gépen és telefonon. A telefon a kép közepét mutatja, a széle lemarad: itt a bal szélén ülő ember és a kivetítő is. A lényeg (arc, termék) ezért kerüljön középre és körülötte maradjon hely. Fejlécbe álló fotót ne tegyél.

Megosztási kép (og:image)

Ez a kép jelenik meg, amikor valaki megosztja az oldalad linkjét Facebookon, Messengerben, LinkedInen vagy Viberen. A neve az Open Graph szabványból jön: az oldal kódjában az og:image sor mondja meg ezeknek az alkalmazásoknak, melyik képet mutassák. A mérete 1200 × 630 px.

Blogcikknél a kiemelt képből készül, ezért azt is ebben a méretben töltsd fel. Más oldalaknál a szerkesztőben a Yoast SEO Közösségi megjelenés részében adhatod meg. A fontos rész (logó, cím) ne kerüljön a szélekre, mert van, ahol kisebbre vagy négyzetesre vágják. A mi főoldalunk megosztási képe így néz ki:

3. Nevezd el beszédesen

A fájlnévből a Google is látja, mi van a képen. Neked is könnyebb lesz megtalálni később.

• Így ne: IMG_4521.JPG, kep1.jpg, Végleges FINAL (2).png, Képernyőfotó 2026-10-12 14.22.45.png
• Így jó: csapat-a-targyaloban.webp, kerti-pavilon-fenyo-3x4-m.webp, fogorvosi-rendelo-varoterem.webp

3–⁠5 szó arról, ami a képen van: kisbetűvel, a szavak között kötőjellel. Nevezd át a fájlokat, mielőtt behúzod őket a Képoptimalizálóba. Az ékezetet és a szóközt ő kiveszi (a Csapat a tárgyalóban.jpg fájlból csapat-a-targyaloban.webp lesz), de az IMG_4521 nevűből nem tud kitalálni semmit.

4. Optimalizáld a Képoptimalizálóval

Nyisd meg ezt az oldalt: kepoptimalizalo.vikingoapp.hu

1. Húzd be a képeket a szaggatott keretbe, vagy kattints bele és válaszd ki őket. Egy egész mappa is jöhet, az iPhone-os HEIC kép is.
2. A „Mire készül a kép?” résznél hagyd a Weboldalra beállítást: alapból ez van kiválasztva.

1. Pár másodperc múlva minden kép mellett zöld pipa jelenik meg, alatta a régi és az új méret.
2. Kattints az Összes letöltése (ZIP) gombra, majd csomagold ki a letöltött fájlt.

Minden a böngésződben történik: a képek nem kerülnek fel sehová, a bennük rejtett adatokat (például hol készült a fotó) pedig törli.

Mire figyel helyetted

Balra a túl kicsi kép, amit a weboldal felnagyít: homályos. Középen a túltömörített: kockás. Jobbra a Weboldalra beállítással készült: éles, pedig a fájl az eredeti töredéke. A tömörítés veszteséges, de 82-es minőségen ezt szemmel nem látod: ettől lesz kicsi a fájl.

A másik két beállítás: az E-mailhez, űrlaphoz legfeljebb 1024 px-es és 500 KB-os JPG-t készít, ha a képet levélben vagy egy hivatalos űrlapon küldöd. A Csak tömörítés megtartja a kép formátumát és méretét.

5. Töltsd fel és írj helyettesítő szöveget

1. A WordPress bal oldali menüjében válaszd ezt: Média › Média fájl hozzáadása.
2. Húzd be a kicsomagolt képeket a szaggatott keretbe, vagy kattints a Fájlok kiválasztása gombra.

Elementorban a kép kiválasztásakor megnyíló médiatárba is ugyanígy behúzhatod őket.

Kattints a feltöltött képre és töltsd ki a Helyettesítő szöveg mezőt (angolul Alternative Text, röviden alt): egy mondat arról, mi van a képen. Ezt olvassa fel a képernyőolvasó a gyengénlátóknak és ez látszik, ha a kép nem töltődik be. A Google is ebből tudja, mit ábrázol.

• Így ne: kép vagy IMG_4521, mert semmit nem mond.
• Így ne: weboldal készítés budapest olcsó weboldal, mert ez kulcsszóhalmozás, amit a Google spamnek vehet.
• Így jó: A csapat megbeszélésen, egy weboldal tervét nézik a kivetítőn

Díszítő képnél (minta, vonal) üresen hagyhatod. A „Cím” mezőt a WordPress a fájlnévből tölti ki, azzal nincs teendőd.

6. Ha nekünk küldöd a képeket

Ha a képeket mi tesszük fel a weboldaladra, ne optimalizáld őket: az eredeti, legnagyobb méretű fájlokra van szükségünk, mert a terv szerint mi vágjuk és tömörítjük őket.

1. Kérj tőlünk Google Drive-linket, ha még nem kaptál. A képeket mindig oda töltsd fel.
2. Az eredeti, legnagyobb méretű fájlt töltsd fel. Ne aggódj, bőven van tárhelyünk.
3. Ha a fájlokat el is nevezed (lásd a 3. lépést), azzal sokat segítesz.

Messengeren és WhatsAppon ne küldd, mert ezek összenyomják és lekicsinyítik a képet.