Weboldal képméret segédlet 2026-ra

Manapság többen böngészik az internetet mobileszközökön, mint asztali számítógépeken. Amikor weboldalt készítesz a különböző képernyőméretek miatt fontos, hogy a megfelelő képméreteket válaszd, így minden látogatód számára biztosítható a jó felhasználói élmény, eszköztől függetlenül. Ha nem optimalizálod a képeket, a látogatók túl kicsi és elmosódott, vagy túl nagy képeket láthatnak, ami növeli a betöltési időt, és felesleges görgetésre vagy nagyításra kényszeríti őket.

A jó hír, hogy egyszerű a képeket több eszközzel kompatibilissé tenni. A megfelelő képméretek kiválasztásával, a fájlméretek minimalizálásával és egy reszponzív weboldal-dizájn használatával kiváló böngészési élményt nyújthatsz.

Kövesd az alábbi útmutatót, és optimalizáld a képeket mobil és asztali eszközökre.

Legjobb képméretek weboldalakhoz

Pixelszélesség: a megjelenítési területtől függ, de az általános irányelvek 1920 px-t javasolnak bannerekhez, 1200 px-t a fő tartalomhoz és 400-800 px-t a bélyegképekhez. A WebP fájltípusú tömörített képek a legjobbak a gyors betöltési sebesség fenntartásához.

Képméret: a képek legjobb általános (pixel) mérete a felhasználási esettől függenek, például a háttérképeknek nagyobbnak kell lenniük, mint egy blogbejegyzés képének.

Fájlméret: bármi, ami 20 megabájtnál nagyobb, drámaian befolyásolhatja a weboldal sebességét. A kisebb képek (legfeljebb két megabájt méretűek, de körülbelül 500 kilobájt) a legtöbb esetben jobbak.

Képattribútum: a képattribútumok (alt szöveg vagy alt címke) szöveg alapúak, és nem befolyásolják a weboldal teljesítményét. A képernyőolvasó szoftverekkel történő képértelmezéshez azonban használják őket, és kulcsfontosságú elemei a webes akadálymentességnek. Légy tömör az attribútum szöveggel: az ajánlott gyakorlat szerint az alt szöveg ne haladja meg a szóközökkel együtt 100 karaktert. 

Legjobb képméretek asztali és mobileszközökhöz

Az alábbi táblázat tartalmazza az ajánlott méreteket az asztali és mobilweboldalak képeihez:

Ezek javasolt méretek, amelyeket esetleg módosítani kell attól függően, hogy reszponzív weboldal-dizájnt használsz-e.

Szinte mindig jó ötlet, ha a képek megjelenítési mérete kisebb, mint a feltöltési méretük.

Weboldal képméret irányelvek

Öt fő képtípust láthatsz egy weboldalon:

• Háttérképméretek
• Heroképméretek
• Bannerképméretek
• Blogképméretek
• Logóméretek

Minden webes képtípusra különböző méretkövetelmény vonatkozik. Nézzük meg a legjobb képméreteket a gyakori weboldal-képtípusokhoz.

Háttérképméretek

A háttérképek általában a legnagyobb képek egy weboldalon. A kép háttérként szolgál a kezdőlaphoz vagy más céloldalhoz. A Cowboy kerékpár-kiskereskedő például a terméket helyezi a középpontba azzal, hogy kezdőlap háttérként használja. Kitölti a képernyőt függetlenül attól, hogy milyen eszközön nézik.

Ajánlott képszélesség: 2560 pixel

Ajánlott képmagasság: 1400 pixel

Képarány: 16:9

Ajánlott fájlméret: 20 MB

Heroképméretek

A heroképek hasonlóak a háttérképekhez, de általában kisebbek magasságban, körülbelül fele akkorák. A herokép nagyszerű választás, ha több szöveget kell megjelenítened a képernyőn anélkül, hogy a felhasználóknak görgetniük kellene.

A fenti példában a BLK & Bold egy keskeny képarányú heroképet használ, hogy kitöltse a képernyőt, mégis helyet hagyjon az alatta lévő tartalomnak.

Ajánlott képszélesség: 1280 pixel és 2500 pixel között

Ajánlott képmagasság: 720 pixel és 900 pixel között

Képarány: 16:9

Ajánlott fájlméret: 10 MB

Bannerképméretek

A bannerképek különböző méretűek és formájúak lehetnek attól függően, hogy hol helyezkednek el, és mit szeretnél megmutatni belőlük a látogatóknak. A leggyakoribb weboldal banner típus a banner hirdetés. A bannerhirdetések népszerűsítésének egyik legnépszerűbb szolgáltatása a Google Ads.

Ha olyan bannerképre gondolsz, ami nem hirdetés, a téglalap alakú lehetőségek (mint például 300 x 200 pixel vagy 970 x 90 pixel) általában jobbak.

Ajánlott képszélesség: ellenőrizd a hirdetési platformmal

Ajánlott képmagasság: ellenőrizd a hirdetési platformmal

Képarány: változó

Ajánlott fájlméret: 150 KB (ellenőrizd a hirdetési platformmal)

Blogképméretek

A blogképek típusa és mérete változó lehet. A fenti bejegyzés a Whatagraph marketingintelligencia platformtól származik, és bár a kiemelt kép feltöltési mérete 1880 x 1058 pixel, a megjelenített méret kisebb, 589 × 331 pixel.

A weboldalak megjelenítési méretének beállítása segít finomítani a dizájnt és kicsi fájlméreteket tartani (a Kulala bejegyzésben szereplő kép csak 37,5 KB).

A blogbejegyzések fő fejlécképeit (amelyek az oldal tetején vannak) egységes méretűnek kell lenniük a blogon keresztül.

Ajánlott képszélesség: 1200 pixel

Ajánlott képmagasság: 800 pixel

Képarány: 3:2

Ajánlott fájlméret: 3 MB

Logóméretek

A logód valószínűleg az egyik legkisebb kép lesz a weboldalon (hacsak nem számítod a favicont a fül sávban). A logódizájntól függően válassz téglalap vagy négyzet képarányt.

A legtöbb logónégyzet 1:1 arányhoz alkalmazkodik, amit a fenti Kulala példa bal alsó részében láthatsz.

A téglalap arányok jól működnek hosszabb márkanevekhez vagy ahol a logó szavakból áll, nem grafikából. A Shopify saját weboldallogója hosszabb 4:1 arányt használ.

Ajánlott képszélesség: 100 pixel

Ajánlott képmagasság: 100 pixel

Képarány: 1:1, 2:3, 4:1

Ajánlott fájlméret: 1 MB

Mobilképméret ajánlások

Válaszd ki a megfelelő képméreteket

A kisebb mobilképernyőkön sok felhasználó értékeli, ha ránagyíthat egy képre. Ezért próbálj egyensúlyt teremteni a képméret és a fájlméret között.

A nagy felbontású képek professzionális és kiegyensúlyozott megjelenést kölcsönöznek a weboldalnak, kiváló nagyítási lehetőségekkel. Tartsd azonos képarányon a hasonló képeket, hogy egységes dizájnt tarthass fenn az oldaltípusok között.

Egy e-kereskedelmi áruházban például az összes termékkép lehet négyzet alakú. A négyzetképeket könnyebb áthelyezni kisebb képernyőkön. A négyzet és függőleges képek ráadásul jól illeszkednek a mobilképernyőkhöz, lehetővé téve a látogatóknak, hogy többet lássanak a képekből görgetés nélkül.

Tartsd szem előtt a fájlméretet

A nagyobb fájlméretű képek befolyásolhatják az oldal sebességét, különösen akkor, ha a látogatók okostelefont használnak. Sok weboldal-építő platform maximális fájlméret-korlátozással is rendelkezik a feltöltésekre. Például a Shopify maximum 20 MB fájlméretet használ.

Ha tömörítened kell a képeket a méretük csökkentéséhez, vannak online képátméretező eszközök, amelyek segíthetnek. Ezekkel az eszközökkel átformázhatod a nagy képfájlokat új méretekre vagy fájltípusokra.

A legtöbb esetben a fejléc háttérképeket 10 MB alatt szeretnéd tartani, míg a termékfotóknak sokkal kisebbnek kell lenniük, körülbelül 300 KB-osnak.

Méretezd át a fotókat mobil képernyőméretekhez

A Shopify automatikusan átméretezi a képeket, hogy illeszkedjenek a kisebb képernyőkhöz. De más platformokon a képek manuális szerkesztést igényelhetnek, hogy mobilra késszé váljanak. Ne feledd, az asztali és mobil képernyők ellentétes tájolásúak.

Ne feledd, a nagy fájlok lelassítják az oldal betöltési idejét. Míg a veszteségmentes tömörítés a legmagasabb minőségű képet adhatja, gyakran nagy fájlokat hoz létre, amik örökké tarthatnak a weboldal betöltéséhez. Fontold meg a legkisebb képfájlok használatát a legjobb felbontással.

Bár a Shopify reszponzív dizájnjai és algoritmusai jól átméretezik és megjelenítik a képeket az eszközökön, ha átgondolt fájlméretezéssel segítesz nekik, simább vásárlási élményt teremthetsz.

Miért fontos a képméret a weboldalak számára?

A weboldalak számára a képméret három fő okból fontos:

• Jobb felhasználói élményt teremt.
• Javítja a weboldal sebességét.
• Segít a weboldal rangsorolásában.

Jobb felhasználói élményt teremt

A megfelelően méretezett képek minden felhasználási esethez javítják a felhasználói élményt. A látogatók megfelelő részletességet érhetnek el, és nem kell görgetniük a teljes kép megtekintéséhez.

Amikor a képek gyenge minőségűek, pixelesek vagy túl kicsik, befolyásolhatják a tartalom észlelt minőségét. Egy e-kereskedelmi weboldal esetében ez oda vezethet, hogy az ügyfelek megkérdőjelezik a vállalkozásod vagy termékeid minőségét.

Ezzel szemben a jó minőségű, megfelelően méretezett képek növelik a termékek észlelt értékét, és több vizuális információt nyújtanak a potenciális ügyfeleknek.

Nézd meg például, hogyan javítják az alábbi képek a fenntartható cipőmárka, az Allbirds felhasználói élményét azáltal, hogy egyértelműen kiemelik a termék különböző jellemzőit.

Javítja a weboldal sebességét

Amikor nagy képeket töltesz fel a weboldalra, tovább tart a szerver számára az oldal betöltése. A kisebb képek (mind méretben, mind fájlméretben) általában gyorsabban betöltődnek az eszközökön.

A kép betöltési sebességét gyakran „contentful paint"-nek nevezik. Ellenőrizheted a weboldalad contentful paint és más oldalsebesség-metrikáit a Google PageSpeed Insights eszközével.

Optimalizáld az oldalsebességeket összességében, hogy elkerüld a magas visszafordulási arányt.

Segít a weboldal rangsorolásában

A weboldal rangsorolása a weboldal pozíciójára utal a keresőmotor találati oldalakon (SERP). A keresésre optimalizált weboldalak magasan rangsorolnak a SERP-eken a releváns felhasználói keresési lekérdezésekhez (amiket kulcsszavaknak neveznek).

A Google számos metrikát használ annak meghatározására, hogy mely weboldalak rangsorolnak a keresési eredmények tetején. A képek minősége (vagy pontosabban az általuk generált javított felhasználói élmény) valószínűleg tényező a Google algoritmusában.

Melyik a legjobb képfájltípus?

A megfelelő képfájltípus biztosítja a jó minőségű képeket, miközben kezelhető fájlméretet tart fenn a jobb weboldal-teljesítményhez. Itt vannak a leggyakoribb képfájlformátumok és legjobb felhasználási eseteik:

WebP

A WebP egy Google által fejlesztett képformátum. Veszteségmentes tömörítést biztosít a webes képekhez, gyakran több mint 30%-kal csökkentve a fájlméretet a JPEG-hez vagy PNG-hez képest.

Ez jelentősen javíthatja a weboldal betöltési idejét, de érdemes megjegyezni, hogy a WebP-t még nem támogatják univerzálisan minden böngésző.

JPEG

A JPEG (vagy JPG) az egyik legszélesebb körben használt digitális képfájlformátum, mert egyensúlyt kínál a fájlméret és a képminőség között. Népszerű választás fényképek és összetett, sokszínű képek megjelenítéséhez.

A JPEG azonban veszteséges tömörítést használ, ami azt jelenti, hogy némi képminőség elvész, amikor a képet tömörítik.

PNG

A PNG veszteségmentes tömörítési formátum, ami azt jelenti, hogy csökkenti a fájlméretet a képminőség feláldozása nélkül. Támogatja az átlátszóságot, így jó választás olyan képekhez, amik átlátszó hátteret igényelnek.

Bár a PNG-k gyakran nagyobb fájlméretűek, mint a JPEG-ek, a tisztaság megőrzésének képessége alkalmassá teszi őket részletes grafikákhoz és logókhoz.

SVG

Az SVG (skálázható vektorgrafika) vektorképformátum, ami azt jelenti, hogy matematikai egyenleteket használ a kép megjelenítéséhez. Ez lehetővé teszi az SVG képek bármilyen méretre való skálázását minőségvesztés nélkül.

Az SVG ideális formátum logókhoz, ikonokhoz és más grafikákhoz, amiket több helyen kell használni. Az SVG-k általában kisebbek fájlméretben is, mint más formátumok, segítve a betöltési idők javítását.

AVIF

Az AVIF (AV1 Image File Format) egy modern, webre tervezett képformátum.

Kiváló tömörítést biztosít, ami rendkívül kis fájlméreteket hoz létre, miközben megőrzi a magas vizuális minőséget. Az AVIF fájlok gyakran sokkal kisebbek, mint WebP vagy JPEG megfelelőik.

Használd bármilyen webes képhez, ahol a lehető leggyorsabb teljesítmény és legkisebb fájlméret az elsődleges cél. Fő korlátja, hogy újabb formátum, ezért nem támogatják a régebbi webböngészők.

GIF

A GIF egy bitmap képformátum, ami egyszerű animációk megjelenítéséről ismert. Veszteségmentes tömörítést használ, és a képeket maximum 256 színre csökkenti, kisebb fájlméreteket eredményezve.

Bár a GIF-et nagyrészt felváltotta a PNG a statikus képeknél, továbbra is népszerű választás rövid, ismétlődő animációkhoz, és a böngészők univerzálisan felismerik.

Hogyan lehet megtudni a képméretet egy weboldalon

A leggyorsabb módja annak, hogy megnézd egy kép méretét bármely weboldalon (a kép letöltése nélkül), ha használod a böngésző Viszgálat (Inspect) opcióját.

Ez a módszer Mac-en és Windowson is működik, Safari, Chrome vagy Firefox böngészőkkel.

Menj a weboldalra, és vidd az egeret a kép fölé, amiről információt szeretnél. Kattints jobb gombbal az egérrel, hogy megjelenjen a menü, és keresd a Vizsgálat opciót:

A Vizsgálatra kattintva megjelenik az oldal HTML kódja (ijesztőnek tűnhet, de ne aggódj).

A vizsgálati panelen a rákattintott képről szóló információnak meg kell jelennie. Amikor a megfelelő kód fölé viszed az egeret, a kép is kiemelkedik:

Ebben az esetben a böngésző megmondja, hány pixelt használ a kép. Ha átméretezed a weboldalt, ez a szám ennek megfelelően változik.

Ha a kép eredeti feltöltési tulajdonságait keresed, vidd az egeret a képtároló link fölé:

A vizsgálati panel bezárásához csak kattints az X-re a jobb felső sarokban.

Képoptimalizáló eszközök

Az online képoptimalizáló eszközök egyszerű, gyors (és általában ingyenes) módja a weboldalad képeinek átméretezésének. Itt van három népszerű képoptimalizáló eszköz:

• Image Resizer
• Image Optimizer by Squirai
• LoyaltyHarbour Image Optimizer

Image Resizer

A Shopify ingyenes online képátméretező eszköze kényelmes módja a képek beállításának a marketing csatornákon és közösségi médiában való használatra.

Választhatsz különböző hivatalos helyes méretekből Instagram bejegyzésekhez és történetekhez, YouTube bélyegképekhez és más típusú közösségi tartalomhoz.

Image Optimizer by Squirai

A Squirai képoptimalizáló eszköze sebességtesztelt, hogy biztosítsa a képek SEO-készségét. Automatikusan optimalizálja az összes képet a weboldalon, beleértve az újakat is, amiket később adsz hozzá.

Ráadásul testreszabhatod és alkalmazhatsz vízjelet a termékfotográfiád védelmére anélkül, hogy ismerned kéne a kódot.

LoyaltyHarbour Image Optimizer

A LoyaltyHarbour Image Optimizer hasonlóan működik a Squirai eszközéhez, automatikusan tömörítve a képeket a weboldalon.

Ezen kívül a műszerfal lehetővé teszi a kép alt szöveg automatikus beállítását és a legjobb képfájltípusra való konvertálást a jobb oldalsebesség érdekében.

Alternatívaként, ha van rá lehetőséged, használhatod a Photoshopot is a fájlméret csökkentésére. De ez bonyolultabb folyamat lehet, mint a fenti eszközök.

Hibaelhárítás: képformázási problémák

Ahogy kezeled a weboldalad, valószínűleg találkozni fogsz képformázási problémákkal. A képekkel kapcsolatos problémák a helytelen méretezéstől a törött linkekig terjedhetnek.

Nézzünk meg megoldásokat néhány gyakori weboldal-képpel kapcsolatos problémára.

Helytelen képméret

Probléma: a képek túl nagynak vagy kicsinek tűnnek, és elronthatják a weboldal elrendezését, ami kompromittált felhasználói élményt eredményez.

Megoldás: ha weboldaltémát vagy -sablont használsz, keress forrásokat a dizájnodhoz megfelelő képméretekről. A weboldalépítőben mindenképpen válassz megjelenítési méreteket minden képhez, hogy a képek ne jelenjenek meg teljes, eredeti méretükben.

Lassú betöltési idők

Probléma: a képek lassabban - vagy egyáltalán nem - töltődnek be, mint a weboldal többi része. Megoldás: a rossz fájlformátum szükségtelenül nagy fájlméretekhez vezethet, amik befolyásolják a betöltési időket. Használj képszerkesztő vagy konverziós eszközt a képek fájlformátumának megváltoztatásához. Grafikákhoz vagy logókhoz fontold az SVG használatát a skálázhatóság miatt minőségvesztés nélkül. Más képekhez fontold a WebP-re való konvertálást a nagy fájlok tömörítéséhez.

Gyenge képminőség

Probléma: a képek pixelesnek vagy elmosódottnak tűnnek.

Megoldás: ha a képek pixelesnek vagy elmosódottnak tűnnek, próbálj meg nagyobb felbontású verziót keresni. Ne feledd, a képfelbontás különbözik a képmérettől. A felbontás a kép részletességének mennyiségére utal, gyakran hüvelyenkénti pixelben (PPI) mérve. A nagyobb felbontás élesebb képet jelent, mérettől függetlenül.

Ha a képminőséget a tömörítés csökkenti, állítsd be a tömörítési beállításokat, vagy válts veszteségmentes tömörítési formátumra, mint például a PNG.

A képek egyáltalán nem jelennek meg

Probléma: törött képlinkek, amik miatt nem jelenik meg kép.

Megoldás: ellenőrizd a képek forrás URL-jét. Ennek az URL-nek közvetlenül a képfájl helyére kell vezetnie. Hasonlítsd össze a képfájl nevét az URL-ben a képfájl tényleges nevével. Pontosan egyezniük kell, beleértve a fájlkiterjesztést is (.jpg, .png, .svg).

Optimalizáld a weboldal képeket a sikerért

A képek hozzáadása a weboldalhoz nem csak a szép megjelenésről szól, hanem az egy kulcsfontosságú tényező a felhasználói élmény javításában és a keresőmotor rangsorolás növelésében.

A képek mérete mindkét elemet befolyásolja. Túl nagy, és a weboldalak lassan töltődhetnek be. Túl kicsi, és a képek pixelesnek vagy elmosódottnak tűnhetnek.

Mindenképpen értsd meg a weboldaldizájnod képméret-követelményeit, és válaszd ki a megfelelő fájlformátumot a képfelbontás és fájlméret egyensúlyozásához.

---

Az első alkalommal értékesítőktől a globális kiskereskedőkig a Shopify mindenkinek működik. Nézd meg a csomagokat és az árakat.