K\u00e9pekkel olykor sokkal k\u00f6nnyebben elmondhatsz valamit, mint szavakkal.<\/li>

Egy egyszer\u0171 k\u00e9p is t\u00f6bbet tud mondani, mint egy bekezd\u00e9snyi sz\u00f6veg.<\/li>

A k\u00e9pekn\u00e9l nem sz\u00e1m\u00edtanak a nyelvi korl\u00e1tok.<\/li>

R\u00e1ad\u00e1sul az emberek sokkal gyorsabban dolgozz\u00e1k a k\u00e9pi inform\u00e1ci\u00f3kat.<\/li>

A k\u00e9pekkel k\u00f6nnyed\u00e9n felkeltheted a l\u00e1togat\u00f3k figyelm\u00e9t a weboldaladon, \u00e9s seg\u00edts\u00e9g\u00fckkel megk\u00fcl\u00f6nb\u00f6ztetheted a term\u00e9keidet.<\/li><\/ul>\n\n\n\n
Nem mindegy azonban, hogy milyen k\u00e9peket haszn\u00e1lsz, \u00e9s hogyan teszed ezt.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Milyen k\u00e9peket haszn\u00e1lj, \u00e9s hogyan?<\/strong><\/h2>\n\n\n\n
4 k\u00e9rd\u00e9s, amit tegy\u00e9l fel magadnak, miel\u0151tt kiv\u00e1lasztan\u00e1l egy fot\u00f3t a weboldaladra<\/h3>\n\n\n\n
A megfelel\u0151 fot\u00f3 kiv\u00e1laszt\u00e1sa m\u00e9g tal\u00e1n ann\u00e1l is nehezebb, mint a megfelel\u0151 szavak\u00e9. Ennek ellen\u00e9re sokan nem ford\u00edtanak kell\u0151 gondot a fot\u00f3kra, kevesebbet foglalkoznak vel\u00fck, mint a weboldal sz\u00f6veg\u00e9ben. Ha nem is olvasol tov\u00e1bb ebben a bejegyz\u00e9sben, ezt a n\u00e9h\u00e1ny bekezd\u00e9st m\u00e9g fusd \u00e1t, mert ha megjegyzed az itt felsorolt k\u00e9rd\u00e9seket, \u00e9s mindig felteszed k\u00e9pv\u00e1laszt\u00e1sn\u00e1l, akkor a legnagyobb hib\u00e1kat m\u00e1r elker\u00fcl\u00f6d.<\/p>\n\n\n\n
1. A kiv\u00e1lasztott k\u00e9p megfelel\u0151en k\u00f6zvet\u00edti azt az \u00fczenetet, amit kommunik\u00e1lni akarsz?<\/h4>\n\n\n\n
Ugye nem sz\u00edvesen haszn\u00e1lsz felesleges, \u00e9rtelmetlen, oda nem ill\u0151 szavakat a weboldaladon, hanem a l\u00e9nyeget akarod megfogalmazni, min\u00e9l \u00e9rthet\u0151bben? Akkor a tartalmaidban elhelyezett fot\u00f3kkal mi\u00e9rt tenn\u00e9l m\u00e1sk\u00e9pp? Minden egyes k\u00e9pnek, amit elhelyezel a tartalmadban, hozz\u00e1 kell j\u00e1rulnia ahhoz, hogy<\/p>\n\n\n\n
vil\u00e1gosabb legyen a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra az \u00fczeneted,<\/li>
cselekv\u00e9sre \u00f6szt\u00f6n\u00f6zd \u0151ket,<\/li>
\u00e9s t\u00f6bb konverzi\u00f3t \u00e9rj el.<\/li><\/ul>\n\n\n\n
2. Illik a k\u00e9p a m\u00e1rk\u00e1dhoz?<\/h4>\n\n\n\n
Egy egyszer\u0171 szab\u00e1ly: ha egy k\u00e9p nem passzol a m\u00e1rk\u00e1d image-\u00e9hez, akkor ne haszn\u00e1ld<\/strong>! A m\u00e1rk\u00e1d szem\u00e9lyis\u00e9g\u00e9nek er\u0151teljesnek \u00e9s vil\u00e1gosnak kell lennie. Ez azt is jelenti, hogy legy\u00e9l k\u00f6vetkezetes a k\u00e9pek kiv\u00e1laszt\u00e1s\u00e1n\u00e1l. \u00c9s persze fogalmazd meg magadnak, hogy milyen \u00fczenetet akarsz k\u00f6zvet\u00edteni az embereknek, vagy mit szeretn\u00e9l, ha megtanuln\u00e1nak t\u0151led.<\/p>\n\n\n\n
3. El\u00e9g sz\u00ednes a k\u00e9p?<\/h4>\n\n\n\n
Ez tal\u00e1n furcs\u00e1nak t\u0171nhet, de a sz\u00ednek \u00e9rz\u00e9seket keltenek<\/strong>. Pr\u00f3b\u00e1lj olyan k\u00e9peket haszn\u00e1lni, melyek \u00e9l\u00e9nkek \u00e9s \u00e9letteliek, hacsak nincs valami k\u00fcl\u00f6nleges oka annak, hogy m\u00e1smilyen fot\u00f3kat haszn\u00e1lj. Az er\u0151s sz\u00ednek vonzz\u00e1k a tekintetet, mozg\u00e1sra k\u00e9nyszer\u00edtik a szemet, \u00e9s nem hagyj\u00e1k unatkozni a l\u00e1togat\u00f3t.<\/p>\n\n\n\n
4. Val\u00f3s\u00e1gosnak n\u00e9z ki?<\/h4>\n\n\n\n
Az emberek nagyon sok id\u0151t t\u00f6ltenek monitorok el\u0151tt munka k\u00f6zben. Ez stockfot\u00f3kon \u00e1ltal\u00e1ban \u00fagy n\u00e9z ki, hogy nagyon vid\u00e1man vigyorognak egy excel-t\u00e1bl\u00e1zatra. Ha azonban k\u00f6r\u00fcln\u00e9zel az irod\u00e1ban, ilyen koll\u00e9g\u00e1t ritk\u00e1n fogsz l\u00e1tni. A stockfot\u00f3kkal ez a baj: gyakran teljesen elrugaszkodnak a val\u00f3s\u00e1gt\u00f3l, \u00fagyhogy ezeket a megold\u00e1sokat ink\u00e1bb ker\u00fcld a k\u00e9pv\u00e1laszt\u00e1sn\u00e1l. Teh\u00e1t, ha valamivel a val\u00f3 \u00e9letben ritk\u00e1n vagy soha nem tal\u00e1lkozol, akkor azt ne mutasd a weboldaladon sem. De a stockfot\u00f3k haszn\u00e1lat\u00e1r\u00f3l hamarosan b\u0151vebben is sz\u00f3 lesz.<\/p>\n\n\n\n
\u00c9s most j\u00f6jjenek a r\u00e9szletek!<\/p>\n\n\n\n
Mire figyelj a fot\u00f3k kiv\u00e1laszt\u00e1s\u00e1n\u00e1l \u00e9s haszn\u00e1lat\u00e1n\u00e1l?<\/h3>\n\n\n\n
Nem minden weboldalnak van sz\u00fcks\u00e9ge k\u00e9p-k\u00f6zpont\u00fa designra<\/h4>\n\n\n\n
Nyilv\u00e1n komoly \u00e9rt\u00e9ke van annak, ha a felhaszn\u00e1l\u00f3k figyelm\u00e9t fel tudod kelteni n\u00e9h\u00e1ny eszt\u00e9tikus k\u00e9ppel, ugyanakkor ez azzal j\u00e1r, hogy m\u00e1s elemeket nehezebb lesz megtal\u00e1lni \u00e9s haszn\u00e1lni az oldalon. Ha t\u00fal nagy figyelem ir\u00e1nyul a k\u00e9pekre, akkor az elt\u00e9r\u00edtheti a felhaszn\u00e1l\u00f3t a tartalmad befogad\u00e1s\u00e1t\u00f3l<\/strong>. Ilyenkor csak a k\u00e9pre figyel, \u00e9s nem veszi \u00e9szre a call to actiont, mely a weboldal l\u00e9nyeg\u00e9t jelenti.<\/p>\n\n\n\n
Hab\u00e1r egy k\u00e9p-k\u00f6zpont\u00fa design adott esetben indokolt is lehet, a legt\u00f6bb weboldaln\u00e1l ink\u00e1bb egy kiegyens\u00falyozott megk\u00f6zel\u00edt\u00e9st \u00e9rdemes k\u00f6vetni<\/strong>. A k\u00e9peknek, melyeket a felhaszn\u00e1l\u00f3i fel\u00fcleten alkalmazol, a term\u00e9ket vagy szolg\u00e1ltat\u00e1sokat kell t\u00e1mogatnia. De semmik\u00e9ppen sem szabad t\u00falragyognia \u00e9s elhom\u00e1lyos\u00edtania fontos tartalmakat vagy funkci\u00f3kat.<\/p>\n\n\n\n
Legyen c\u00e9lja \u00e9s megfelel\u0151 mondanival\u00f3ja a k\u00e9peknek!<\/h4>\n\n\n\n
Sok weboldalon csak az\u00e9rt szerepelnek k\u00e9pek, hogy kit\u00f6lts\u00e9k a helyet, \u00e9s rosszabb esetben m\u00e9g \u00f6ssze is zavarj\u00e1k a l\u00e1togat\u00f3kat. A k\u00e9pek az\u00e9rt vannak, hogy vagy egy t\u00f6rt\u00e9netet mes\u00e9lj el vel\u00fck, vagy leegyszer\u0171s\u00edtsd a mondanival\u00f3d<\/strong>. \u00dagyhogy ne er\u0151ltesd bele a k\u00e9peket a tartalmaidba<\/p>\n\n\n\n
Minden k\u00e9pben van egy t\u00f6rt\u00e9net, amit elmes\u00e9l a l\u00e1togat\u00f3knak. Csak\u00fagy, mint az \u00edrott sz\u00f6vegn\u00e9l, j\u00f3 ha tudod m\u00e1r az indul\u00e1s el\u0151tt, hogy mit akarsz elmondani vele<\/strong>. A k\u00e9pekkel inspir\u00e1lhatod \u00e9s elk\u00f6telezheted a k\u00f6z\u00f6ns\u00e9gedet, de nem minden k\u00e9p jav\u00edtja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt<\/strong>.<\/p>\n\n\n\n
A usability tesztek azt mutatj\u00e1k, hogy a puszt\u00e1n dekor\u00e1ci\u00f3s c\u00e9llal felhaszn\u00e1lt k\u00e9pek ritk\u00e1n adnak \u00e9rt\u00e9ket a designhoz<\/strong>. Ink\u00e1bb csak rontj\u00e1k, mint jav\u00edtj\u00e1k a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Az emberek \u00e1ltal\u00e1ban \u00e1tsiklanak rajtuk, vagy rosszabb esetben frusztr\u00e1lja \u0151ket a l\u00e1tv\u00e1ny.<\/p>\n\n\n\n
A legvesz\u00e9lyesebb dolog minden design eset\u00e9ben, amikor a k\u00e9pek rossz \u00fczenetet k\u00f6zvet\u00edtenek<\/strong>. Ez\u00e9rt mindig meg kell gy\u0151z\u0151dn\u00f6d arr\u00f3l, hogy a k\u00e9pek illeszkednek az \u00edrott tartalomhoz. Olyan k\u00e9peket kell v\u00e1lasztanod a weboldaladra, melyek szoros kapcsolatban \u00e1llnak a term\u00e9keddel \u00e9s illeszkednek a kontextusba is<\/strong>.<\/p>\n\n\n\n
A k\u00e9pek nem teremthetnek vizu\u00e1lis zajt!<\/h4>\n\n\n\n
A k\u00e9pek eset\u00e9n nem igaz az az elv, hogy a t\u00f6bb jobb. M\u00e1r ha a weboldaladnak nem kifejezetten az a c\u00e9lja, hogy k\u00e9peket mutass be rajta. A k\u00e9peid val\u00f3sz\u00edn\u0171leg azt a c\u00e9lt szolg\u00e1lj\u00e1k, hogy a term\u00e9keid, szolg\u00e1ltat\u00e1said megismertesd a l\u00e1togat\u00f3kkal<\/strong>. Ehhez viszont elegend\u0151 n\u00e9h\u00e1ny k\u00e9p, nem kell t\u00fal sok. Azok viszont olyanok legyenek, hogy val\u00f3ban megragadj\u00e1k a l\u00e1togat\u00f3k figyelm\u00e9t.<\/p>\n\n\n\n
Mindig, amikor egy k\u00e9pet teszel a weboldaladra, tedd fel magadnak a k\u00e9rd\u00e9st, hogy az adott k\u00e9p illik-e a weboldalad eszt\u00e9tik\u00e1j\u00e1hoz<\/strong>. Teh\u00e1t p\u00e9ld\u00e1ul, ha a weboldalad eleg\u00e1ns, kifinomult, nagy whitespace-eket haszn\u00e1lsz, akkor a k\u00e9pid is legyenek nagyok, melyek a teljes kijelz\u0151t elfoglalj\u00e1k.<\/p>\n\n\n\n
Mindig azonos m\u00e9ret\u0171 \u00e9s st\u00edlus\u00fa k\u00e9peket haszn\u00e1lj!<\/h4>\n\n\n\n
A weboldalad sokkal jobban fog kin\u00e9zni, ha k\u00f6vetkezetes vagy a k\u00e9phaszn\u00e1latn\u00e1l. Ez a m\u00e9retet, az azonos k\u00e9par\u00e1nyokat \u00e9s a st\u00edlust is jelenti. Ez seg\u00edt abban is, hogy a sz\u00f6veget megfelel\u0151en form\u00e1zd.<\/p>\n\n\n\n
Figyelj a reszponzivit\u00e1sra!<\/h4>\n\n\n\n
Gy\u0151z\u0151dj meg arr\u00f3l, hogy a k\u00e9pek, amiket a weboldaladon haszn\u00e1lsz, minden kijelz\u0151m\u00e9reten j\u00f3l jelennek meg. Teszteld \u0151ket k\u00fcl\u00f6nf\u00e9le felbont\u00e1sokn\u00e1l, k\u00e9par\u00e1nyokn\u00e1l \u00e9s eszk\u00f6z\u00f6n!<\/p>\n\n\n\n
A k\u00e9pek soha nem t\u0171nhetnek pixelesnek!<\/li>
Soha ne n\u00f6veld \u0151ket 100%-n\u00e1l nagyobbra!<\/li>
Mindig az eredeti ar\u00e1nyokkal jelen\u00edtsd meg \u0151ket!<\/li><\/ul>\n\n\n\n
Reszponz\u00edv weboldalakn\u00e1l gyakori probl\u00e9ma a megfelel\u0151 k\u00e9pm\u00e9ret kiv\u00e1laszt\u00e1sa, mely a legjobban illeszkedik minden eszk\u00f6z kijelz\u0151j\u00e9hez. Egyetlen k\u00e9p n\u00e9ha nem elegend\u0151 ahhoz, hogy minden k\u00e9perny\u0151felbont\u00e1st \u00e9s eszk\u00f6zt kiszolg\u00e1ljon.<\/p>\n\n\n\n
De hogyan v\u00e1laszd ki az optim\u00e1lis reszponz\u00edv k\u00e9pm\u00e9retet? Akadnak olyan online eszk\u00f6z\u00f6k is a neten, melyek seg\u00edts\u00e9g\u00e9vel k\u00fcl\u00f6nf\u00e9le k\u00e9pm\u00e9reteket tudsz kezelni. Ilyen p\u00e9ld\u00e1ul a Cloudinary<\/a>, mely k\u00e9pes arra, hogy reszponz\u00edv t\u00f6r\u00e9spontokat hozz l\u00e9tre a seg\u00edts\u00e9g\u00e9vel. Ez az eszk\u00f6z egy fejlett algoritmust haszn\u00e1l, \u00edgy k\u00f6nnyen meghat\u00e1rozza a megfelel\u0151 t\u00f6r\u00e9spontokat minden felt\u00f6lt\u00f6tt k\u00e9p eset\u00e9ben. A k\u00e9peket elemzi, hogy megtal\u00e1lja ezeket, majd mindegyik felbont\u00e1sra k\u00e9sz\u00edt egy k\u00e9pet.<\/p>\n\n\n\n
A teljes\u00edtm\u00e9ny<\/h4>\n\n\n\n
Amikor k\u00e9pekben gondolkodunk, akkor \u00e1ltal\u00e1ban \u00fagy gondoljuk, hogy azok jav\u00edtani fogj\u00e1k a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Pedig a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nynek a weboldalsebess\u00e9g is a r\u00e9sze. M\u00e1rpedig egy k\u00e9pnek m\u00e9rete van, \u00e9s minden egyes k\u00e9ppel lassul a weboldal<\/strong>. Teh\u00e1t hi\u00e1ba haszn\u00e1lsz leny\u0171g\u00f6z\u0151 k\u00e9peket, melyek megfogj\u00e1k a felhaszn\u00e1l\u00f3kat, ha azok meg sem v\u00e1rj\u00e1k, hogy bet\u00f6lt\u0151djenek.<\/p>\n\n\n\n
A weboldalsebess\u00e9g fontoss\u00e1g\u00e1r\u00f3l \u00edrtunk m\u00e1r egy nagyon r\u00e9szletes anyagot<\/a>, \u00fagyhogy erre nem t\u00e9r\u00fcnk ki. A l\u00e9nyeg, hogy ha sok k\u00e9pet haszn\u00e1lsz, akkor optimaliz\u00e1lnod kell a sebess\u00e9get<\/strong>, amire a linkelt posztban tal\u00e1lsz \u00f6tleteket. Ezek k\u00f6z\u00fcl itt csak n\u00e9h\u00e1nyat emel\u00fcnk ki:<\/p>\n\n\n\n
CSS sprite haszn\u00e1lata<\/h5>\n\n\n\n
Sok k\u00e9p bet\u00f6lt\u00e9se rendk\u00edv\u00fcl sok id\u0151t \u00e9s er\u0151forr\u00e1st vesz ig\u00e9nybe. Sokkal gyorsabb egyetlen k\u00e9p bet\u00f6lt\u00e9se, \u00e9s komponenseinek megjelen\u00edt\u00e9se, mivel cs\u00f6kkenti a szerverlek\u00e9r\u00e9sek sz\u00e1m\u00e1t. CSS sprite-ok haszn\u00e1lat\u00e1val a b\u00f6ng\u00e9sz\u0151 csak egy k\u00e9pet t\u00f6lt be.<\/p>\n\n\n\n
Lazy loading<\/h5>\n\n\n\n
A l\u00e9nyeg itt az, hogy egy k\u00e9p csak akkor jelenjen meg, ha a felhaszn\u00e1l\u00f3 el\u00e9r hozz\u00e1 a b\u00f6ng\u00e9sz\u0151ben, ahelyett, hogy az oldal megjelen\u00e9s\u00e9re kelljen v\u00e1rnia a be nem t\u00f6lt\u00f6tt k\u00e9pek miatt.<\/p>\n\n\n\n
Skeleton screen<\/h5>\n\n\n\n
Ez az a megold\u00e1s, amikor a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra m\u00e9g azel\u0151tt megjelen\u00edted a weboldalad skeleton verzi\u00f3j\u00e1t, hogy a k\u00e9pek bet\u00f6lt\u00e9sre ker\u00fcln\u00e9nek. Ilyenkor m\u00e1r l\u00e1tj\u00e1k, hogy mire sz\u00e1m\u00edthatnak, r\u00e1ad\u00e1sul adott esetben k\u00e9pek n\u00e9lk\u00fcl is interakci\u00f3ba l\u00e9phetnek az oldallal.<\/p>\n\n\n\n
Ne feledd: a k\u00e9p a design r\u00e9sze!<\/h4>\n\n\n\n
Hab\u00e1r ez nyilv\u00e1nval\u00f3nak t\u0171nik, a gyakorlatban m\u00e9gsem az. A k\u00e9pek a webdesign integr\u00e1ns r\u00e9sz\u00e9t k\u00e9pezik, \u00e9s ek\u00e9ppen kell is figyelembe venni \u0151ket. Mivel a designnak c\u00e9lja van, az\u00e9rt a k\u00e9peknek ugyanennek a c\u00e9lnak az el\u00e9r\u00e9s\u00e9t kell t\u00e1mogatniuk.<\/p>\n\n\n\n
Hab\u00e1r a k\u00e9pekre nagyban \u00e9p\u00edt\u0151 weboldalak \u00e1ltal\u00e1ban jobban teljes\u00edtenek, ahhoz, hogy ez val\u00f3ban \u00edgy t\u00f6rt\u00e9njen, figyelembe kell venni n\u00e9h\u00e1ny haszn\u00e1lhat\u00f3s\u00e1gi elvet. P\u00e9ld\u00e1ul a vizu\u00e1lis hierarchi\u00e1nak megfelel\u0151en kell elrendezni a k\u00e9peket, \u00edgy az els\u0151dleges \u00e9s a m\u00e1sodlagos elemeknek elt\u00e9r\u0151 s\u00falyt adni.<\/p>\n\n\n\n
Hangold \u00f6ssze a k\u00e9pet a sz\u00f6veggel!<\/h4>\n\n\n\n
Amikor egy\u00fctt jelenik meg egy oldalon a k\u00e9p \u00e9s a sz\u00f6veg, akkor azok \u00f6sszhangj\u00e1ra figyelni kell. Meg kell tal\u00e1lni a megfelel\u0151 egyens\u00falyt a kett\u0151 k\u00f6z\u00f6tt. Erre p\u00e9ld\u00e1ul j\u00f3 megold\u00e1s lehet, ha a k\u00e9pet h\u00e1tt\u00e9rk\u00e9nt – egy overlayt r\u00e1helyezve – jelen\u00edted meg a sz\u00f6veg m\u00f6g\u00f6tt. <\/p>\n\n\n\n
De m\u00e1s megold\u00e1sok is lehets\u00e9gesek, p\u00e9ld\u00e1ul, ha a maga k\u00e9p tartalmazza a sz\u00f6veget, ami persze SEO-szempontb\u00f3l nem a legjobb megold\u00e1s. Vagy egy\u00e9b kreat\u00edv megold\u00e1sokat alkalmazol a megjelen\u00edt\u00e9sre, ahogy p\u00e9ld\u00e1ul ezen az oldalon<\/a> is tett\u00e9k a designerek.<\/p>\n\n\n\n
A megfelel\u0151 layout<\/h4>\n\n\n\n
A felhaszn\u00e1l\u00f3 \u00e9lm\u00e9nyt nagym\u00e9rt\u00e9kben meghat\u00e1rozza a weboldal elrendez\u00e9se. \u00c1ltal\u00e1ban a sok k\u00e9pet tartalmaz\u00f3 oldalak r\u00e1csszerkezetet haszn\u00e1lnak, mivel ez egy probl\u00e9mamentes megold\u00e1s, ha a megjelen\u00edt\u00e9s\u00fckr\u0151l van sz\u00f3. A r\u00e1csnak persze t\u00f6bb t\u00edpusa is van.<\/p>\n\n\n\n
Alkalmazhatod a klasszikus r\u00e1csot, amelyben n\u00e9gyzet alak\u00fa k\u00e9pek kapnak helyet. \u00d6nmag\u00e1ban harm\u00f3nia \u00e9s egyens\u00faly \u00e9rzet\u00e9t kelti, \u00e9s olyankor lehet haszn\u00e1lni, amikor a k\u00e9peknek nem feladata, hogy vezess\u00e9k a l\u00e1togat\u00f3t.<\/p>\n\n\n\n
Rendezetlenebb\u00e9 is teheted a r\u00e1csot, elszakadva a konvencion\u00e1lis megold\u00e1st\u00f3l. Egy ilyen megold\u00e1s seg\u00edts\u00e9g\u00e9vel m\u00e1r ir\u00e1ny\u00edthatod a felhaszn\u00e1l\u00f3 tekintet\u00e9t, \u00e9s kiemelhetsz bizonyos tartalmi r\u00e9szeket.<\/p>\n\n\n\n
$\"K\u00e9pek$ <\/figure><\/div>\n\n\n\n
A r\u00e1csban szerepelhetnek ak\u00e1r elt\u00e9r\u0151 m\u00e9ret\u0171 k\u00e9pek is, mik\u00f6zben az eg\u00e9sz tov\u00e1bbra is a rendezetts\u00e9g \u00e9rzet\u00e9t kelti. Erre akkor lehet sz\u00fcks\u00e9g, ha \u00fagy akarsz sok k\u00e9pet megjelen\u00edteni, hogy nem ragaszkodsz egy bizonyos oldalar\u00e1nyhoz.<\/p>\n\n\n\n
Adj hozz\u00e1 mozg\u00e1st!<\/h4>\n\n\n\n
A mozg\u00e1s sokat dobhat egy k\u00e9pekkel telet\u0171zdelt weboldal megjelen\u00e9s\u00e9n. De csak\u00fagy, mint a sz\u00f6vegekn\u00e9l: a mozg\u00e1snak \u00e9s a k\u00e9peknek \u00f6sszhangba kell ker\u00fclni\u00fck. A mozg\u00e1s seg\u00edthet p\u00e9ld\u00e1ul abban, hogy egy k\u00e9pre ir\u00e1ny\u00edtsa a felhaszn\u00e1l\u00f3 figyelm\u00e9t, amikor az f\u00f6l\u00e9 mozgatja az eg\u00e9rmutat\u00f3t. Erre olyankor val\u00f3ban sz\u00fcks\u00e9g lehet, ha sok a k\u00e9p az oldalon, \u00edgy egyik sem emelkedik ki.<\/p>\n\n\n\n
De a weboldal lefel\u00e9 g\u00f6rget\u00e9sn\u00e9l is megoldhat\u00f3, hogy ne csak \u00fagy ott legyenek az oldalon a k\u00e9pek, hanem valamilyen mozg\u00e1ssal t\u0171njenek fel, \u00edgy m\u00e9g ink\u00e1bb felkeltik a figyelmet. V\u00e9g\u00fcl pedig, ha valahol k\u00e9p helyett tudsz vide\u00f3t is haszn\u00e1lni, akkor tedd azt!<\/p>\n\n\n\n
Ha lehet, eredeti k\u00e9peket haszn\u00e1lj!<\/h4>\n\n\n\n
Ha eredeti k\u00e9pet haszn\u00e1lsz a weboldaladon, akkor javul a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny, \u00e9s n\u00f6veled az es\u00e9ly\u00e9t annak, hogy a keres\u00e9sekre jobb helyez\u00e9st \u00e9rj el. Az eredeti k\u00e9pekre az emberek jobban felfigyelnek<\/strong>, mint a stockfot\u00f3kra. Hab\u00e1r stockfot\u00f3kat is haszn\u00e1lhatsz j\u00f3l a weboldaladon, az k\u00e9ts\u00e9gtelen, hogy SEO szempontb\u00f3l az ut\u00f3bbi nem optim\u00e1lis v\u00e1laszt\u00e1s, \u00e9s nem ugyanazt a hat\u00e1st \u00e9red el vel\u00fck. Az emberek tucatnyi vagy ak\u00e1r t\u00f6bb sz\u00e1z oldalon is tal\u00e1lkozhatnak ugyanazzal a k\u00e9ppel, mint amit Te haszn\u00e1lsz.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
SEO szempontb\u00f3l az is fontos, hogy megfelel\u0151 f\u00e1jlnevet adj a k\u00e9peidnek. A Google ugyanis m\u00e9g nem n\u00e9zi meg, hogy mi van a k\u00e9peiden, amikor felt\u00e9rk\u00e9pezi azt. A hozz\u00e1 kapcsol\u00f3d\u00f3 sz\u00f6vegekb\u0151l tud kiindulni. A f\u00e1jln\u00e9v inform\u00e1ci\u00f3t ny\u00fajt sz\u00e1m\u00e1ra arr\u00f3l, hogy mi tal\u00e1lhat\u00f3 a k\u00e9pen. A f\u00e1jln\u00e9v a k\u00e9p URL-j\u00e9ben is megjelenik, ez\u00e9rt mindig kisbet\u0171vel c\u00e9lszer\u0171 \u00edrni, \u00e9s k\u00f6t\u0151jelet hagyni az egyes szavak k\u00f6z\u00f6tt.<\/p>\n\n\n\n
Ugyan\u00edgy fontos a k\u00e9pal\u00e1\u00edr\u00e1s \u00e9s az alt text is. Ut\u00f3bbi persze nem l\u00e1that\u00f3 az \u00e1tlagos felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1r, ugyanakkor a keres\u0151motorok sz\u00e1m\u00e1ra inform\u00e1ci\u00f3t hordoz. Ha a k\u00e9peden van felirat, akkor az alt text ugyanaz lehet.<\/p>\n\n\n\n
T\u00f6bbf\u00e9le vizu\u00e1lis megold\u00e1st haszn\u00e1lj!<\/h4>\n\n\n\n
Az illusztr\u00e1ci\u00f3knak \u00e9s a fot\u00f3knak is helye van egy-egy term\u00e9k weboldal\u00e1n. Egy fot\u00f3 ide\u00e1lis eszk\u00f6z specifikus dolgok vagy t\u00f6rt\u00e9netek bemutat\u00e1s\u00e1ra. Teh\u00e1t amikor nem valamilyen aut\u00f3t kell mutatnunk, hanem egy adott aut\u00f3t.<\/p>\n\n\n\n
Az illusztr\u00e1ci\u00f3k viszont kiv\u00e1l\u00f3ak arra, hogy \u00e1ltal\u00e1nos dolgokat fejezzenek ki, melyekn\u00e9l egy fot\u00f3 esetleg elidegen\u00edt\u0151en hathat. Ezek teh\u00e1t akkor seg\u00edtik a meg\u00e9rt\u00e9st, amikor nincs sz\u00fcks\u00e9g valaminek az egzakt megjelen\u00edt\u00e9s\u00e9re.<\/p>\n\n\n\n
Legyen egy f\u00f3kuszpontod!<\/h4>\n\n\n\n
A k\u00e9pek olyan vizu\u00e1lis kommunik\u00e1ci\u00f3s eszk\u00f6zt adnak a kezedbe, mellyel k\u00f6zvet\u00edtheted az \u00fczeneteidet. Egy\u00e9rtelm\u0171 f\u00f3kusz seg\u00edts\u00e9g\u00e9vel k\u00f6nnyen \u00e9s gyorsan k\u00f6z\u00f6lheted a gondolataidat, m\u00edg hom\u00e1lyos f\u00f3kusszal a k\u00e9p jelent\u00e9s n\u00e9lk\u00fcliv\u00e9 v\u00e1lik.<\/p>\n\n\n\n
Amikor f\u00f3kuszr\u00f3l besz\u00e9l\u00fcnk, egyszer\u0171en arr\u00f3l van sz\u00f3, hogy egy bizonyos dologra ir\u00e1nyul a figyelem a fot\u00f3n. Ez a dolog ker\u00fcl a k\u00e9p k\u00f6z\u00e9ppontj\u00e1ba, \u00edgy tiszt\u00e1n \u00e9rthet\u0151v\u00e9 \u00e9s befogadhat\u00f3v\u00e1 v\u00e1lik az \u00fczenet<\/strong>. El kell ker\u00fcln\u00f6d azt a hib\u00e1t, hogy az embereknek tal\u00e1lgatniuk kelljen a k\u00e9p jelent\u00e9s\u00e9t!<\/p>\n\n\n\n
$\"katicabogar\"$ <\/figure><\/div>\n\n\n\n
Jav\u00edts\u00e1k a k\u00e9pek a konverzi\u00f3t<\/h4>\n\n\n\n
A term\u00e9keket sokszor a k\u00e9pek adj\u00e1k el. Az emberek nagym\u00e9rt\u00e9kben t\u00e1maszkodnak a k\u00e9pekre, amikor ismerkednek egy term\u00e9kkel, \u00e9s fontolgatj\u00e1k annak megv\u00e1s\u00e1rl\u00e1s\u00e1t. Ez\u00e9rt a web\u00e1ruh\u00e1zak legfontosabb elem\u00e9t a term\u00e9kekr\u0151l k\u00e9sz\u00fclt k\u00e9pek jelentik. Min\u00e9l vonz\u00f3bb az emberek sz\u00e1m\u00e1ra a term\u00e9ked megjelen\u00e9se, ann\u00e1l b\u00e1trabban v\u00e1gnak bele a megv\u00e1s\u00e1rl\u00e1s\u00e1ba. Ami persze neked jobb konverzi\u00f3s ar\u00e1nyokat hoz.<\/p>\n\n\n\n
A term\u00e9kk\u00e9peknek<\/strong> ez\u00e9rt sz\u00e9pnek kell lenni\u00fck<\/strong>. Egy j\u00f3 k\u00e9p elv\u00e9gzi a munk\u00e1t: felkelti a felhaszn\u00e1l\u00f3 figyelm\u00e9t, \u00e9s megk\u00fcl\u00f6nb\u00f6zteti a term\u00e9ked a t\u00f6bbit\u0151l. Ugyanakkor az ilyen k\u00e9pek elk\u00e9sz\u00edt\u00e9se munkaig\u00e9nyes feladat.<\/p>\n\n\n\n
Ami m\u00e9g fontos, hogy az els\u0151dleges k\u00e9ped a hajt\u00e1s felett jelenjen meg<\/strong>. Ne kelljen az embereknek g\u00f6rgetni\u00fck az\u00e9rt, hogy l\u00e1ssanak egy k\u00e9pet a term\u00e9kr\u0151l. L\u00e9nyeges m\u00e9g, hogy a k\u00e9p nagy legyen<\/strong>, olyan nagy, amekkora csak lehets\u00e9ges. Ha pedig m\u00e1r el\u00e9rted a maxim\u00e1lis m\u00e9retet, lehet\u0151v\u00e9 kell tenned, hogy az emberek r\u00e1zoomolhassanak<\/strong> az \u0151ket \u00e9rdekl\u0151 r\u00e9szletekre. Ez k\u00fcl\u00f6n\u00f6sen fontos p\u00e9ld\u00e1ul ruh\u00e1zati term\u00e9kekn\u00e9l, ahol sokat sz\u00e1m\u00edtanak a r\u00e9szletek. Term\u00e9szetesen a zoomolt r\u00e9szleteknek is kiv\u00e1l\u00f3 min\u0151s\u00e9g\u0171nek kell lenni\u00fck.<\/p>\n\n\n\n
Fejezz\u00e9k ki a szem\u00e9lyis\u00e9ged, \u00e9s v\u00e1lts ki vel\u00fck \u00e9rzelmeket!<\/h4>\n\n\n\n
A k\u00e9peknek meg kell ragadniuk a term\u00e9k vagy szolg\u00e1ltat\u00e1s l\u00e9nyeg\u00e9t, ugyanakkor meg is kell lepni\u00fck \u00e9s gy\u00f6ny\u00f6rk\u00f6dtetni\u00fck kell az embereket. A fot\u00f3k k\u00e9pesek arra, hogy legal\u00e1bb annyira sz\u00f3rakoztassanak, mint amilyen m\u00e9rt\u00e9kben inform\u00e1lnak.<\/p>\n\n\n\n
Ha m\u00e1r van egy kiel\u00e9g\u00edt\u0151 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyed, akkor a j\u00f3 k\u00e9pekkel \u00e9rzelmi kapcsolatot alak\u00edthatsz ki<\/strong> a felhaszn\u00e1l\u00f3iddal. Az \u00e9rzelmileg er\u0151teljes k\u00e9pek biztos\u00edtj\u00e1k azt, hogy az emberek m\u00e9lyebben is \u00e9rdekl\u0151djenek majd a weboldalad ir\u00e1nt.<\/p>\n\n\n\n
Haszn\u00e1ld a megfelel\u0151 f\u00e1jlt\u00edpust!<\/h4>\n\n\n\n
Mindig legy\u00e9l tiszt\u00e1ban azzal, hogy milyen k\u00e9pf\u00e1jl-t\u00edpust haszn\u00e1lsz! \u00c1ltal\u00e1ban a JPEG vagy JPG k\u00edn\u00e1lja a legjobb megold\u00e1st, amikor j\u00f3 min\u0151s\u00e9g\u0171, de kis m\u00e9ret\u0171<\/strong> k\u00e9pekre van sz\u00fcks\u00e9ged. Ut\u00f3bbi f\u0151leg a weboldalsebess\u00e9g miatt fontos<\/a>. A JPEG-k\u00e9pek jellemz\u0151en olyan fot\u00f3k, melyeken sok sz\u00edn, \u00e1rnyalat, \u00e1rny\u00e9k tal\u00e1lhat\u00f3. A fot\u00f3kat tudod hat\u00e9konyan t\u00f6m\u00f6r\u00edteni JPEG-gel, ugyanakkor t\u00e9ny, hogy a t\u00f6m\u00f6r\u00edt\u00e9s min\u0151s\u00e9groml\u00e1ssal j\u00e1r, hiszen az adatok egy r\u00e9sze elveszik. Emellett \u00e1tl\u00e1tsz\u00f3 h\u00e1tteret sem haszn\u00e1lhatsz, mint p\u00e9ld\u00e1ul a PNG-n\u00e9l.<\/p>\n\n\n\n
A PNG-t \u00e1ltal\u00e1ban akkor szerencs\u00e9s haszn\u00e1lni, amikor a k\u00e9peden kev\u00e9s a sz\u00edn, az \u00e1rnyalat. Tipikusan ilyenek a log\u00f3k, illetve a k\u00fcl\u00f6nb\u00f6z\u0151 grafik\u00e1k, illusztr\u00e1ci\u00f3k<\/strong>. Sokkal jobb min\u0151s\u00e9g \u00e9rhet\u0151 el PNG-vel, mint JPG-vel, \u00e9s ha nem fot\u00f3r\u00f3l van sz\u00f3, akkor a m\u00e9ret is kisebb lehet. A PNG-f\u00e1jlokat tudod kicsiny\u00edteni, nagy\u00edtani an\u00e9lk\u00fcl, hogy az b\u00e1rmif\u00e9le min\u0151s\u00e9groml\u00e1ssal j\u00e1rna. C\u00e9lszer\u0171 24 bites PNG-t haszn\u00e1lni a 8 bites helyett, mert t\u00f6bb sz\u00ednt jelen\u00edt meg, \u00e9s jobb a min\u0151s\u00e9ge.<\/p>\n\n\n\n
Dilemm\u00e1d els\u0151sorban akkor lehet a v\u00e1laszt\u00e1sn\u00e1l, ha a fot\u00f3don sz\u00f6veg is tal\u00e1lhat\u00f3. \u00c1ltal\u00e1ban akkor \u00e9rdemes JPEG-et v\u00e1lasztani, ha a k\u00e9ped nagyobb r\u00e9sz\u00e9t teszi ki a fot\u00f3. Ford\u00edtott esetben v\u00e1laszd a PNG-t. Egy PNG f\u00e1jlt b\u00e1rmikor \u00e1talak\u00edthatsz JPG-v\u00e9, azonban visszafel\u00e9 m\u00e1r nem m\u0171k\u00f6dik, illetve technikailag kivitelezhet\u0151, csak nincs \u00e9rtelme, mert a min\u0151s\u00e9g nem fog javulni, csak nagyobb lesz a f\u00e1jlm\u00e9ret.<\/p>\n\n\n\n
Tal\u00e1ld meg a helyes egyens\u00falyt a min\u0151s\u00e9g \u00e9s a f\u00e1jlm\u00e9ret k\u00f6z\u00f6tt!<\/h4>\n\n\n\nMin\u00e9l nagyobb felbont\u00e1s\u00fa a k\u00e9ped, ann\u00e1l szebb, hiszen ann\u00e1l jobb a min\u0151s\u00e9ge. Ez ugyanakkor a f\u00e1jlm\u00e9ret n\u00f6veked\u00e9s\u00e9vel j\u00e1r, ami lass\u00edtja az oldalad bet\u00f6lt\u0151d\u00e9s\u00e9t<\/a>. A weboldalakn\u00e1l a legnagyobb m\u00e9rt\u00e9kben a k\u00e9pek a felel\u0151sek a lass\u00fa bet\u00f6lt\u0151d\u00e9s\u00e9rt<\/strong>. Ha gyors\u00edtani kell a weboldaladat, akkor mindig az els\u0151 legyen, hogy a k\u00e9pek f\u00e1jlm\u00e9ret\u00e9t cs\u00f6kkented! A weben tal\u00e1lsz olyan online eszk\u00f6z\u00f6ket, melyek viszonylag vesztes\u00e9gmentes m\u00f3don k\u00e9pesek t\u00f6m\u00f6r\u00edteni a k\u00e9pf\u00e1jljaidat.<\/p>\n\n\n\n
Figyelj arra, hogy a felhaszn\u00e1lt k\u00e9p kiterjed\u00e9se ne legyen nagyobb, mint az \u00e9ppen sz\u00fcks\u00e9ges sz\u00e9less\u00e9g, mert ez\u00e1ltal feleslegesen nagy a m\u00e9rete. Ez\u00e9rt a f\u00e1jlt\u00edpuson \u00e9s a t\u00f6m\u00f6r\u00edt\u00e9s m\u00e9rt\u00e9k\u00e9n k\u00edv\u00fcl mindig v\u00e1gd meg a k\u00e9ped a megfelel\u0151 sz\u00e9less\u00e9gre \u00e9s magass\u00e1gra. Azt se felejtsd el, hogy a kijelz\u0151k \u00e1ltal\u00e1ban csak 72dpi felbont\u00e1s\u00fa k\u00e9pet tudnak megjelen\u00edteni, \u00edgy enn\u00e9l nagyobb felbont\u00e1s felesleges, csak a m\u00e9rete n\u0151 a k\u00e9pnek. V\u00e9g\u00fcl pedig: soha ne haszn\u00e1lj nagym\u00e9ret\u0171, de alacsony min\u0151s\u00e9g\u0171 k\u00e9pet, mert az pixelesnek \u00e9s hom\u00e1lyosnak fog l\u00e1tszani!<\/p>\n\n\n\n
N\u00e9h\u00e1ny \u00f6k\u00f6lszab\u00e1ly:<\/p>\n\n\n\n
A teljes-kijelz\u0151s h\u00e1tt\u00e9rk\u00e9pek \u00e9s nagym\u00e9ret\u0171 k\u00e9pek m\u00e9rete se haladja meg az 1MB-t. Ha 1MB-n\u00e1l nagyobb a fot\u00f3d, akkor m\u00e9retezd \u00e1t.<\/li>
Minden m\u00e1s k\u00e9pnek legal\u00e1bb 300KB alatt kellene maradnia, de lehet sokkal kisebb is.<\/li>
Ha teljes-kijelz\u0151s h\u00e1tt\u00e9rk\u00e9pet haszn\u00e1lsz (amir\u0151l hamarosan sz\u00f3 lesz a bejegyz\u00e9sben), akkor t\u00f6lts fel egy 2000 px sz\u00e9less\u00e9g\u0171 k\u00e9pet.<\/li>
Ha van lehet\u0151s\u00e9ged az \u00e1ltalad haszn\u00e1ld grafika programban, hogy webre optimaliz\u00e1lt min\u0151s\u00e9gben mentsd el a k\u00e9pet (save for web), akkor mindig haszn\u00e1ld ki.<\/li>
Haszn\u00e1lhatsz olyan webes szoftvereket, mint a TinyPNG \u00e9s t\u00e1rsai. Ezekb\u0151l el\u00e9g sokat tal\u00e1lsz ma m\u00e1r, \u00e9s hab\u00e1r nem egyforma hat\u00e9konys\u00e1ggal teszik a dolgukat, mindegyik hat\u00e9konyan k\u00e9pes cs\u00f6kkenteni a fot\u00f3d m\u00e9ret\u00e9t.<\/li><\/ul>\n\n\n\n
Haszn\u00e1lj k\u00e9pal\u00e1\u00edr\u00e1st \u00e9s alt textet!<\/h4>\n\n\n\n
A k\u00e9pek sz\u00f6veges inform\u00e1ci\u00f3kkal val\u00f3 kieg\u00e9sz\u00edt\u00e9se r\u00e9v\u00e9n tudod keres\u0151optimaliz\u00e1lni \u0151ket. Ez persze els\u0151sorban az eredeti k\u00e9pekn\u00e9l fontos, nem a stockfot\u00f3kn\u00e1l. Egy k\u00e9pal\u00e1\u00edr\u00e1s az embereknek is seg\u00edthet a k\u00e9p jobb meg\u00e9rt\u00e9s\u00e9ben<\/strong>, nagyobb es\u00e9llyel olvass\u00e1k el<\/a> a k\u00e9pal\u00e1\u00edr\u00e1st, mint a keny\u00e9rsz\u00f6vegedet. Ugyanakkor persze az is igaz, hogy felesleges er\u0151ltetni a k\u00e9pal\u00e1\u00edr\u00e1sokat ott, ahol nincs sz\u00fcks\u00e9g r\u00e1juk.<\/p>\n\n\n\n
Az alt textek a k\u00e9pek sz\u00f6veges megfelel\u0151i, ha a b\u00f6ng\u00e9sz\u0151 nem jelen\u00edti meg a k\u00e9pet. Az alt text l\u00e9nyege, hogy le\u00edrja a k\u00e9p tartalm\u00e1t<\/strong>. SEO-szempontb\u00f3l fontos, mivel hasznos inform\u00e1ci\u00f3kat ad a keres\u0151motoroknak, melyek ezeket az inform\u00e1ci\u00f3kat is felhaszn\u00e1lj\u00e1k, amikor k\u00e9peket kell megjelen\u00edteni\u00fck az egyes keres\u00e9sekre.<\/p>\n\n\n\n
A k\u00e9phez kapcsol\u00f3d\u00f3 sz\u00f6vegek k\u00f6z\u00e9 tartozik m\u00e9g a megfelel\u0151 f\u00e1jln\u00e9v is<\/strong>, hiszen ez is sz\u00f6veges inform\u00e1ci\u00f3. SEO szempontb\u00f3l term\u00e9szetesen a kulcsszavakat magukba foglal\u00f3 k\u00e9pek jelentik az optim\u00e1lis v\u00e1laszt\u00e1st. Az eredeti f\u00e1jlneveket gyakran \u00e1t kell forgalmaznod oly m\u00f3don, hogy az a lehet\u0151 legjobban le\u00edrja azt, ami a k\u00e9pen l\u00e1that\u00f3. Ez seg\u00edt a keres\u0151motoroknak meg\u00e9rteni a k\u00e9peidet. Ugyanakkor persze f\u00e1jlnevekr\u0151l van sz\u00f3, teh\u00e1t t\u00fal hossz\u00fara ne ny\u00faljanak.<\/p>\n\n\n\n
Ne feledkezz meg a felhaszn\u00e1l\u00e1si jogokr\u00f3l!<\/h4>\n\n\n\n
Amikor k\u00e9peket keresel a neten, azt mindig vedd figyelembe, hogy azoknak jogtulajdonosaik vannak. Ha csak nem adnak kifejezett enged\u00e9lyt a k\u00e9pek haszn\u00e1lat\u00e1ra – illetve jelzik a haszn\u00e1lat korl\u00e1tait -, nem haszn\u00e1lhatod fel a k\u00e9peiket k\u00f6vetkezm\u00e9nyek n\u00e9lk\u00fcl<\/strong>.<\/p>\n\n\n\n
A weben egy\u00e9bk\u00e9nt sz\u00e1mtalan olyan oldalt tal\u00e1lsz, ahol szabadon felhaszn\u00e1lhat\u00f3 k\u00e9peket k\u00edn\u00e1lnak. Nyilv\u00e1n a v\u00e1laszt\u00e9k nem olyan sz\u00e9les, mint ha a teljes webes k\u00e9pi tartalomb\u00f3l v\u00e1logatn\u00e1l, de legal\u00e1bb leg\u00e1lis.<\/p>\n\n\n\n
Mi\u00e9rt \u00e9s hogyan haszn\u00e1lj emberekr\u0151l k\u00e9sz\u00fclt fot\u00f3kat a weboldaladon?<\/strong><\/h2>\n\n\n\n
Az emberekr\u0151l k\u00e9sz\u00fclt k\u00e9pek egyfel\u0151l nagyon hat\u00e9konyak, amikor a l\u00e1togat\u00f3idat akarod meggy\u0151zni. Ennek alapvet\u0151 oka az, hogy arcokkal emberibb\u00e9 teszed a weboldalad, \u00e9s \u00e9rzelmi kapcsolatot alak\u00edtasz ki a felhaszn\u00e1l\u00f3kkal, akik egy\u00e9bk\u00e9nt is sokkal jobban felfigyelnek azokra a k\u00e9pekre, melyeken emberek l\u00e1that\u00f3k. M\u00e1sfel\u0151l azonban akadnak probl\u00e9m\u00e1k is az arcokat mutat\u00f3 fel\u00fcletekkel, \u00edgy nem minden esetben optim\u00e1lis v\u00e1laszt\u00e1s egy-egy emberi arcot mutat\u00f3 k\u00e9p. Helyette egy kicsit tr\u00fckk\u00f6zni kell, de erre mindj\u00e1rt r\u00e1t\u00e9r\u00fcnk. El\u0151sz\u00f6r l\u00e1ssuk az el\u0151ny\u00f6ket!<\/p>\n\n\n\n
Milyen pozit\u00edvumai vannak az emberi arcokr\u00f3l k\u00e9sz\u00fclt k\u00e9peknek?<\/h3>\n\n\n\n
Amikor emberi arcokat vagy egyszer\u0171en embereket l\u00e1tunk, akkor azt \u00e9rezz\u00fck, mintha kapcsolatba l\u00e9pn\u00e9nk a c\u00e9ggel<\/strong>. Min\u00e9l nagyobbak \u00e9s min\u00e9l ink\u00e1bb a k\u00f6z\u00e9ppontba vannak helyezve az emberi arcok egy weboldalon, ann\u00e1l er\u0151sebb\u00e9 v\u00e1lik az \u00e9rzelmi kapcsolat. A k\u00e9pek seg\u00edtenek a l\u00e1togat\u00f3knak abban, hogy gyorsabban felm\u00e9rj\u00e9k, mi tal\u00e1lhat\u00f3 a weboldaladon, \u00e9s meg\u00e1llap\u00edts\u00e1k, hogy ennek \u0151k r\u00e9szesei szeretn\u00e9nek-e lenni vagy sem.<\/p>\n\n\n\n
Amikor l\u00e1tnak egy emberi arcot, akkor felm\u00e9rik, hogy \u0151k is olyanok-e, vagy esetleg olyanok akarnak-e lenni, mint a fot\u00f3n l\u00e1that\u00f3 szem\u00e9ly. Ha a v\u00e1lasz igen, akkor megn\u0151 az es\u00e9lye az elk\u00f6telez\u0151d\u00e9snek, mivel ez azt jelzi, hogy kapcsol\u00f3dni tudnak a term\u00e9kedhez vagy szolg\u00e1ltat\u00e1sodhoz.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\nMeghat\u00e1rozz\u00e1k a weboldal \u00e9rzelmi hangv\u00e9tel\u00e9t<\/h4>\n\n\n\n
Nyilv\u00e1n Te is tapasztaltad m\u00e1r, hogy ha valaki nevet, akkor egy id\u0151 Te is egy\u00fctt nevetsz vele, ha f\u00e1radt \u00e9s \u00e1s\u00edtozik, Te is \u00e1s\u00edtozni fogsz. Ugyanez igaz minden \u00e9rzelemre. Az \u00e9rzelmek \u00e1tadhat\u00f3k, ez\u00e1ltal meghat\u00e1rozhat\u00f3 az interakci\u00f3k \u00e9rzelmi hangv\u00e9tele. Az emberek az\u00e9rt figyelnek tudattalanul is az arcokra \u00e9s az azokon megjelen\u0151 \u00e9rzelmekre, mert \u00edgy tudnak megfelel\u0151en viszonyulni a t\u00f6bbi emberhez<\/strong>.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Ugyanakkor mivel kult\u00far\u00e1nk\u00e9nt \u00e9s koronk\u00e9nt is v\u00e1ltozik, hogy egyes arckifejez\u00e9seket mik\u00e9nt dek\u00f3dolnak az emberek, ez\u00e9rt fontos, hogy tiszt\u00e1ban legy\u00e9l azzal, mik\u00e9nt fogja \u00e9rtelmezni a k\u00f6z\u00f6ns\u00e9ged az \u00e1ltalad bemutatott arcokat.<\/p>\n\n\n\n
Lehet teh\u00e1t arra t\u00f6rekedni, hogy \u00e9rzelmeket kapcsolj a term\u00e9keidhez az\u00e1ltal, hogy ezeket emberi arcokr\u00f3l k\u00e9sz\u00fclt fot\u00f3kon jelen\u00edted meg ezeket az \u00e9rzelmeket. Ez az oka annak is, hogy nagyon sokan haszn\u00e1lnak mosolyg\u00f3 arcokat a hirdet\u00e9sekben az\u00e9rt, hogy pozit\u00edv kapcsolatot alak\u00edtsanak ki a k\u00f6z\u00f6ns\u00e9g\u00fckkel.<\/p>\n\n\n\n
Bizalmat keltenek<\/h4>\n\n\n\n
Ha a weboldaladon a c\u00e9geddel kapcsolatban \u00e1ll\u00f3 embereket mutatsz, azzal n\u00f6velheted a fel\u00e9d ir\u00e1nyul\u00f3 bizalmat. Milyen fot\u00f3kra van sz\u00f3?<\/p>\n\n\n\n
Bemutathatod a c\u00e9g dolgoz\u00f3it.<\/li>
Bemutathatsz olyan embereket, akik kapcsolatba ker\u00fcltek a term\u00e9keddel vagy szolg\u00e1ltat\u00e1soddal.<\/li>
Az aj\u00e1nl\u00e1sok mell\u00e9 is tehetsz emberi arcokat, hogy hihet\u0151bbek lesznek.<\/li><\/ul>\n\n\n\n
Min\u00e9l \u201cval\u00f3dibbnak\u201d t\u0171nnek a weboldaladon l\u00e1that\u00f3 emberek, ann\u00e1l jobban meg fognak b\u00edzni benned a l\u00e1togat\u00f3k. Az\u00e9rt nem j\u00f3k a modellekkel k\u00e9sz\u00edtett, hamisnak l\u00e1tsz\u00f3 fot\u00f3k, mert nem azt mutatj\u00e1k meg, hogy val\u00f3j\u00e1ban mik\u00e9nt l\u00e9pnek kapcsolatba az emberek a term\u00e9keddel, vagy kik \u00e1llnak m\u00f6g\u00f6tte. Ez pedig ink\u00e1bb k\u00e1rt\u00e9kony, mint hasznos. Ami igaz\u00e1n hat\u00e9kony, ha siker\u00fcl bemutatnod a c\u00e9g m\u00f6g\u00f6tt \u00e1ll\u00f3k val\u00f3di szem\u00e9lyis\u00e9g\u00e9t.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Vezetik a felhaszn\u00e1l\u00f3k tekintet\u00e9t<\/h4>\n\n\n\n
Az emberi arcokr\u00f3l k\u00e9sz\u00fclt fot\u00f3k nem csak arra alkalmasak, hogy \u00e9rzelmi kapcsolatot alak\u00edtsanak ki a l\u00e1togat\u00f3kkal. Arra is k\u00e9pesek, hogy v\u00e9gigvezess\u00e9k \u0151ket a weboldalon. Mivel az emberi arcok sokkal jobban felkeltik a figyelmet, mint b\u00e1rmilyen m\u00e1s webdesign elem, ez\u00e9rt hat\u00e9konyan haszn\u00e1lhatod ezeket a fot\u00f3kat arra, hogy a l\u00e1togat\u00f3k tekintet\u00e9t olyan pontokra ir\u00e1ny\u00edtsd a weboldalon, melyek neked fontosak.<\/p>\n\n\n\n
Ha p\u00e9ld\u00e1ul egy fot\u00f3n l\u00e1that\u00f3 tekintet a CTA-dra ir\u00e1nyul, akkor a legt\u00f6bb felhaszn\u00e1l\u00f3 is oda fog n\u00e9zni. A felhaszn\u00e1l\u00f3knak ugyanis n\u00e9ha kell egy kis seg\u00edts\u00e9g ehhez. Ez\u00e1ltal jelezheted nekik, hogy hova is n\u00e9zzenek az oldalon, \u00e9s mi legyen a k\u00f6vetkez\u0151 l\u00e9p\u00e9s\u00fck.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Mivel a felhaszn\u00e1l\u00f3k k\u00f6vetik a fot\u00f3kon szerepl\u0151 emberek tekintet\u00e9nek ir\u00e1ny\u00e1t, \u00edgy pontosan oda n\u00e9znek, ahov\u00e1 akarod. Ez a reakci\u00f3 teljesen term\u00e9szetes, \u00e9s an\u00e9lk\u00fcl megt\u00f6rt\u00e9nik, hogy gondolkodniuk kellene rajta. Teh\u00e1t, ha azt szeretn\u00e9d, hogy az emberek g\u00f6rgessenek, akkor a lefel\u00e9 mutat\u00f3 ny\u00edl helyett – vagy annak meger\u0151s\u00edt\u00e9sek\u00e9nt -, egy lefel\u00e9 n\u00e9z\u0151 arcot is elhelyezhetsz az oldalra. Ha felfel\u00e9 n\u00e9znek a fot\u00f3n szerepl\u0151 emberek, akkor a felhaszn\u00e1l\u00f3k tekintete a navig\u00e1ci\u00f3ra fog ir\u00e1nyulni. \u00c9s \u00edgy tov\u00e1bb.<\/p>\n\n\n\n
De gondot is okozhatnak az emberi arcokat mutat\u00f3 k\u00e9pek<\/h3>\n\n\n\n
Teh\u00e1t, mint azt elmondtuk, az arcokkal emberk\u00f6zelibb\u00e9 teszed a weboldalad, \u00e9s \u00e9rzelmi kapcsolatot alak\u00edtasz ki a felhaszn\u00e1l\u00f3kkal. Akik egy\u00e9bk\u00e9nt is sokkal jobban felfigyelnek azokra a k\u00e9pekre, melyeken emberek l\u00e1that\u00f3k. Ugyanez \u00e9rv\u00e9nyes a hirdet\u00e9sekn\u00e9l is, ahol melegs\u00e9get \u00e1rasztanak \u00e9s \u00e9rzelmeket v\u00e1ltanak ki az emberekr\u0151l k\u00e9sz\u00fcl fot\u00f3k. Tim Carr szerint<\/a> ugyanakkor az arcokat mutat\u00f3 k\u00e9pek jelent\u0151s m\u00e9rt\u00e9kben rontj\u00e1k p\u00e9ld\u00e1ul a hirdet\u00e9si teljes\u00edtm\u00e9nyt, de egy weboldalon is \u00e9rdemes lehet \u00f3vatosabban kezelni \u0151ket<\/strong>. El\u0151sz\u00f6r elmondjuk, mi lehet ennek az oka, majd javaslatokat is adunk a megold\u00e1sra.<\/p>\n\n\n\n
Hol a hiba?<\/h4>\n\n\n\n
Teh\u00e1t, mint tudjuk, a tekintet\u00fcnk mindig keresi az emberi arcokat. \u00cdgy tesz\u00fcnk a weboldalakon is. Ebb\u0151l k\u00f6vetkezik a designban az az elgondol\u00e1s, hogy ha emberi arcokat haszn\u00e1lunk, akkor oda tudjuk vonzani a tekintetet. \u00c9s ez val\u00f3ban \u00edgy van. A gond csak az, hogy a figyelem felkelt\u00e9se a dolog k\u00f6nnyebbik r\u00e9sze<\/strong>, ugyanis nek\u00fcnk \u00e1ltal\u00e1ban arra van sz\u00fcks\u00e9g\u00fcnk, hogy ezt a figyelmet fenntartsuk az \u00fczenet\u00fcnkre ir\u00e1ny\u00edtva.<\/p>\n\n\n\n
Nem megy \u00e1t az \u00fczenet<\/strong><\/p>\n\n\n\n
Emellett megfigyelhet\u0151 egy m\u00e1sik jelens\u00e9g is, amikor k\u00e9pekr\u0151l van sz\u00f3: az emberek hajlamosak csak a k\u00e9pre figyelni<\/strong>, \u00e9s nem foglalkoznak a mellette l\u00e9v\u0151 sz\u00f6veggel. A l\u00e1togat\u00f3k egyszer\u0171en \u00e1tugorj\u00e1k a c\u00edmsort \u00e9s a fot\u00f3ra \u00f6sszpontos\u00edtanak. Ezt remek\u00fcl bemutatta egy szemk\u00f6vet\u00e9ses vizsg\u00e1lat<\/a>, melyben egy weboldal egy kisgyereket mutatott, ami k\u00f6zvetlen\u00fcl az olvas\u00f3ra tekintett. Hab\u00e1r az oldalon hangs\u00falyos volt a sz\u00f6veg is, a figyelem legnagyobb r\u00e9sze nem erre, hanem a fot\u00f3ra ir\u00e1nyult. M\u00e1rpedig marketing szempontb\u00f3l, ha p\u00e9ld\u00e1ul ez egy hirdet\u00e9sn\u00e9l \u00edgy t\u00f6rt\u00e9nik, akkor az buk\u00e1s, hiszen maga a k\u00e9p nem tudja \u00e1tadni mindazt azt inform\u00e1ci\u00f3t, amit \u00e1t kellene adni. De ugyanez \u00e9rv\u00e9nyes lehet egy weboldaln\u00e1l is.<\/p>\n\n\n\n
Elriaszthatnak l\u00e1togat\u00f3kat<\/strong><\/p>\n\n\n\n
Ez azonban csak az egyik probl\u00e9ma. A m\u00e1sik az, hogy bizonyos felhaszn\u00e1l\u00f3kat el is riasztanak az arcokr\u00f3l k\u00e9sz\u00fclt fot\u00f3k<\/strong>, olyan m\u00f3don, hogy \u0151k ennek nincsenek is tudat\u00e1ban. Az emberek ugyanis rendk\u00edv\u00fcl gyorsan v\u00e9lem\u00e9nyt alkotnak m\u00e1s emberi l\u00e9nyekr\u0151l (a pillanatok alatt kialakul\u00f3 els\u0151 benyom\u00e1s fontoss\u00e1ga), M\u00e1rpedig mindenkiben jelen van a nem tudatos elfogults\u00e1g m\u00e1s emberekkel kapcsolatban.<\/p>\n\n\n\n
Ez azt jelenti, hogy az embereket \u00e1br\u00e1zol\u00f3 k\u00e9pek ugyan bizonyos l\u00e1togat\u00f3kat ugyan vonzani fognak, m\u00e1sokat viszont tasz\u00edtani<\/strong>. Ez akkor k\u00fcl\u00f6n\u00f6sen nagy gond, ha sz\u00e9les a c\u00e9lk\u00f6z\u00f6ns\u00e9ged, \u00edgy nagy a kock\u00e1zata, hogy sokaknak nem fog tetszeni bizonyos emberi arc. M\u00e1rpedig a c\u00e9l alapvet\u0151en az, hogy a k\u00f6z\u00f6ns\u00e9ged r\u00e1hangol\u00f3djon a weboldalra vagy hirdet\u00e9sre, ne pedig elriassza \u0151t. \u00dagy t\u0171nik azonban, hogy az emberekr\u0151l k\u00e9sz\u00fcl k\u00e9pek sok esetben az ut\u00f3bbit teszik.<\/p>\n\n\n\n
Tim Carr legal\u00e1bbis azt tapasztalta a hirdet\u00e9sei tesztjei sor\u00e1n, hogy az embereket \u00e1br\u00e1zol\u00f3 anyagok majdnem mindig negat\u00edvan hatottak az olvas\u00f3i vagy n\u00e9z\u0151i reakci\u00f3kra. Ugyanakkor az olyan hirdet\u00e9sek, melyek nem tartalmaztak fot\u00f3kat vagy legal\u00e1bbis egy semleges k\u00f6rnyezetet mutattak, mindig t\u00falteljes\u00edtett\u00e9k az el\u0151bbieket.<\/p>\n\n\n\n
Mit haszn\u00e1lj emberi arcok helyett a k\u00e9pekn\u00e9l?<\/h3>\n\n\n\n
A k\u00f6rnyezetet hangs\u00falyozd!<\/h4>\n\n\n\n
Mivel a k\u00e9pek, fot\u00f3k m\u00e9g mindig fontosak, viszont az emberi arcokr\u00f3l k\u00e9sz\u00fclt fot\u00f3k kock\u00e1zatosak lehetnek, ez\u00e9rt \u00fagy lehet a dolgot megker\u00fclni, hogy b\u00e1r l\u00e1tszanak az emberek a k\u00e9peken, azonban az arcuk nem. \u00cdgy p\u00e9ld\u00e1ul, ha egy k\u00e1bel-szolg\u00e1ltat\u00e1st mutatsz be, akkor a t\u00e9v\u00e9t n\u00e9z\u0151 csal\u00e1d ne szemb\u0151l legyen l\u00e1that\u00f3, hanem h\u00e1tulr\u00f3l, \u00e9s a telev\u00edzi\u00f3ra helyez\u0151dj\u00f6n a hangs\u00faly.<\/p>\n\n\n\n
Term\u00e9kk\u00e9peket mutass!<\/h4>\n\n\n\n
A m\u00e1sik k\u00e9zenfekv\u0151 lehet\u0151s\u00e9g, hogy ha egy term\u00e9ket akarsz eladni, akkor azt mutatod be. Ha p\u00e9ld\u00e1ul internetszolg\u00e1ltat\u00e1st k\u00edn\u00e1lsz, akkor a k\u00e9pen egy laptop vagy egy tablet legyen l\u00e1that\u00f3, mellette term\u00e9szetesen az \u00fczenettel. Hab\u00e1r sokan err\u0151l azt gondolj\u00e1k, hogy semmi szem\u00e9lyess\u00e9g nincs benne, nehezebben sz\u00f3l\u00edtja meg az embereket, mint egy \u00e9lethelyzetet bemutat\u00f3 k\u00e9p, Tim Carr szerint a gyakorlatban a term\u00e9ket k\u00f6zpontba helyez\u0151 megk\u00f6zel\u00edt\u00e9s mindig jobb teljes\u00edtm\u00e9nyt mutat a hirdet\u00e9sekn\u00e9l.<\/p>\n\n\n\n
Haszn\u00e1lj kreat\u00edv illusztr\u00e1ci\u00f3kat!<\/h4>\n\n\n\n
Az illusztr\u00e1ci\u00f3k j\u00f3l m\u0171k\u00f6dnek az emberek elker\u00fclhetetlen \u00edt\u00e9letalkot\u00e1s\u00e1nak elker\u00fcl\u00e9s\u00e9n\u00e9l. A rajzolt illusztr\u00e1ci\u00f3k ugyanis a kev\u00e9sb\u00e9 realisztikus megjelen\u00edt\u00e9s r\u00e9v\u00e9n nem v\u00e1ltj\u00e1k ki azokat a negat\u00edv hat\u00e1sokat, mint a fot\u00f3k. Teh\u00e1t, ha azt szeretn\u00e9d bemutatni, mik\u00e9nt haszn\u00e1lja valaki a term\u00e9ked vagy a szolg\u00e1ltat\u00e1sod, akkor ezt rajzolt form\u00e1ban is megteheted, negat\u00edv k\u00f6vetkezm\u00e9nyek n\u00e9lk\u00fcl.<\/p>\n\n\n\n
A l\u00e9nyeg teh\u00e1t az, hogy az emberek t\u00e1rsas\u00e1gi l\u00e9nyek, \u00e9s egym\u00e1sra tudatalatti szinten adnak pozit\u00edv \u00e9s negat\u00edv reakci\u00f3kat. M\u00e1rpedig, ha szeretn\u00e9d eladni a term\u00e9ked vagy a szolg\u00e1ltat\u00e1sod, akkor kiz\u00e1r\u00f3lag pozit\u00edv reakci\u00f3kra van sz\u00fcks\u00e9ged. Viszont ha emberi arcokat bemutat\u00f3 fot\u00f3kat haszn\u00e1lsz, akkor azzal ronthatod a n\u00e9z\u0151i reakci\u00f3kat. Lehet, hogy egy kicsit nagyobb er\u0151fesz\u00edt\u00e9s, de \u00e9rdemes az emberek helyett az \u0151ket haszn\u00e1lat k\u00f6zben k\u00f6r\u00fclvev\u0151 k\u00f6rnyezetre, a term\u00e9kre helyezni a hangs\u00falyt, vagy rajzolt illusztr\u00e1ci\u00f3kat alkalmazni.
<\/p>\n\n\n\n
H\u00e1tt\u00e9rk\u00e9pek haszn\u00e1lata a weboldalon<\/strong><\/h2>\n\n\n\n
A h\u00e1tt\u00e9rk\u00e9pek a weboldalak szerves r\u00e9sz\u00e9t jelentik. A modern webdesignban sokkal fontosabb\u00e1 v\u00e1ltak, mint eddig b\u00e1rmikor. Ugyan\u00fagy egy k\u00e9pet k\u00f6zvet\u00edt a c\u00e9gedr\u0151l, mint mondjuk a log\u00f3d. Ann\u00e1l is ink\u00e1bb fontos elmerengeni egy kicsit a h\u00e1tt\u00e9rk\u00e9pek k\u00e9rd\u00e9s\u00e9n, mert manaps\u00e1g, amikor mindent eluralt a minimalizmus \u00e9s sablonokb\u00f3l k\u00e9sz\u00fclnek az oldalak, a nagy egyformas\u00e1gban alig p\u00e1r olyan elem van, ami seg\u00edt kit\u0171nni \u00e9s kifejezni az egy\u00e9nis\u00e9gedet<\/strong>. Az egyik ilyen elem a h\u00e1tt\u00e9r.<\/p>\n\n\n\n
Mindez azonban csak akkor m\u0171k\u00f6dik, ha a megfelel\u0151 k\u00e9peket haszn\u00e1lod. Egy rossz v\u00e1laszt\u00e1ssal eltorz\u00edthatod azt az \u00fczenetet, amit a l\u00e1togat\u00f3id fel\u00e9 akarsz k\u00f6zvet\u00edteni, s\u0151t UX probl\u00e9m\u00e1k is felmer\u00fclhetnek.<\/p>\n\n\n\n
Egysz\u00edn\u0171 h\u00e1tt\u00e9r<\/h4>\n\n\n\n
Ha nem olyan vagy, akinek trendek hat\u00e1rozz\u00e1k meg az \u00e9let\u00e9t, hanem komolyan, megfontoltan int\u00e9zed a dolgokat, akkor v\u00e1laszthatod a megszokott megold\u00e1st: az egysz\u00edn\u0171 h\u00e1tteret. Ez n\u00e9h\u00e1ny \u00e9ve m\u00e9g alap\u00e9rtelmezett v\u00e1laszt\u00e1s volt, gyakorlatilag nem nagyon volt m\u00e1s lehet\u0151s\u00e9g, mint egysz\u00edn\u0171 h\u00e1tteret alkalmazni.<\/p>\n\n\n\n
Egy ilyen h\u00e1tt\u00e9r j\u00f3l n\u00e9zhet ki, ugyanakkor nem \u00e1ll\u00edthat\u00f3 r\u00f3la, hogy t\u00falzottan izgalmas vagy egyedi lenne. Egy minimalista weboldal eset\u00e9n pedig pont ez az, amit kompenz\u00e1lni kellene. Egy egysz\u00edn\u0171 h\u00e1tt\u00e9rrel m\u00e1r v\u00e9gletesen minimalist\u00e1v\u00e1 v\u00e1lik a weboldalad<\/strong>, eg\u00e9sz egyszer\u0171en nem lesz k\u00e9pes felkelteni az emberek figyelm\u00e9t, \u00e9s unalmass\u00e1 v\u00e1lik.<\/p>\n\n\n\n
Technikailag az egysz\u00edn\u0171 h\u00e1tt\u00e9r nem okoz majd sok gondot<\/strong>. P\u00e9ld\u00e1ul reszponz\u00edv weboldalakon egy\u00e1ltal\u00e1n nem lesz probl\u00e9m\u00e1d azzal, hogy mekkora kijelz\u0151re ker\u00fcl a h\u00e1tt\u00e9r. Hab\u00e1r az egysz\u00edn\u0171 h\u00e1tt\u00e9r egyszer\u0171nek t\u0171nik, azonban ilyenkor is van n\u00e9h\u00e1ny dolog, amire figyelni kell:<\/p>\n\n\n\n
A h\u00e1tt\u00e9r \u00e9s a sz\u00f6veg kontrasztja, valamint a sz\u00ednek p\u00e1ros\u00edt\u00e1sa megfelel\u0151 legyen.<\/li>
A kiv\u00e1lasztott sz\u00ednek \u00e9rzelmi hat\u00e1st gyakorolnak a l\u00e1togat\u00f3kra: fel\u00e9l\u00e9nk\u00edtik vagy \u00e9pp megnyugtatj\u00e1k \u0151ket.<\/li>
A sz\u00ednek nem semlegesek, gyakran er\u0151sebb a hat\u00e1suk, mint egy fot\u00f3nak.<\/li><\/ul>\n\n\n\n
Az olyan sz\u00ednek, melyek a sz\u00ednk\u00f6r\u00f6n egym\u00e1shoz k\u00f6zel tal\u00e1lhat\u00f3k, ink\u00e1bb megnyugtat\u00f3k a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra – term\u00e9szetesen annak f\u00fcggv\u00e9ny\u00e9ben, hogy milyen sz\u00ednt v\u00e1lasztott\u00e1l -, mik\u00f6zben az egym\u00e1ssal szemben l\u00e9v\u0151 sz\u00ednek felkeltik a figyelmet, ha h\u00e1tt\u00e9r-el\u0151t\u00e9r kombin\u00e1ci\u00f3ba ker\u00fclnek.<\/p>\n\n\n\n
Mint\u00e1k haszn\u00e1lata h\u00e1tt\u00e9rk\u00e9nt<\/h4>\n\n\n\n
A k\u00f6vetkez\u0151 megold\u00e1st a mint\u00e1k haszn\u00e1lata jelenti. Az egysz\u00edn\u0171 h\u00e1tterekhez k\u00e9pest az az el\u0151ny\u00fck, hogy mik\u00f6zben ezek is alapvet\u0151en egyszer\u0171 megold\u00e1st jelentenek, m\u00e9gis megmutathat\u00f3 \u00e1ltaluk n\u00e9mi egyedis\u00e9g, m\u00e9lys\u00e9get adnak a designnak. A mint\u00e1kn\u00e1l is ki lehet haszn\u00e1lni a sz\u00ednek erej\u00e9t, vagyis kiv\u00e1lthat\u00f3k \u00e9rzelmek, ugyanakkor a minta r\u00e9v\u00e9n k\u00fcl\u00f6nlegess\u00e9 tehet\u0151 a megjelen\u00e9s. <\/p>\n\n\n\n
$\"Itt$
Itt alig l\u00e1tszik a minta a h\u00e1tt\u00e9rben, pedig van.<\/figcaption><\/figure><\/div>\n\n\n\n
Mivel egy minta folyamatosan ism\u00e9tl\u0151d\u0151 elemekb\u0151l tev\u0151dik \u00f6ssze, \u00edgy technikailag elvileg nem okoz gondot, hogy milyen m\u00e9ret\u0171 kijelz\u0151n jelenik meg. Ugyanakkor arra figyelni kell, hogy kisfelbont\u00e1s\u00fa kijelz\u0151n m\u00e1s lehet a hat\u00e1sa a mint\u00e1nak, mint \u00f3ri\u00e1si felbont\u00e1sn\u00e1l<\/strong>, nagy kijelz\u0151n. Emellett az is fontos, hogy ne v\u00e1ljon nagyon er\u0151ss\u00e9 a mint\u00e1zat, ne k\u00f6veteljen t\u00fals\u00e1gosan sok figyelmet a felhaszn\u00e1l\u00f3t\u00f3l. De figyelj\u00fcnk arra is, hogy<\/p>\n\n\n\n
a minta nagyon enyhe kontrasztban<\/strong> legyen a h\u00e1tt\u00e9rsz\u00ednnel,<\/li>
megt\u00f6rhet\u0151 whitespace-ekkel<\/strong>, ami azt jelenti, hogy megpihenhet a szem,<\/li>
k\u00fcl\u00f6nb\u00f6z\u0151 kijelz\u0151m\u00e9retekn\u00e9l lehet\u0151leg ugyanannyi minta jelenjen meg minden kijelz\u0151n,<\/li>
vagy olyan nagy legyen a minta, amennyire lehets\u00e9ges, hogy ne zavarja a felhaszn\u00e1l\u00f3kat m\u00e9g nagyfelbont\u00e1s\u00fa \u00e9s nagym\u00e9ret\u0171 kijelz\u0151n sem.<\/li><\/ul>\n\n\n\n
Text\u00far\u00e1k haszn\u00e1lata h\u00e1tt\u00e9rk\u00e9nt<\/h4>\n\n\n\n
A text\u00far\u00e1k \u00e9s a mint\u00e1k abban k\u00fcl\u00f6nb\u00f6znek, hogy m\u00edg el\u0151bbiek kicsi, ism\u00e9tl\u0151d\u0151 elemek a h\u00e1tt\u00e9rben, addig a text\u00far\u00e1k nagyobbak \u00e9s nem ism\u00e9tl\u0151dnek. A text\u00far\u00e1kat c\u00e9lzottan \u00e9s \u00e1tgondoltan \u00e9rdemes haszn\u00e1lni a designban. A text\u00far\u00e1k k\u00e9pesek vezetni a felhaszn\u00e1l\u00f3k tekintet\u00e9t, \u00e9s seg\u00edtenek a tartalom struktur\u00e1l\u00e1s\u00e1ban. Az al\u00e1bbi p\u00e9ld\u00e1ban text\u00fara jelenik meg, mely seg\u00edti az inform\u00e1ci\u00f3k befogad\u00e1s\u00e1t, \u00e9s t\u00f6k\u00e9letesen passzol a weboldal st\u00edlus\u00e1hoz:<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
A text\u00far\u00e1k arra is alkalmasak, hogy kiemeljenek bizonyos elemeket a weboldalon. Felh\u00edvj\u00e1k a figyelmet p\u00e9ld\u00e1ul egy call to action gombra, vagy egy olyan ter\u00fcletre, amire szeretn\u00e9d, hogy az emberek odafigyeljenek. K\u00e9pes elv\u00e1lasztani a tartalmat a weboldal t\u00f6bbi r\u00e9sz\u00e9t\u0151l, ahogy az al\u00e1bbi p\u00e9ld\u00e1n is l\u00e1tszik:<\/p>\n\n\n\n
$\"Megjelenik$ <\/figure>\n\n\n\n
Egy text\u00fara a h\u00e1tt\u00e9rben emellett k\u00e9pes a m\u00e1rka azonos\u00edt\u00e1s\u00e1ra \u00e9s identit\u00e1sa bemutat\u00e1s\u00e1ra. A k\u00f6vetkez\u0151 p\u00e9ld\u00e1n l\u00e1that\u00f3, ahogy a textur\u00e1lis h\u00e1tt\u00e9r m\u00e9g ink\u00e1bb el\u0151t\u00e9rbe \u00e1ll\u00edtja a sz\u00f6veget \u00e9s egy egyedi k\u00f6rnyezetet teremt a tartalom sz\u00e1m\u00e1ra:<\/p>\n\n\n\n
$\"H\u00e1tt\u00e9r-text\u00fara,$ <\/figure>\n\n\n\n
Hogyan haszn\u00e1ld a text\u00far\u00e1kat?<\/h4>\n\n\n\n
Az egyszer\u0171 \u00e9s nem tolakod\u00f3 text\u00far\u00e1k seg\u00edtenek a tartalom kiemel\u00e9s\u00e9ben. Egy igaz\u00e1n j\u00f3 text\u00far\u00e1t tal\u00e1n nem is vesznek \u00e9szre a felhaszn\u00e1l\u00f3k. Egy ilyen text\u00fara jav\u00edtja a sz\u00f6veg olvashat\u00f3s\u00e1g\u00e1t, mik\u00f6zben ad egy \u00e9rdekes h\u00e1tteret az eg\u00e9sz designnak.<\/p>\n\n\n\n
Ugyanakkor van, amikor a nagyobb, er\u0151teljesebb text\u00far\u00e1k m\u0171k\u00f6dnek j\u00f3l egy weboldalon. Ez k\u00fcl\u00f6n\u00f6sen akkor igaz, ha a felhaszn\u00e1l\u00f3i fel\u00fclet egyszer\u0171, de ism\u00e9tl\u0151d\u0151 elemekb\u0151l \u00e1ll. Sz\u00e1mos t\u00e9nyez\u0151t figyelembe kell venni enn\u00e9l a megold\u00e1sn\u00e1l, \u00e9s a mint\u00e1t hozz\u00e1 kell tudni illeszteni a fel\u00fclet t\u00f6bbi elem\u00e9hez. \u00c9rdemes figyelni az analitik\u00e1t \u00e9s a felhaszn\u00e1l\u00f3i viselked\u00e9st az oldalon, mert kider\u00fclhet bel\u0151le, hogy a h\u00e1tt\u00e9r rontja-e a weboldal befogad\u00e1s\u00e1t. Ha \u00e9les es\u00e9s l\u00e1tszik a konverzi\u00f3kban a text\u00fara haszn\u00e1lata ut\u00e1n, akkor az azt jelzi, hogy \u00e1t kell gondolni a haszn\u00e1lat\u00e1t.<\/p>\n\n\n\n
$\"Egy$ <\/figure>\n\n\n\n
Sz\u00edn\u00e1tmenetes text\u00far\u00e1k alkalmaz\u00e1sa m\u00e9lys\u00e9get \u00e9s st\u00edlust ad a desginnak. Amikor egy textur\u00e1lis h\u00e1tt\u00e9rrel p\u00e1rosul, akkor az jav\u00edthatja a teljes weboldal hat\u00e9konys\u00e1g\u00e1t. L\u00e9trehozhat\u00f3k egyedi gradiens-komin\u00e1ci\u00f3k, melyeknek saj\u00e1t m\u00e9lys\u00e9ge \u00e9s mint\u00e1ja van. Az al\u00e1bbi p\u00e9ld\u00e1n egy olyan t\u00f6bbszintes gradiens l\u00e1that\u00f3, mely el\u0151t\u00e9rbe tolja az anim\u00e1ci\u00f3kat \u00e9s a weboldal m\u00e1s elemeit, valamint kiemeli a call to actiont:
<\/p>\n\n\n\n
$\"Gradiens$ <\/figure>\n\n\n\n
K\u00fcl\u00f6nb\u00f6z\u0151 sz\u00ednvari\u00e1ci\u00f3k is kombin\u00e1lhat\u00f3k textur\u00e1kkal, \u00edgy m\u00e9g \u00e9rdekesebb\u00e9 v\u00e1lik a h\u00e1tt\u00e9r. Az al\u00e1bbi p\u00e9ld\u00e1n egy olyan vid\u00e1m textur\u00e1lis h\u00e1tt\u00e9r l\u00e1that\u00f3, melyn\u00e9l r\u00e1ad\u00e1sul k\u00e9t sz\u00ednt kombin\u00e1lt \u00f6ssze annak tervez\u0151je. Ez a megold\u00e1s seg\u00edt a felhaszn\u00e1l\u00f3k tekintet\u00e9t a sz\u00f6vegre ir\u00e1ny\u00edtani, mik\u00f6zben az eg\u00e9sz vizu\u00e1lis design er\u0151teljes \u00e9s kiegyens\u00falyozott.<\/p>\n\n\n\n
$\"Sz\u00edn$ <\/figure>\n\n\n\n
Absztrakt k\u00e9pek<\/h4>\n\n\n\n
Az absztrakt k\u00e9pek sokszor egyszer\u0171 megold\u00e1s jelentenek, m\u00e9g ha nem is felt\u00e9tlen\u00fcl k\u00f6nny\u0171 a haszn\u00e1latuk h\u00e1tt\u00e9rk\u00e9pk\u00e9nt. J\u00f3l alkalmazhat\u00f3k olyan esetben, amikor valami egyedit akarsz<\/strong> adni a minimalista weboldaladhoz, de nem akarod k\u00f6vetni a ma olyannyira n\u00e9pszer\u0171, \u00f3ri\u00e1si h\u00e1tt\u00e9rk\u00e9pek trendj\u00e9t.<\/p>\n\n\n\n
Az absztrakt k\u00e9pek az eg\u00e9sz weboldalnak adnak egyfajta kreat\u00edv kisug\u00e1rz\u00e1st<\/strong>, ugyanakkor megmarad a f\u00f3kusz a sz\u00f6vegeken. H\u00e1tr\u00e1nya, hogy a design esetleg unalmass\u00e1 v\u00e1lhat, a visszat\u00e9r\u0151 l\u00e1togat\u00f3k el\u0151bb r\u00e1unnak, mint egy j\u00f3 fot\u00f3ra<\/strong>. Ez persze f\u00fcgg az absztrakt h\u00e1tt\u00e9rk\u00e9p \u00f6sszetetts\u00e9g\u00e9t\u0151l, de egy egyszer\u0171 megold\u00e1sn\u00e1l gyakorlatilag nincs semmi, ami egy m\u00e1sodik l\u00e1togat\u00e1skor is \u00e9rdekes lehet benne. Ha nem tudod mire gondolunk, akkor mutatjuk:<\/p>\n\n\n\n
$\"Egy$
Egy absztrakt h\u00e1tt\u00e9r.<\/figcaption><\/figure><\/div>\n\n\n\n
H\u00e1tt\u00e9rfot\u00f3, hero image<\/h4>\n\n\n\n
Trendi lett mostan\u00e1ban a teljes kijelz\u0151n terpeszked\u0151 h\u00e1tt\u00e9rk\u00e9peket haszn\u00e1lni a weboldalakon. Ebb\u0151l a szempontb\u00f3l megk\u00fcl\u00f6nb\u00f6ztet\u00fcnk h\u00e1tt\u00e9rk\u00e9pet \u00e9s \u00fagynevezett hero image<\/strong>-et. Ut\u00f3bbi egy olyan k\u00e9p, mely a hajt\u00e1s feletti r\u00e9szben jelenik meg \u00e9s k\u00f6zvetlen\u00fcl kapcsol\u00f3dik az alatta l\u00e9v\u0151 tartalomhoz. Seg\u00edt abban, hogy megfogalmazza a weboldalad \u00fczenet\u00e9t, egy fontos funkci\u00f3ra felh\u00edvja a figyelmet. Err\u0151l hamarosan r\u00e9szletesebben is besz\u00e9l\u00fcnk.<\/p>\n\n\n\n
Ezzel szemben a h\u00e1tt\u00e9rk\u00e9p<\/strong> akkor jelenik meg a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, amikor elkezdenek g\u00f6rgetni. A h\u00e1tt\u00e9rk\u00e9pek ink\u00e1bb csak t\u00e9m\u00e1j\u00e1t, hangulat\u00e1t szabj\u00e1k meg a weboldalnak, \u00e9s nem valamilyen egyedi vonatkoz\u00e1s\u00e1ra pr\u00f3b\u00e1lj\u00e1k felh\u00edvni a figyelmet.<\/p>\n\n\n\n
De nemcsak egym\u00e1st birkak\u00e9nt val\u00f3 k\u00f6vet\u00e9se \u00e1ll a jelens\u00e9g m\u00f6g\u00f6tt, hanem a hat\u00e1soss\u00e1g \u00e9s a praktikum<\/strong> is. Hiszen m\u00edg teljes er\u0151vel ny\u0171g\u00f6z le egy asztali g\u00e9p nagym\u00e9ret\u0171 monitor\u00e1n a falt\u00f3l falig tart\u00f3 fot\u00f3, addig \u00e9rtelmezhet\u0151 marad az okostelefonok kijelz\u0151j\u00e9n is<\/strong>, merthogy azt is maxim\u00e1lis, teh\u00e1t a lehet\u0151 legnagyobb sz\u00e9less\u00e9gben elfoglalja. Min\u00e9l nagyobb m\u00e9ret\u0171 egy k\u00e9p, ann\u00e1l jobban \u00e1t tudja adni a felhaszn\u00e1l\u00f3knak egy m\u00e1rka identit\u00e1s\u00e1t, de ann\u00e1l hat\u00e9konyabban m\u0171k\u00f6dik a landing oldalakon is.<\/p>\n\n\n\n
A h\u00e1tt\u00e9rk\u00e9peknek \u00e9s h\u00e1tt\u00e9rvide\u00f3knak<\/a> m\u00e1ra kialakult egy felhaszn\u00e1l\u00e1si gyakorlata, mely seg\u00edti a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny \u00e9s a usability optim\u00e1lis kialak\u00edt\u00e1s\u00e1t \u00e9s a tartalom hat\u00e9kony megjelen\u00edt\u00e9s\u00e9t. A k\u00e9pnek term\u00e9szetesen \u00f6sszhangban kell lennie a c\u00e9g imidzs\u00e9vel \u00e9s a c\u00e9lk\u00f6z\u00f6ns\u00e9g jellemz\u0151ivel is. Ha ezeket pontosan siker\u00fcl eltal\u00e1lni, akkor fogja el\u00e9rni a megfelel\u0151 hat\u00e1st a felhaszn\u00e1l\u00f3kn\u00e1l. Egy teljes oldalt bet\u00f6lt\u0151 k\u00e9p v\u00e1laszt\u00e1s\u00e1n\u00e1l nagyobb a felel\u0151ss\u00e9g is, ahogy nagyobb az \u00e1ltala kiv\u00e1ltott hat\u00e1s is, \u00edgy \u00e9rdemes id\u0151t sz\u00e1nni r\u00e1.<\/p>\n\n\n\n
Mire figyelj a h\u00e1tt\u00e9rk\u00e9pekn\u00e9l?<\/h3>\n\n\n\n
Ne kezeld k\u00fcl\u00f6n\u00e1ll\u00f3k\u00e9nt<\/h4>\n\n\n\n
a h\u00e1tteret \u00e9s az el\u0151t\u00e9rben szerepl\u0151 inform\u00e1ci\u00f3kat<\/strong>! Ezek egy\u00fcttesen k\u00e9pesek el\u00e9rni egy bizonyos eredm\u00e9nyt vagy c\u00e9lt. A legkomolyabb, h\u00e1tt\u00e9rk\u00e9pekkel kapcsolatos hib\u00e1k pont abb\u00f3l sz\u00e1rmaznak, hogy k\u00fcl\u00f6n kezelik a h\u00e1tt\u00e9rk\u00e9pet, amire azt\u00e1n att\u00f3l szinte teljesen f\u00fcggetlen\u00fcl r\u00e1helyeznek valamit.<\/p>\n\n\n\n
Figyelj az egyens\u00falyra!<\/h4>\n\n\n\n
Amikor helyesen haszn\u00e1lod, akkor a h\u00e1tt\u00e9rk\u00e9p a megfelel\u0151 \u00fczenetet k\u00f6zvet\u00edti az emberek sz\u00e1m\u00e1ra. Ugyanakkor, ha t\u00fals\u00e1gosan er\u0151s a k\u00e9p \u00fczenete, akkor elhom\u00e1lyos\u00edtja a t\u00f6bbi weboldal-elemet. Felborul az egyens\u00faly<\/strong> a hatalmas \u00e9s kifejez\u0151 k\u00e9p \u00e9s a weboldal t\u00f6bbi r\u00e9sze k\u00f6z\u00f6tt. Ilyenkor ugyan hat\u00e1ssal lesz a felhaszn\u00e1l\u00f3kra, azonban elvonja a figyelmet a sokkal fontosabb tartalomr\u00f3l<\/strong>.<\/p>\n\n\n\n
Ak\u00e1r hero image-et, akk\u00e1r h\u00e1tt\u00e9rfot\u00f3t haszn\u00e1lsz, a h\u00e1tt\u00e9rk\u00e9p vizu\u00e1lis jelk\u00e9nt szolg\u00e1l az emberek sz\u00e1m\u00e1ra, de nem k\u00f6z\u00e9ppontba \u00e1ll\u00edtva.<\/p>\n\n\n\n
Figyelj az olvashat\u00f3s\u00e1gra!<\/h4>\n\n\n\n
Az m\u00e9g nem el\u00e9g, hogy v\u00e1lasztasz egy sz\u00e9p k\u00e9pet. Az els\u0151 k\u00e9rd\u00e9s, amit fel kell tenned magadnak, hogy milyen hat\u00e1ssal lesz az olvashat\u00f3s\u00e1gra a v\u00e1lasztott h\u00e1tt\u00e9rk\u00e9p? Ha ugyanis a l\u00e1togat\u00f3k nem tudj\u00e1k elolvasni a rajta l\u00e9v\u0151 sz\u00f6veget, akkor az eg\u00e9sz weboldalad megbukott. Ez\u00e9rt amikor a sz\u00f6veg m\u00f6g\u00e9 teszel egy h\u00e1tt\u00e9rk\u00e9pet, megfelel\u0151 kontrasztnak<\/strong> kell lennie k\u00f6z\u00f6tt\u00fck.<\/p>\n\n\n\n
A sz\u00f6vegnek a h\u00e1tt\u00e9rk\u00e9pen olvashat\u00f3nak \u00e9s k\u00f6nnyen \u00e1tfuthat\u00f3nak kell lennie. A kontraszt fontoss\u00e1g\u00e1r\u00f3l \u00e9s kialak\u00edt\u00e1s\u00e1r\u00f3l egyr\u00e9szt olvashatsz b\u0151vebben a sz\u00ednekr\u0151l sz\u00f3l\u00f3 anyagunkban<\/a>, valamint a bet\u0171k kiv\u00e1laszt\u00e1s\u00e1r\u00f3l sz\u00f3l\u00f3 blogbejegyz\u00e9s\u00fcnkben<\/a>, ahol eszk\u00f6z\u00f6ket is aj\u00e1nlunk a megfelel\u0151 kontrasztar\u00e1ny ellen\u0151rz\u00e9s\u00e9re.<\/p>\n\n\n\n
Ha nem vagy biztos abban, hogy j\u00f3l olvashat\u00f3 a sz\u00f6veged, viszont ragaszkodsz egy k\u00e9phez, akkor is vannak lehet\u0151s\u00e9geid. K\u00e9pszerkeszt\u0151 vagy ak\u00e1r CSS r\u00e9v\u00e9n hom\u00e1lyos\u00edthatsz a k\u00e9pen, m\u00f3dos\u00edthatsz a kontraszton, r\u00e1tehetsz egy layert, hogy olvashat\u00f3bb\u00e1 v\u00e1ljon a sz\u00f6veg. Emellett persze fontos a megfelel\u0151 bet\u0171t\u00edpus \u00e9s bet\u0171m\u00e9ret v\u00e1laszt\u00e1sa, hiszen jelent\u0151s m\u00e9rt\u00e9kben hozz\u00e1j\u00e1rul az olvashat\u00f3s\u00e1ghoz.<\/p>\n\n\n\n
Legyen a k\u00e9p relev\u00e1ns \u00e9s rendezett<\/h4>\n\n\n\n
Olyan fot\u00f3t kell v\u00e1lasztanod h\u00e1tt\u00e9rk\u00e9pk\u00e9nt, mely valamilyen m\u00f3don kapcsol\u00f3dik a c\u00e9gedhez \u00e9s a weboldaladhoz. Ez azt jelenti, hogy k\u00f6t\u0151dik ahhoz a helyhez, ahol jelen vagy, esetleg a term\u00e9kedhez vagy a szolg\u00e1ltat\u00e1sodhoz. Ugyanakkor abba az ir\u00e1nyba is \u00e9rdemes tapogat\u00f3znod, hogy a k\u00e9ppel er\u0151s\u00edtsd a weboldalad \u00fczenet\u00e9t. A h\u00e1tt\u00e9rk\u00e9pre mindig \u00fagy gondolj, mint az \u00e1tfog\u00f3 m\u00e1rkastrat\u00e9gi\u00e1d egy fontos r\u00e9sz\u00e9re.<\/p>\n\n\n\n
Az is fontos, hogy a k\u00e9p ne legyen zs\u00fafolt, mert elvonhatja a figyelmet a tartalomr\u00f3l, m\u00e9g akkor is, ha hom\u00e1lyos\u00edtod, vagy m\u00f3dos\u00edtasz a sz\u00edn\u00e9n. Ez persze nem azt jelenti, hogy nem haszn\u00e1lhatsz mozgalmas vagy m\u00e1s nagy hat\u00e1s\u00fa k\u00e9pet. Csak azt igyekezz elker\u00fclni, hogy a k\u00e9p elnyomja a tartalmat!<\/p>\n\n\n\n
Figyelj a min\u0151s\u00e9g\u00e9re!<\/h4>\n\n\n\n
Csak olyan k\u00e9peket haszn\u00e1lj, melyek min\u0151s\u00e9ge kiv\u00e1l\u00f3, mert egy\u00e9bk\u00e9nt s\u00e9r\u00fcl a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny. A felhaszn\u00e1l\u00f3k n\u00e9h\u00e1ny m\u00e1sodperc alatt eld\u00f6ntik, hogy a weboldaladon akarnak-e maradni vagy sem. A h\u00e1tt\u00e9rk\u00e9p az els\u0151 olyan elemek k\u00f6z\u00f6tt van, melyet megpillantanak. Ez\u00e9rt, ha azt akarod, hogy j\u00f3 benyom\u00e1st szerezzenek a weboldaladr\u00f3l, akkor j\u00f3 min\u0151s\u00e9g\u0171 k\u00e9pet kell haszn\u00e1lnod.<\/p>\n\n\n\n
A min\u00e9l nagyobb, ann\u00e1l jobb elv\u00e9t k\u00f6vesd, ha a min\u0151s\u00e9g a c\u00e9l. Ugyanakkor figyelni kell a m\u00e9retre is, hiszen egy \u00f3ri\u00e1si h\u00e1tt\u00e9rk\u00e9p jelent\u0151s m\u00e9rt\u00e9kben lelass\u00edthatja az oldalad. Ami fontos:<\/p>\n\n\n\n
ne t\u00f6m\u00f6r\u00edtsd olyan m\u00e9rt\u00e9kben a k\u00e9pet, hogy az torzuljon vagy pixeless\u00e9 v\u00e1ljon.<\/li>
Fot\u00f3k eset\u00e9ben, illetve olyan k\u00e9pekn\u00e9l, ahol sokf\u00e9le sz\u00edn, illetve sz\u00edn\u00e1tmenet jelenik meg, jpg-t\u00f6m\u00f6r\u00edt\u00e9st haszn\u00e1lj!<\/li>
Mint\u00e1hoz haszn\u00e1lt k\u00e9pekn\u00e9l viszont v\u00e1lts png-re!<\/li>
Ha arra van sz\u00fcks\u00e9ged, hogy k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9retekhez igaz\u00edtsd a k\u00e9pet \u00e9s megmaradjon a t\u00f6k\u00e9letes megjelen\u00e9s, akkor SVG-vel \u00e9rdemes pr\u00f3b\u00e1lkozni. Az SVG ugyanis lehet\u0151v\u00e9 teszi a k\u00e9pm\u00e9ret v\u00e1ltoztat\u00e1s\u00e1t min\u0151s\u00e9gveszt\u00e9s n\u00e9lk\u00fcl.<\/li>
Ha teljes k\u00e9perny\u0151sz\u00e9less\u00e9g\u0171 h\u00e1tt\u00e9rk\u00e9pet haszn\u00e1lsz, akkor 1920 pixeles sz\u00e9less\u00e9g\u0171 (full HD) k\u00e9pet alkalmazz!<\/li>
4K kijelz\u0151kre viszont \u00e9rdemes elt\u00e9r\u0151 h\u00e1tt\u00e9rk\u00e9pet haszn\u00e1lni.<\/li><\/ul>\n\n\n\n
Ker\u00fcld a stockfot\u00f3kat!<\/h4>\n\n\n\n
Ma m\u00e1r egyre kev\u00e9sb\u00e9 javasolj\u00e1k a szakemberek a weben mindenhol megjelen\u0151 stockfot\u00f3k haszn\u00e1lat\u00e1t a weboldalakon. Eredetis\u00e9gre \u00e9s k\u00fcl\u00f6nb\u00f6z\u0151s\u00e9gre kell t\u00f6rekedni, melyhez nem \u00e1rtanak a saj\u00e1t, egyedi k\u00e9pek sem. A nagym\u00e9ret\u0171, \u00e9s a weboldal imidzs\u00e9t alapvet\u0151en meghat\u00e1roz\u00f3 h\u00e1tt\u00e9rk\u00e9pekn\u00e9l m\u00e1r v\u00e9gk\u00e9pp nem javasolt a stockfot\u00f3k haszn\u00e1lata.<\/p>\n\n\n\n
Legyen a h\u00e1ttered reszponz\u00edv!<\/h4>\n\n\n\n
Att\u00f3l f\u00fcgg\u0151en, hogy milyen kijelz\u0151n n\u00e9zed a weboldalad, v\u00e1ltozik az, hogy mennyi l\u00e1tszik a h\u00e1tt\u00e9rk\u00e9pedb\u0151l. Ez k\u00fcl\u00f6n\u00f6sen akkor l\u00e9nyeges k\u00e9rd\u00e9s, amikor fot\u00f3r\u00f3l van sz\u00f3, mint h\u00e1tt\u00e9rk\u00e9pr\u0151l. Ami esetleg leny\u0171g\u00f6z\u0151nek hat egy hatalmas monitoron, az borzalmas hat\u00e1st v\u00e1lthat ki egy mobilon. A kulcsfontoss\u00e1g\u00fa r\u00e9szek ugyanis lev\u00e1g\u00e1sra ker\u00fclhetnek, \u00e9s a k\u00e9p \u00e9rtelmezhetetlenn\u00e9 v\u00e1lik. Pedig 2018-ban a felhaszn\u00e1l\u00f3k m\u00e1r azt v\u00e1rj\u00e1k, hogy a tartalom t\u00f6k\u00e9letesen igazodik minden \u00e1ltaluk haszn\u00e1lt eszk\u00f6z kijelz\u0151j\u00e9hez<\/strong>.<\/p>\n\n\n\n
Ehhez el\u0151sz\u00f6r is olyan k\u00e9pet kell v\u00e1lasztanod, mely j\u00f3l illeszkedik a k\u00fcl\u00f6nb\u00f6z\u0151 k\u00e9par\u00e1nyokhoz (f\u00fcgg\u0151leges, v\u00edzszintes, n\u00e9gyzet). Egy ilyen fot\u00f3 v\u00e1rhat\u00f3an j\u00f3l n\u00e9z majd ki nem csak asztali g\u00e9pen, hanem mobilon is. Arra is vetned kell egy pillant\u00e1st, hogy a CSS mik\u00e9nt kezeli a k\u00e9peket a k\u00fcl\u00f6nb\u00f6z\u0151 kijelz\u0151k eset\u00e9n. P\u00e9ld\u00e1ul a background-size: cover; tulajdons\u00e1ggal l\u00e1that\u00f3v\u00e1 teheted az eg\u00e9sz k\u00e9pet. Ugyanakkor val\u00f3sz\u00edn\u0171, hogy egy kis igaz\u00edt\u00e1sra sz\u00fcks\u00e9g lehet a megfelel\u0151 megjelen\u00edt\u00e9shez minden eszk\u00f6z\u00f6n.<\/p>\n\n\n\n
H\u00e1rom megold\u00e1s<\/strong> van arra, hogy a h\u00e1tt\u00e9rk\u00e9ped reszponz\u00edv legyen. El\u0151sz\u00f6r is, a h\u00e1tt\u00e9rk\u00e9p ism\u00e9tl\u0151dhet v\u00edzszintesen \u00e9s f\u00fcgg\u0151leges ir\u00e1nyban<\/strong> is, hasonl\u00f3an ahhoz, ahogy egy minta ism\u00e9tl\u0151dik. De ez alapvet\u0151en csak absztrakt k\u00e9pekn\u00e9l kivitelezhet\u0151 megold\u00e1s.<\/p>\n\n\n\n
Lehets\u00e9ges olyan k\u00e9pet kiv\u00e1lasztani, ami ugyanolyan j\u00f3l n\u00e9z ki kicsi \u00e9s nagy kijelz\u0151n is<\/strong>. Att\u00f3l f\u00fcgg\u0151en persze, hogy milyen r\u00e9szletezetts\u00e9g\u0171 a h\u00e1tt\u00e9rk\u00e9ped. Ez a megold\u00e1s \u00e1ltal\u00e1ban j\u00f3l m\u0171k\u00f6dik p\u00e9ld\u00e1ul t\u00e1jk\u00e9pekn\u00e9l, ugyanakkor embereket \u00e1br\u00e1zol\u00f3 fot\u00f3kn\u00e1l m\u00e1r nem annyira. Nem biztos, hogy egy 4K felbont\u00e1s\u00fa monitoron j\u00f3l mutat egy k\u00e9perny\u0151t bet\u00f6lt\u0151 emberi arc.<\/p>\n\n\n\n
Haszn\u00e1lj okos sk\u00e1l\u00e1z\u00e1st! Ez lenne a harmadik megold\u00e1s, ami els\u0151re val\u00f3sz\u00edn\u0171leg furcs\u00e1n hangzik. Ahelyett, hogy a k\u00e9pet mindig a megfelel\u0151 kijelz\u0151m\u00e9rethez igaz\u00edtan\u00e1d, \u00fagy kell m\u00e9retezned, hogy az nagyobb kijelz\u0151kn\u00e9l mindig t\u00f6bbet fedjen fel mag\u00e1b\u00f3l<\/strong>. Term\u00e9szetesen a legfontosabb r\u00e9szek minden kijelz\u0151m\u00e9retn\u00e9l l\u00e1that\u00f3ak maradn\u00e1nak, teh\u00e1t a kisebb, okostelefonos kijelz\u0151k\u00f6n is \u00e9rtelmezhet\u0151 maradna a h\u00e1tt\u00e9rk\u00e9p.<\/p>\n\n\n\n
Mindez megoldhat\u00f3 CSS-sel, illetve t\u00f6bb h\u00e1tt\u00e9rk\u00e9ppel a megfelel\u0151 felbont\u00e1sokra. Ennek a m\u00f3dszernek a haszn\u00e1lat\u00e1n\u00e1l azonban meg kell gy\u0151z\u0151dn\u00f6d arr\u00f3l, hogy a felhaszn\u00e1l\u00f3id mindig a legjobban optimaliz\u00e1lt verzi\u00f3j\u00e1t kapj\u00e1k a h\u00e1tt\u00e9rk\u00e9peknek.<\/p>\n\n\n\n
Haszn\u00e1lj finom text\u00far\u00e1kat!<\/h4>\n\n\n\n
Ha maradsz a mint\u00e1kn\u00e1l, akkor fontos, hogy olyat v\u00e1lassz, amelyn\u00e9l nem l\u00e1tszik sehol t\u00f6r\u00e9s az illeszt\u00e9sekn\u00e9l, vagyis egyetlen nagy k\u00e9pnek l\u00e1tszik az eg\u00e9sz oldalon. Arra azonban figyelj, hogy nem minden text\u00fara m\u0171k\u00f6dik minden kijelz\u0151m\u00e9retn\u00e9l, \u00e9s a nagym\u00e9ret\u0171 k\u00e9pf\u00e1jlok haszn\u00e1lata rontani fogja az oldalad bet\u00f6lt\u00e9si idej\u00e9t.<\/p>\n\n\n\n
Fontos a kifinomults\u00e1g, hacsak nem brutalista megjelen\u00e9sre t\u00f6rekszel. \u00c9s itt is figyelned kell arra, hogy ne terheld t\u00fal a mint\u00e1kkal a felhaszn\u00e1l\u00f3kat. Keress olyan k\u00e9peket, melyekre a finom vonalak \u00e9s sz\u00ednek jellemz\u0151ek, \u00e9s amelyek kontrasztosak a tartalmaddal.<\/p>\n\n\n\n
Kezdd nagyfelbont\u00e1s\u00fa k\u00e9pekkel, azt\u00e1n v\u00e1gj!<\/h4>\n\n\n\n
Amikor let\u00f6ltesz k\u00e9peket, hogy azokat felhaszn\u00e1ld majd h\u00e1tt\u00e9rk\u00e9pk\u00e9nt, akkor mindig a lehet\u0151 legnagyobb felbont\u00e1st v\u00e1laszd. Ez lehet\u0151s\u00e9get ny\u00fajt sz\u00e1modra a tov\u00e1bbi szerkeszt\u00e9sre, v\u00e1g\u00e1sra, hogy v\u00e9g\u00fcl a megfelel\u0151 m\u00e9ret\u0171 k\u00e9pet kapd. Hogy mi a megfelel\u0151 m\u00e9ret, a weboldaladon haszn\u00e1lt t\u00e1rol\u00f3 m\u00e9ret\u00e9t\u0151l f\u00fcgg. M\u00edg bizonyos text\u00far\u00e1k megfelel\u0151en ny\u00fajthat\u00f3k vagy ism\u00e9telhet\u0151k, m\u00e1s fot\u00f3kn\u00e1l ez nem m\u0171k\u00f6dik, \u00edgy v\u00e1gnod kell a megfelel\u0151 sz\u00e9less\u00e9gre. Haszn\u00e1lhatsz CSS m\u00e9dia lek\u00e9rdez\u00e9seket, hogy m\u00e1s kijelz\u0151m\u00e9retek megh\u00edvj\u00e1k a kisebb verzi\u00f3kat.<\/p>\n\n\n\n
V\u00e9g\u00fcl pedig, amit m\u00e9g fontos \u00e9szben tartani, hogy minden webdesign munka, \u00edgy a h\u00e1tt\u00e9rk\u00e9pek kiv\u00e1laszt\u00e1sa, megalkot\u00e1sa is az \u201c\u00fczenettel\u201d kezd\u0151dik, amit a weboldal k\u00f6zvet\u00edteni akar a k\u00f6z\u00f6ns\u00e9ge fel\u00e9. Az \u00fczenet pedig alapvet\u0151en szavakat jelent. Teh\u00e1t ak\u00e1rmilyen furcs\u00e1nak is t\u0171nik, a h\u00e1tt\u00e9rk\u00e9pek kiv\u00e1laszt\u00e1s\u00e1t azzal kezdd, hogy meghat\u00e1rozod mit is akarsz elmondani ezen k\u00e9pek el\u0151ter\u00e9ben, teh\u00e1t els\u0151 k\u00f6rben \u00f6ssze kell \u00e1ll\u00edtanod a sz\u00f6veg els\u0151 v\u00e1zlat\u00e1t.<\/p>\n\n\n\n
Ezzel a megold\u00e1ssal lehetsz csak biztos abban, hogy az \u00fczenet \u00e9s a h\u00e1tt\u00e9rk\u00e9p teljes \u00f6sszhangban lesznek egym\u00e1ssal. Ha nem \u00edgy teszel, akkor azt kock\u00e1ztatod, hogy a h\u00e1tt\u00e9rk\u00e9p k\u00edv\u00fcl\u00e1ll\u00f3v\u00e1 v\u00e1lik, \u00e9s el\u00fct majd a weboldal tartalm\u00e1t\u00f3l.<\/p>\n\n\n\n
Hogyan v\u00e1laszd ki a f\u0151oldali, hajt\u00e1s feletti nagym\u00e9ret\u0171 k\u00e9pet (hero image-et) a weboldaladra? <\/h3>\n\n\n\n
Most arr\u00f3l a k\u00e9pr\u0151l besz\u00e9l\u00fcnk, amit angolul hero image-nek h\u00edvunk, \u00e9s \u00e1ltal\u00e1ban beter\u00edti az eg\u00e9sz, hajt\u00e1s feletti r\u00e9szt h\u00e1tt\u00e9rk\u00e9nt, vagy legal\u00e1bbis nagy ter\u00fcletet foglal el ott. Erre a k\u00e9pre az jellemz\u0151, hogy a legnagyobb m\u00e9ret\u0171 k\u00e9p a weboldalon. Megjelenhet egyetlen ilyen k\u00e9p, vagy ak\u00e1r karuszelben t\u00f6bb is, \u00e9s lehet statikus vagy dinamikus. <\/p>\n\n\n\n
Mi\u00e9rt van fontos szerepe egy weboldalon a hero k\u00e9pnek?<\/h4>\n\n\n\n
Mert felkelti az \u00e9rdekl\u0151d\u00e9st \u00e9s kialak\u00edtja az els\u0151 benyom\u00e1st<\/strong> – ahogy meg\u00e9rkezik a l\u00e1togat\u00f3 a weboldaladra, az els\u0151 vizu\u00e1lis benyom\u00e1st a hero image-t\u0151l kapja. Ezt a k\u00e9pet fogja azonos\u00edtani a c\u00e9geddel, a weboldaladdal. Fontos, hogy ez a k\u00e9p figyelemfelkelt\u0151 legyen, mert k\u00fcl\u00f6nben nem fogod felkelteni a l\u00e1togat\u00f3 \u00e9rdekl\u0151d\u00e9s\u00e9t. <\/li>
Mert inform\u00e1ci\u00f3t ad \u00e1t<\/strong> – a felhaszn\u00e1l\u00f3k sokkal gyorsabban feldolgozz\u00e1k a k\u00e9pi inform\u00e1ci\u00f3kat, mint a sz\u00f6vegeseket. A hero k\u00e9p sem csak azt a c\u00e9lt szolg\u00e1lja, hogy vizu\u00e1lisan leny\u0171g\u00f6zze a l\u00e1togat\u00f3t, hanem emellett inform\u00e1ci\u00f3t is \u00e1t kell adnia. Azt az \u00fczenetet, amit el akarsz mondani a c\u00e9gedr\u0151l, term\u00e9keidr\u0151l, szolg\u00e1ltat\u00e1saidr\u00f3l.<\/li>
Mert ir\u00e1ny\u00edtja a l\u00e1togat\u00f3t<\/strong> – a k\u00e9p kompoz\u00edci\u00f3ja a megfelel\u0151 ir\u00e1nyba k\u00e9pes vezetni a felhaszn\u00e1l\u00f3t a weboldalon, p\u00e9ld\u00e1ul a tekintet\u00e9t a call to action gombra ir\u00e1ny\u00edtja.<\/li>
Mert \u00e9rzelmet v\u00e1lt ki<\/strong> – mint tudjuk az \u00e9rzelmek fontos szerepet j\u00e1tszanak a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyben, mely \u00e1ltal a weboldal \u00e9s l\u00e1togat\u00f3i k\u00f6z\u00f6tti kommunik\u00e1ci\u00f3 ember-szer\u0171bb\u00e9 v\u00e1lik. A hero k\u00e9pek t\u00f6k\u00e9letesen alkalmasak arra, hogy \u00e9rzelmeket adjanak \u00e1t a k\u00e9p tartalm\u00e1n, a sz\u00edneken, form\u00e1kon kereszt\u00fcl, kialak\u00edtva m\u00e1r az els\u0151 pillanatokban a k\u00edv\u00e1nt \u00e9rzelmi r\u00e1hangol\u00f3d\u00e1st a weboldalra \u00e9s a term\u00e9kre.<\/li>
Mert a l\u00e1togat\u00f3k szeretik a sz\u00e9p weboldalakat<\/a><\/strong> – ha a hero image eszt\u00e9tikailag vonz\u00f3, akkor m\u00e1r egy nagy l\u00e9p\u00e9st tett\u00e9l abba az ir\u00e1nyba, hogy a weboldalad sz\u00e9p legyen. Mi\u00e9rt fontos ez? Mert a l\u00e1togat\u00f3k sok hib\u00e1t megbocs\u00e1tanak az olyan weboldalaknak, melyek a sz\u00e9ps\u00e9g\u00fckkel leny\u0171g\u00f6zik \u0151ket, \u00edgy k\u00f6nnyebben kialak\u00edthatod a j\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Milyen t\u00edpus\u00fa k\u00e9peket haszn\u00e1lhatsz egy hero image-n\u00e9l?<\/h4>\n\n\n\n
Az, hogy milyen t\u00edpus\u00fa k\u00e9p ker\u00fcl a hajt\u00e1s f\u00f6l\u00f6tti ter\u00fcletre \u00e9s az mit \u00fczen a l\u00e1togat\u00f3knak, att\u00f3l f\u00fcgg, hogy az adott oldalnak mi a c\u00e9lja, \u00e9s milyen t\u00edpus\u00fa weboldalr\u00f3l van sz\u00f3. Term\u00e9szetesen azonnal meg kell fognia a l\u00e1togat\u00f3t, ugyanakkor ki kell fejeznie a weboldalon tal\u00e1lhat\u00f3 aj\u00e1nlat vagy inform\u00e1ci\u00f3 el\u0151nyeit term\u00e9szet\u00e9t. <\/p>\n\n\n\n
\u00c9ppen ez\u00e9rt a web\u00e1ruh\u00e1zak jellemz\u0151en olyan hero k\u00e9pet haszn\u00e1lnak, mely a legfelkapottabb term\u00e9k\u00fcket, legjobb aj\u00e1nlatukat mutatja be. Egy hero image lehet:<\/p>\n\n\n\n
Fot\u00f3<\/strong> – melynek az az el\u0151nye, hogy egy az egyben k\u00e9pes megmutatni a term\u00e9ket, vagyis azt, amivel az \u00fcgyf\u00e9l a val\u00f3s\u00e1gban is tal\u00e1lkozni fog, ha megveszi. A fot\u00f3k nagyon vil\u00e1gosak, k\u00f6nnyen \u00e9rtelmezhet\u0151k az emberek sz\u00e1m\u00e1ra. Egy weboldalon haszn\u00e1lva gyorsan, er\u0151s asszoci\u00e1ci\u00f3kat kelt, melyek azt\u00e1n l\u00e9trehozz\u00e1k a megfelel\u0151 \u00e9rzelmet a felhaszn\u00e1l\u00f3ban. R\u00e1ad\u00e1sul a web\u00e1ruh\u00e1zakban a fot\u00f3 az alapvet\u0151 term\u00e9k-bemutat\u00e1si eszk\u00f6z, ahol fontos azt az elvet \u00e9rv\u00e9nyes\u00edteni, hogy „azt kapod, amit l\u00e1tsz”. <\/li>
Illusztr\u00e1ci\u00f3<\/strong> – komoly webdesign-trendd\u00e9 v\u00e1lt<\/a> az elm\u00falt \u00e9vekben a rajzolt illusztr\u00e1ci\u00f3k<\/a> haszn\u00e1lata. Grafik\u00e1kkal remek\u00fcl \u00e1t lehet adni inform\u00e1ci\u00f3kat amellett, hogy kifejezik a weboldal vizu\u00e1lis eredetis\u00e9g\u00e9t.<\/li>
3D-s grafik\u00e1k<\/strong> – a rajzolt illusztr\u00e1ci\u00f3k egy egyre n\u00e9pszer\u0171bb\u00e9 v\u00e1l\u00f3 t\u00edpusa a 3D-s grafik\u00e1k\u00e9. Az ilyen k\u00e9pek k\u00e9sz\u00edt\u00e9se persze el\u00e9g k\u00f6lts\u00e9ges lehet, ugyanakkor egy j\u00f3l elk\u00e9sz\u00edtett 3D-s grafika er\u0151teljes hat\u00e1st kelt. Ez\u00e9rt is olyan n\u00e9pszer\u0171ek hero image-k\u00e9nt.<\/li><\/ul>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Mire figyelj a hero image kiv\u00e1laszt\u00e1s\u00e1n\u00e1l?<\/h4>\n\n\n\n
A felbont\u00e1sra<\/h5>\n\n\n\n
A hero image eset\u00e9ben fontos a min\u0151s\u00e9g, ami persze azzal j\u00e1r, hogy n\u0151 a m\u00e9ret, \u00e9s ezzel lassulni fog az oldal bet\u00f6lt\u0151d\u00e9se. A lass\u00fa bet\u00f6lt\u0151d\u00e9ssel pedig azt kock\u00e1zatod, hogy a felhaszn\u00e1l\u00f3k id\u0151 el\u0151tt lel\u00e9pnek. Fontos teh\u00e1t a lehet\u0151 legjobb optimaliz\u00e1l\u00e1s, \u00e9s hogy meglegyen az egyens\u00faly a m\u00e9ret \u00e9s a min\u0151s\u00e9g k\u00f6z\u00f6tt.<\/p>\n\n\n\n
Legyen \u00e9rtelme<\/h5>\n\n\n\n
Kirakhatsz a hajt\u00e1s f\u00f6l\u00e9 egy gy\u00f6ny\u00f6r\u0171 naplement\u00e9r\u0151l k\u00e9sz\u00fclt fot\u00f3t, de ha mondjuk fogorvosi szolg\u00e1ltat\u00e1sokat k\u00edn\u00e1lsz, akkor ennek nem igaz\u00e1n van \u00e9rtelme. A k\u00e9pnek el kell mondania valamit a weboldaladr\u00f3l \u00e9s a c\u00e9gedr\u0151l. A relevanci\u00e1val adhatsz \u00e9rt\u00e9ket a l\u00e1togat\u00f3knak, \u00e9s ezzel tarthatod fenn az \u00e9rdekl\u0151d\u00e9s\u00fcket.<\/p>\n\n\n\n
Mutassa meg, miben k\u00fcl\u00f6nb\u00f6z\u00f6l a t\u00f6bbiekt\u0151l<\/h5>\n\n\n\n
Ne f\u00e9lj megmutatni m\u00e1r a hero image-ben sem, hogy miben vagy jobb a konkurenci\u00e1n\u00e1l, mit\u0151l vagy m\u00e1s. Ha itt ezt ki tudod fejezni egy k\u00e9ppel, akkor az seg\u00edt abban, hogy a l\u00e1togat\u00f3k el\u0151bb meg\u00e9rts\u00e9k a szolg\u00e1ltat\u00e1sod l\u00e9nyeg\u00e9t. <\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Ne csak egyet v\u00e1lassz<\/h5>\n\n\n\n
Nagyon val\u00f3sz\u00edn\u0171, hogy amikor elk\u00e9pzeled a weboldalad, akkor van egy k\u00e9p a fejedben arr\u00f3l, hogy milyen k\u00e9pet szeretn\u00e9l l\u00e1tni a f\u0151oldal tetej\u00e9n. Nem \u00e1rt azonban, ha t\u00f6bb lehet\u0151s\u00e9get is \u00f6sszegy\u0171jtesz, \u00e9s gondosan m\u00e9rlegelsz, miel\u0151tt v\u00e1lasztasz. Mert nem biztos, hogy az a legjobb v\u00e1laszt\u00e1s a val\u00f3s\u00e1gban, amit Te els\u0151k\u00e9nt annak gondolsz.<\/p>\n\n\n\n
V\u00e1ltson ki \u00e9rzelmeket<\/h5>\n\n\n\n
Mindig nagyobb es\u00e9lyed van a konverzi\u00f3ra, ha a l\u00e1togat\u00f3khoz \u00e9rzelmi szinten is kapcsol\u00f3dni tudsz. A k\u00e9pnek azt az \u00e9rzelmet kell kiv\u00e1ltania, amit \u00e9rezni\u00fck kellene szerinted a l\u00e1togat\u00f3knak a weboldaladon. T\u00falz\u00e1sokba ugyanakkor ne ess, mert az visszafel\u00e9 is els\u00fclhet.<\/p>\n\n\n\n
Legyen \u00f6sszhangban a tartalommal<\/h5>\n\n\n\n
Ha p\u00e9ld\u00e1ul olyan hero image-et haszn\u00e1lsz, mely minimalista \u00e9s sok rajta a whitespace, akkor nem j\u00f3, ha a lejjebb g\u00f6rgetve egy zs\u00fafolt tartalommal tal\u00e1lja szembe mag\u00e1t a l\u00e1togat\u00f3. Ilyenkor \u00f6sszef\u00fcgg\u00e9stelen a designnyelv, \u00e9s ez csak megzavarja a felhaszn\u00e1l\u00f3t. Fontos teh\u00e1t, hogy \u00f6ssze legyen hangolva a k\u00e9p \u00e9s a weboldal t\u00f6bbi r\u00e9sze, melyet a hero image kieg\u00e9sz\u00edt\u00e9 \u00e9s er\u0151s\u00edt.<\/p>\n\n\n\n
Minden kijelz\u0151n j\u00f3l mutasson<\/h5>\n\n\n\n
A fot\u00f3dnak minden m\u00e9ret\u0171 kijelz\u0151n egyform\u00e1n hat\u00e1sosnak kell lennie. Lehet, hogy ami j\u00f3l mutat egy PC monitor\u00e1n, nem \u00e9rtelmezhet\u0151 okostelefon kijelz\u0151j\u00e9n, mert kicsiben m\u00e1r nem l\u00e1tszanak j\u00f3l a r\u00e9szletek.<\/p>\n\n\n\n
Emelje ki a CTA-t<\/h5>\n\n\n\n
J\u00f3 p\u00e1r oldalon a CTA a hajt\u00e1s feletti r\u00e9szre ker\u00fcl. Ebben az esetben a k\u00e9p v\u00e1laszt\u00e1s\u00e1n\u00e1l a CTA-t is figyelembe kell venni, hiszen a legfontosabb a kattint\u00e1s. A k\u00e9pnek seg\u00edtenie kell abban, hogy a l\u00e1togat\u00f3 figyelme a CTA-ra ir\u00e1nyuljon, amikor meg\u00e9rkezik az oldalon, an\u00e9lk\u00fcl, hogy er\u0151ltetetten nagy vagy felt\u0171n\u0151 lenne a gomb.<\/p>\n\n\n\n
Er\u0151s\u00edtse a m\u00e1rk\u00e1d<\/h5>\n\n\n\n
Ha a weboldaladon egy bizonyos sz\u00edns\u00e9m\u00e1t haszn\u00e1lsz, mely passzol a log\u00f3dban szerepl\u0151 sz\u00ednekhez, akkor c\u00e9lszer\u0171, ha a f\u0151 k\u00e9pen is ezek a sz\u00ednek k\u00f6sz\u00f6nnek vissza, \u00e9s domin\u00e1lnak. Term\u00e9szetesen egy k\u00e9p teljes sz\u00ednpalett\u00e1ja \u00e1ltal\u00e1ban sz\u00e9lesebb, mint a m\u00e1rka sz\u00ednei, de egy overlay-jel vagy egy gradienssel minden k\u00e9p a m\u00e1rka sz\u00edn\u00e9hez igaz\u00edthat\u00f3.<\/p>\n\n\n\n
Friss\u00edt\u00e9s, 2021.08.02.:<\/em><\/p>\n\n\n\n
Milyen hib\u00e1kat ne k\u00f6vess el a hero image-ed kiv\u00e1laszt\u00e1s\u00e1n\u00e1l?<\/h3>\n\n\n\n
Ha a hero image-n\u00e9l elrontasz valamit, akkor az eg\u00e9sz weboldalad k\u00e1r\u00e1t l\u00e1tja, hiszen ez a f\u0151 k\u00e9p a weboldaladon, a legels\u0151 benyom\u00e1st alak\u00edtja ki a l\u00e1togat\u00f3ban. De milyen hib\u00e1k mer\u00fclhetnek fel?<\/p>\n\n\n\n
T\u00fal \u00e1ltal\u00e1nos k\u00e9pet v\u00e1lasztasz<\/h4>\n\n\n\n
Ha a k\u00e9ped nem mond semmit a felhaszn\u00e1l\u00f3nak, sablonos, nem mutat semmit, vagy pont olyan, mint a konkurenci\u00e1\u00e9, nem kelti fel a figyelmet, akkor nem is fog igaz\u00e1n m\u0171k\u00f6dni. M\u00e9g ha fel is haszn\u00e1lsz m\u00e1s k\u00e9peket inspir\u00e1ci\u00f3k\u00e9nt, pr\u00f3b\u00e1lj meg egyedi lenni, ahelyett, hogy k\u00f6vetn\u00e9d a t\u00f6meget.<\/p>\n\n\n\n
$\"\"$
Hero image<\/figcaption><\/figure>\n\n\n\n
Stockfot\u00f3t haszn\u00e1lsz<\/h4>\n\n\n\n
Ha m\u00e1r a semmitmond\u00f3, \u00e1ltal\u00e1nos k\u00e9pekn\u00e9l tartunk, akkor meg kell eml\u00edten\u00fcnk itt is a stockfot\u00f3kat, melyek tipikusan ebbe a kateg\u00f3ri\u00e1ba tartoznak. Gyors \u00e9s olcs\u00f3 megold\u00e1st jelentenek, csak az a baj, hogy a legt\u00f6bb\u00f6n l\u00e1tszik az eredetis\u00e9g hi\u00e1nya, r\u00e1ad\u00e1sul m\u00e1s weboldalakon is tal\u00e1lkozhatnak a te f\u0151 k\u00e9peddel a l\u00e1togat\u00f3k. Teh\u00e1t, ha m\u00e1shol nem is, legal\u00e1bb a hero image-n\u00e9l ker\u00fcld el a stockfot\u00f3kat!<\/p>\n\n\n\n
T\u00falzs\u00fafolt k\u00e9pet haszn\u00e1lsz<\/h4>\n\n\n\n
Lehet, hogy Te is szeretn\u00e9d a lehet\u0151 legt\u00f6bb inform\u00e1ci\u00f3t elhelyezni a hajt\u00e1s felett a weboldalon, de ne tedd! Sokan akarnak t\u00fal sokat elmondani a hajt\u00e1s feletti r\u00e9szen: \u00f6sszetett k\u00e9p, t\u00f6bbf\u00e9le sz\u00f6veg, CTA-k, anim\u00e1ci\u00f3k, egy\u00e9b weboldalelemek is felker\u00fclnek ide. <\/p>\n\n\n\n
Persze hasznos, ha a fontos inform\u00e1ci\u00f3k a hajt\u00e1s f\u00f6l\u00e9 ker\u00fclnek, azonban nem tesz j\u00f3t a weboldalad vizu\u00e1lis megjelen\u00e9s\u00e9nek, \u00edgy pedig a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyre is negat\u00edv hat\u00e1ssal lehet. Ez\u00e9rt mindig csak a legsz\u00fcks\u00e9gesebb m\u00e9rt\u00e9kben bonyol\u00edtsd hero image-et \u00e9s ami r\u00e1ker\u00fcl: haszn\u00e1lj egy egyszer\u0171 k\u00e9pet, melyet a m\u00e1sodperc t\u00f6rtr\u00e9sze alatt felfog a l\u00e1togat\u00f3, \u00e9s a sz\u00f6veges \u00fczenetet se bonyol\u00edtsd t\u00fal.<\/p>\n\n\n\n
F\u00e9lre\u00e9rthet\u0151 a k\u00e9p<\/h4>\n\n\n\n
A hero image nem hazudhat az embereknek, nem vezetheti f\u00e9lre a l\u00e1togat\u00f3t azzal, amit kifejez r\u00f3lad, a c\u00e9gedr\u0151l, term\u00e9keidr\u0151l, szolg\u00e1ltat\u00e1sodr\u00f3l. Ez az els\u0151 benyom\u00e1s a weboldaladr\u00f3l, ez\u00e9rt fontos, hogy ne csak egyedi, hanem \u0151szinte is legyen a l\u00e9p.<\/p>\n\n\n\n
T\u00fal hars\u00e1ny sz\u00ednek<\/h4>\n\n\n\n
A j\u00f3 sz\u00ednpaletta \u00e9s a megfelel\u0151 kontraszt a hero image-edn\u00e9l az eg\u00e9sz weboldaladr\u00f3l szerzett benyom\u00e1st megv\u00e1ltoztathatja. Fontos \u00e1tgondolni, hogy milyen sz\u00edneket haszn\u00e1lsz, azok \u00e9rzelmi hat\u00e1sa alapj\u00e1n. Sokan az egyedis\u00e9gre, a figyelem felkelt\u00e9s\u00e9re t\u00f6rekedve t\u00fal sok vagy t\u00fal er\u0151teljes sz\u00edneket haszn\u00e1lnak a hero image-n\u00e9l. Pedig, ha rossz a sz\u00ednv\u00e1laszt\u00e1s, t\u00fal hars\u00e1nyak a sz\u00ednek, az elijesztheti az embereket.<\/p>\n\n\n\n
Nem gondolsz a weboldalad sebess\u00e9g\u00e9re<\/h4>\n\n\n\n
Ha t\u00fal nagy f\u00e1jlm\u00e9ret\u0171 k\u00e9pet haszn\u00e1lsz, az lelass\u00edthatja a weboldalad bet\u00f6lt\u0151d\u00e9s\u00e9t. Ha pedig t\u00fal lassan t\u00f6lt\u0151dik be a k\u00e9p \u00e9s \u00edgy az oldalad<\/a>, akkor az negat\u00edv hat\u00e1ssal lesz a visszafordul\u00e1si ar\u00e1nyra. Hogy mekkora a k\u00e9pf\u00e1jlod m\u00e9rete, az t\u00f6bb t\u00e9nyez\u0151 f\u00fcggv\u00e9nye (a linkelt bejegyz\u00e9sben sokat \u00edrtunk r\u00f3la), de t\u00f6bbek k\u00f6z\u00f6tt hat\u00e1ssal van r\u00e1 az is, hogy mi l\u00e1that\u00f3 a k\u00e9pen. Ez\u00e9rt mindig vedd figyelembe a k\u00e9pv\u00e1laszt\u00e1sn\u00e1l a f\u00e1jl m\u00e9ret\u00e9t is.<\/p>\n\n\n\n
Hogyan haszn\u00e1lj stockfot\u00f3kat a weboldaladon?<\/strong><\/h2>\n\n\n\n
Webdesign-tan\u00e1csk\u00e9nt gyakran elhangzik – mint ahogy ebben a bejegyz\u00e9sben is kor\u00e1bban -, hogy ne haszn\u00e1ljunk stockfot\u00f3kat a weboldalunkon, mivel ezek nem eredetiek, mesterk\u00e9ltnek t\u0171nnek, \u00e9s nem \u00e1rulnak el semmit r\u00f3lad \u00e9s a c\u00e9gedr\u0151l. Ez igaz, de ha m\u00e9gis ez t\u0171nik az egyetlen j\u00e1rhat\u00f3 \u00fatnak, akkor mi a legjobb megold\u00e1s a haszn\u00e1latukra?<\/p>\n\n\n\n
A stockfot\u00f3k jelent\u0151s r\u00e9sze nagyon sablonos. Mindenkinek felr\u00e9mlenek a furcsa mosolyra h\u00faz\u00f3d\u00f3 arcokr\u00f3l vagy az \u00fczletemberek k\u00e9zfog\u00e1sair\u00f3l k\u00e9sz\u00fclt k\u00e9pek. Ugyanakkor j\u00f3 v\u00e1laszt\u00e1s eset\u00e9n olcs\u00f3k – ak\u00e1r ingyenesek – \u00e9s j\u00f3 min\u0151s\u00e9g\u0171ek, s\u0151t m\u00e9g ak\u00e1r jobban is teljes\u00edthetnek, mint azok a fot\u00f3k, melyeket mi k\u00e9sz\u00edt\u00fcnk. Megfelel\u0151 haszn\u00e1lattal seg\u00edts\u00e9get jelenhetnek a weboldalunknak, a hirdet\u00e9seinknek, vagy blogbejegyz\u00e9seinknek.<\/p>\n\n\n\n
El\u0151sz\u00f6r is: gondosan v\u00e1lassz!<\/h4>\n\n\n\n
Persze ehhez az kell, hogy ne puszt\u00e1n egy olyan k\u00e9pet v\u00e1lassz ki, ami \u201cj\u00f3l n\u00e9z ki\u201d, hanem egy olyat, amivel \u00e9rzelmeket v\u00e1lthatsz ki, \u00e9s ami k\u00fcl\u00f6nb\u00f6zik azokt\u00f3l, amit mindenhol m\u00e1shol megtal\u00e1lsz a weben.<\/p>\n\n\n\n
Az emberek remek\u00fcl eml\u00e9keznek a k\u00e9pekre. Ha valamit hallanak, akkor annak m\u00e1r csak 10 sz\u00e1zal\u00e9k\u00e1ra eml\u00e9keznek 3 nap m\u00falva. Ugyanakkor, ha az inform\u00e1ci\u00f3 mell\u00e9 teszel egy k\u00e9pet is, akkor 65 sz\u00e1zal\u00e9kra n\u00f6veled az ar\u00e1nyt. Gondolj a hirdet\u00e9sekre: benned is ink\u00e1bb a k\u00e9pek maradnak meg, mint a sz\u00f6vegek, nem? Ennek oka, hogy az agyk\u00e9reg 30 sz\u00e1zal\u00e9ka r\u00e9szt vesz a vizu\u00e1lis jelek feldolgoz\u00e1s\u00e1ban<\/a>, m\u00edg az \u00e9rint\u00e9sekre csak 8 sz\u00e1zal\u00e9k jut, a hall\u00e1sra pedig 3 sz\u00e1zal\u00e9k.<\/p>\n\n\n\n
Ha egy \u00e1ltalad haszn\u00e1lt stockfot\u00f3 ugyanaz, mint amit t\u00f6bb m\u00e1s weboldalon is l\u00e1thattak az emberek, akkor az tudat alatt negat\u00edv benyom\u00e1st kelt benn\u00fck. Az emberek kor\u00e1bbi tapasztalataikat vet\u00edtik r\u00e1 a Te fot\u00f3dra, ami cs\u00f6kkenti a bizalmat, \u00e9s negat\u00edv asszoci\u00e1ci\u00f3kat kelthet. Vagyis ahelyett, hogy er\u0151s\u00edten\u00e9k a tartalmadat ezek a sokat l\u00e1tott k\u00e9pek, ink\u00e1bb rontasz a helyzeten.<\/p>\n\n\n\n
A hiteless\u00e9g fontoss\u00e1ga<\/h4>\n\n\n\n
A k\u00f6z\u00f6ss\u00e9gi m\u00e9dia vil\u00e1g\u00e1ban a hiteless\u00e9g a kulcs. Ma m\u00e1r a k\u00f6z\u00f6ss\u00e9gi m\u00e9di\u00e1hoz fordulunk, ha valami val\u00f3dit szeretn\u00e9nk l\u00e1tni, mely az ismer\u0151seinkt\u0151l vagy ak\u00e1r a kedvelt m\u00e1rk\u00e1inkt\u00f3l \u00e9rkezik. \u00c1ltal\u00e1ban a legeredetibb \u00e9s leghitelesebb tartalom a leg\u00e9rdekesebb is. Ez l\u00e1tszik p\u00e9ld\u00e1ul a Stories siker\u00e9n\u00e9l a Snapchat vagy ak\u00e1r az Instagram eset\u00e9ben.<\/p>\n\n\n\n
A legt\u00f6bb stockfot\u00f3val az a baj, hogy nem hitelesek. Ezekkel a k\u00e9pekkel nem tudsz igaz\u00e1n kapcsol\u00f3dni a k\u00f6z\u00f6ns\u00e9gedhez. T\u00fals\u00e1gosan m\u0171viek, mesterk\u00e9ltek, legt\u00f6bbsz\u00f6r nem tudj\u00e1k a hiteless\u00e9g ill\u00fazi\u00f3j\u00e1t kelteni.<\/p>\n\n\n\n
A hiteless\u00e9g rendk\u00edv\u00fcl fontos, mivel az emberek \u00f6szt\u00f6n\u00f6sen azokat a m\u00e1rk\u00e1kat kedvelik meg, melyek hitelesebbnek t\u0171nnek, mint a versenyt\u00e1rsaik. A hiteless\u00e9g valami olyasmit jelent, hogy a dolgok, amiket mondunk \u00e9s tesz\u00fcnk azonosak azzal, mint amiben hisz\u00fcnk. \u00c9s nem csak az\u00e9rt mondunk valamit, hogy az seg\u00edtsen eladni a term\u00e9k\u00fcnket vagy szolg\u00e1ltat\u00e1sunkat. Amikor egy k\u00e9pre r\u00e1tekint\u00fcnk, akkor a m\u00e1sodperc t\u00f6rtr\u00e9sze alatt eld\u00f6ntj\u00fck, hogy az hiteles vagy sem. Ha egy fot\u00f3 hamisnak n\u00e9z, vagy b\u00e1rmi m\u00e1s m\u00f3don hiteltelennek t\u0171nik, akkor elvesz\u00edtj\u00fck a m\u00e1rka ir\u00e1nti bizalmat.<\/p>\n\n\n\n
M\u00e1sr\u00e9szt viszont egy hiteles k\u00e9p bizalmat, megb\u00edzhat\u00f3s\u00e1got jelez. De mi kell ahhoz, hogy egy k\u00e9p hitelesnek t\u0171nj\u00f6n? Egyr\u00e9szt val\u00f3di emberek legyen rajta. Nyilv\u00e1nval\u00f3, hogy a stockfot\u00f3kon l\u00e1that\u00f3 emberek modellek. Teh\u00e1t, amikor stockfot\u00f3t kell v\u00e1lasztanod, akkor azt kell megfontolnod, hogy<\/p>\n\n\n\n
A k\u00e9pen l\u00e1that\u00f3 emberek eredetinek vagy pedig modelleknek t\u0171nnek?<\/li>
T\u00f6k\u00e9letes a hajuk, foguk, ruh\u00e1juk?<\/li><\/ul>\n\n\n\n
Amikor kiv\u00e1lasztasz egy fot\u00f3t, akkor olyat keress, ami val\u00f3s\u00e1gosnak t\u0171nik. Ehhez tartozik, hogy az \u00e1ltaluk bemutatott helyzetek se legyenek mesterk\u00e9ltek. Az emberek nem vigyorognak a nap 24 \u00f3r\u00e1j\u00e1ban, ugyanakkor a stockfot\u00f3kn\u00e1l ez nagyon gyakori. Nyilv\u00e1n az emberek szeretnek mosolyg\u00f3 embereket l\u00e1tni, ez pozit\u00edv \u00e9rz\u00e9seket kelt benn\u00fck, ugyanakkor a term\u00e9szetess\u00e9gnek nem tesz j\u00f3t a meredt m\u0171mosoly. Teh\u00e1t olyan be\u00e1ll\u00edt\u00e1sokat keress, ahol nem p\u00f3zolnak a szerepl\u0151k.<\/p>\n\n\n\n
$\"Egy$ <\/figure>\n\n\n\n
Mik\u00e9nt tal\u00e1ld meg a t\u00f6k\u00e9letes stockfot\u00f3t?<\/h3>\n\n\n\n
A stockfot\u00f3k \u00fagy vannak kital\u00e1lva, hogy a tartalmak egy sz\u00e9les sk\u00e1l\u00e1j\u00e1hoz j\u00f3l passzoljanak. Ez bizonyos szempontb\u00f3l remek dolog, m\u00e1sfel\u0151l viszont szerencs\u00e9tlen. A k\u00e9pek ez\u00e1ltal t\u00fals\u00e1gosan \u00e1ltal\u00e1nosnak t\u0171nhetnek. Pedig amikor a c\u00e9ges tartalmadhoz k\u00e9pet keresel, akkor az a c\u00e9lod, hogy valahogy kit\u0171nj, megk\u00fcl\u00f6nb\u00f6ztesd magad. Ezt figyelembe v\u00e9ve, hogyan v\u00e1laszthatod ki a megfelel\u0151 fot\u00f3t?<\/p>\n\n\n\n
Haszn\u00e1lj olyan k\u00e9peket, amelyek j\u00f3l illenek a tartalmadhoz!<\/h4>\n\n\n\n
A k\u00e9peknek nem olyannak kell lenni\u00fck, mint amelyek teljesen v\u00e9letlen\u00fcl cs\u00f6ppentek bele a tartalomba. Ahol lehets\u00e9ges, a k\u00e9pek eg\u00e9sz\u00edts\u00e9k ki a tartalmadat, min\u00e9l jobban illeszkedjenek hozz\u00e1. Egy blogbejegyz\u00e9sn\u00e9l a felhaszn\u00e1l\u00f3k m\u00e1r a k\u00e9p alapj\u00e1n tudj\u00e1k meg, hogy mir\u0151l sz\u00f3l a tartalmad.<\/p>\n\n\n\n
Gondolj a felhaszn\u00e1l\u00f3idra!<\/h4>\n\n\n\n
Amikor a megfelel\u0151 k\u00e9pet akarod megtal\u00e1lni, akkor mindig a k\u00f6z\u00f6ns\u00e9gedre kell gondolnod el\u0151sz\u00f6r. Nyilv\u00e1n Te is azt szeretn\u00e9d, ha egy er\u0151s vizu\u00e1lis kapocs alakulna ki a k\u00e9p \u00e9s a m\u00e1rk\u00e1d k\u00f6z\u00f6tt, mely az \u00e1ltalad kigondolt \u00fczenetet k\u00f6zvet\u00edti.<\/p>\n\n\n\n
Olyan fot\u00f3t v\u00e1lassz, amelyik meger\u0151s\u00edti a m\u00e1rk\u00e1dat!<\/li>
A k\u00e9ped ne csak egyszer\u0171en kit\u00f6ltse a teret.<\/li>
Olyan k\u00e9pet haszn\u00e1lj, melynek jelent\u00e9se van, \u00e9s lehet\u0151s\u00e9get k\u00edn\u00e1l arra, hogy kapcsolatba l\u00e9pj a k\u00f6z\u00f6ns\u00e9geddel!<\/li><\/ul>\n\n\n\n
Haszn\u00e1lj \u00faj k\u00e9peket!<\/h4>\n\n\n\n
A weben \u00e1ltal\u00e1ban olyan stockfot\u00f3k bukkannak fel, melyeket m\u00e1shol m\u00e1r ezerszer l\u00e1ttunk. Lehet, hogy egy\u00e9bk\u00e9nt ezek a k\u00e9pek a legszebbek \u00e9s a legjobbak, azonban m\u00e9gsem a legjobb d\u00f6nt\u00e9s ezeket haszn\u00e1lni. Ink\u00e1bb az \u00fajabb, frissebb, kevesebbet haszn\u00e1lt k\u00e9peket keresd meg. A TinEye<\/a> seg\u00edts\u00e9g\u00e9vel m\u00e9g azt is meg\u00e1llap\u00edthatod, hogy az adott k\u00e9pet m\u00e1r h\u00e1nyszor haszn\u00e1ltak a weben.<\/p>\n\n\n\n
Ellen\u0151rizd a jogokat!<\/h4>\n\n\n\n
Miel\u0151tt kitenn\u00e9l a weboldaladra vagy a hirdet\u00e9sedbe egy k\u00e9pet, ellen\u0151rizd, hogy milyen licenc vonatkozik r\u00e1, illetve adott esetben azt is, hogy a rajta szerepl\u0151 szem\u00e9lyek enged\u00e9lyezt\u00e9k-e a fot\u00f3 felhaszn\u00e1l\u00e1s\u00e1t. Akad n\u00e9h\u00e1ny olyan oldal, mely ingyenes fot\u00f3kat k\u00edn\u00e1l, viszont lehetnek felt\u00e9teleik a haszn\u00e1latukra vonatkoz\u00f3an. N\u00e9h\u00e1ny licenc csak a szem\u00e9lyes haszn\u00e1latot engedi, vagy a fot\u00f3s hozz\u00e1j\u00e1rul\u00e1s\u00e1t ig\u00e9nyli, esetleg nem enged\u00e9lyezi a k\u00e9p \u00e1talak\u00edt\u00e1s\u00e1t. Ez\u00e9rt mindig gondosan olvasd el, hogy milyen felt\u00e9telek vonatkoznak egy k\u00e9p haszn\u00e1lat\u00e1ra!<\/p>\n\n\n\n
Hogyan teheted eredetibb\u00e9 a stockfot\u00f3kat?<\/h3>\n\n\n\n
\u00cdrj r\u00e1 sz\u00f6veget!<\/h4>\n\n\n\n
Nagyon gyakori megold\u00e1s k\u00fclf\u00f6ldi blogposztokn\u00e1l, hogy a k\u00e9pekre r\u00e1\u00edrj\u00e1k a kapcsol\u00f3d\u00f3 bejegyz\u00e9s c\u00edm\u00e9t. Ez kapcsolatot teremt a k\u00e9p \u00e9s a sz\u00f6veg k\u00f6z\u00f6tt, mik\u00f6zben eredetibb\u00e9 tetted a fot\u00f3t.<\/p>\n\n\n\n
Haszn\u00e1lj overlayt!<\/h4>\n\n\n\n
A sz\u00ednek rendk\u00edv\u00fcl fontosak a webdesignban, ez\u00e9rt is foglalkoztunk egy k\u00fcl\u00f6n bejegyz\u00e9sben vel\u00fck<\/a>. A sz\u00ednek seg\u00edts\u00e9g\u00e9vel kialak\u00edthatsz hangulatot, atmoszf\u00e9r\u00e1t, \u00e9s \u00e9rzelmeket kelthetsz. Els\u0151sorban olyan sz\u00edneket haszn\u00e1lj, melyek kapcsol\u00f3dnak a m\u00e1rk\u00e1d image-\u00e9hez, mert \u00edgy a k\u00e9peket is \u00f6sszekapcsolod a m\u00e1rk\u00e1ddal.<\/p>\n\n\n\n
V\u00e1gd meg a k\u00e9pet!<\/h4>\n\n\n\n
A v\u00e1g\u00e1ssal egy kicsit eredetibb k\u00e9pet k\u00e9sz\u00edthetsz magadnak a stockfot\u00f3kb\u00f3l. De ki is emelheted ezzel a megold\u00e1ssal azt a r\u00e9szt, ami sz\u00e1modra fontos, amire fel akarod h\u00edvni a figyelmet.<\/p>\n\n\n\n
V\u00e1ltoztass a kontraszton!<\/h4>\n\n\n\n
Kontrasztr\u00f3l akkor besz\u00e9l\u00fcnk, amikor k\u00e9t elem a k\u00e9pen k\u00fcl\u00f6nb\u00f6zik. Teh\u00e1t p\u00e9ld\u00e1ul elt\u00e9r\u0151 sz\u00edn\u0171 a bet\u0171 \u00e9s a h\u00e1tt\u00e9r. El\u0151bbi lehet s\u00f6t\u00e9t, ut\u00f3bbi vil\u00e1gos. Egy fot\u00f3 eset\u00e9ben is er\u0151s\u00edtheted a kontrasztot, p\u00e9ld\u00e1ul az\u00e9rt, hogy felh\u00edvd rajta valamire a figyelmet. Hiszen, ha egy dolog kiemelkedik a s\u00f6t\u00e9t h\u00e1tt\u00e9rb\u0151l a kontraszt r\u00e9v\u00e9n, akkor mindenki felfigyel r\u00e1.<\/p>\n\n\n\n
Hom\u00e1lyos\u00edtsd el a h\u00e1tteret!<\/h4>\n\n\n\n
Ezt a tr\u00fckk\u00f6t els\u0151sorban akkor vetheted be, amikor feliratot helyezel a k\u00e9pre. Ez lehet a c\u00e9gneved, de az els\u0151 pontban eml\u00edtett megold\u00e1s, teh\u00e1t egy kapcsol\u00f3d\u00f3 sz\u00f6veg is. A hom\u00e1lyos\u00edt\u00e1ssal ki tudod emelni az el\u0151t\u00e9rben l\u00e9v\u0151 elemet, r\u00e1ad\u00e1sul a sz\u00f6veg is olvashat\u00f3bb\u00e1 v\u00e1lik \u00e1ltala.<\/p>\n\n\n\n
Milyen hib\u00e1kat k\u00f6vethetsz el stockfot\u00f3k haszn\u00e1lat\u00e1n\u00e1l?<\/h3>\n\n\n\n
Hab\u00e1r az eddig le\u00edrtakb\u00f3l m\u00e1r sok minden k\u00f6vetkezik a hib\u00e1kra vonatkoz\u00f3an is, az\u00e9rt k\u00fcl\u00f6n is felsorolunk n\u00e9h\u00e1nyat, hogy biztosan ne ronts el semmit.<\/p>\n\n\n\n
Irrelev\u00e1ns k\u00e9peket haszn\u00e1lsz<\/h4>\n\n\n\n
A k\u00e9pek \u00fczenetet hordoznak, kifejezik a m\u00e1rk\u00e1d identit\u00e1s\u00e1t. Ez\u00e9rt figyelj arra, hogy az \u00e1ltalad v\u00e1lasztott stockfot\u00f3k is \u00e9rt\u00e9ket adjanak a tartalmadhoz, plusz inform\u00e1ci\u00f3t k\u00edn\u00e1ljanak, \u00e9s a megfelel\u0151 \u00fczenetet k\u00f6zvet\u00edts\u00e9k a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra. Annak nincs sok \u00e9rtelme, hogy mintegy helykit\u00f6lt\u00e9s gyan\u00e1nt, vagy hogy legyen valami sz\u00ednes r\u00e9sz is a weboldaladon, mindenf\u00e9le stockfot\u00f3kat dob\u00e1lj be az oldaladra. Ez nem jav\u00edtja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, ak\u00e1r zavarja \u00e9s akad\u00e1lyozza is a l\u00e1togat\u00f3kat, mik\u00f6zben nem j\u00f3 SEO szempontb\u00f3l sem a lassabb bet\u00f6lt\u0151d\u00e9s miatt.<\/p>\n\n\n\n
M\u00e1solod a konkurenci\u00e1t<\/h4>\n\n\n\n
Nagyon sok c\u00e9g \u00fagy \u00e1ll hozz\u00e1 a webdesignhoz, hogy megn\u00e9zi, mivel \u00e1llnak el\u0151 a versenyt\u00e1rsak, majd ugyanazt megism\u00e9tli a weboldal\u00e1n, mondv\u00e1n: ha nekik bej\u00f6tt, akkor biztos m\u0171k\u00f6dik a dolog. Az azonban nem m\u0171k\u00f6dik a webdesign eset\u00e9ben, \u00e9s a k\u00e9pek kiv\u00e1laszt\u00e1s\u00e1n\u00e1l sem. Egyr\u00e9szt nem tudod, hogy van-e b\u00e1rmif\u00e9le alapja a v\u00e1laszt\u00e1suknak, hogy t\u00e9nyleg jav\u00edtj\u00e1k-e felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt a fot\u00f3k, arr\u00f3l nem besz\u00e9lve, hogy a c\u00e9lk\u00f6z\u00f6ns\u00e9gn\u00e9l is lehetnek elt\u00e9r\u00e9sek. Persze azt nem mondjuk, hogy ne n\u00e9zd meg a konkurencia weboldalait. N\u00e9zd meg, azt\u00e1n v\u00e1lasz elt\u00e9r\u0151 fot\u00f3kat, amik jobban passzolnak az image-edhez, az adott tartalomhoz, a m\u00e1rk\u00e1hoz, egyedibbek \u00e9s kiemelked\u0151bbek!<\/p>\n\n\n\n
Megel\u00e9gszel egy gyenge min\u0151s\u00e9g\u0171 fot\u00f3val<\/h4>\n\n\n\n
A stockfot\u00f3knak el\u00e9g sz\u00e9les t\u00e1rh\u00e1z\u00e1t tal\u00e1lod a neten, el\u00e9rhet\u0151ek mindenf\u00e9le min\u0151s\u00e9gben \u00e9s persze \u00e1rban. V\u00e1logathatsz ak\u00e1r ingyenes megold\u00e1sok k\u00f6z\u00fcl is, de ebben az esetben m\u00e9g ink\u00e1bb figyelned kell arra, hogy j\u00f3 min\u0151s\u00e9g\u0171, eredeti \u00e9s term\u00e9szetesnek t\u0171n\u0151 fot\u00f3t v\u00e1lassz. Lehet, hogy olcs\u00f3bban, vagy ak\u00e1r ingyen hozz\u00e1jutsz egy gyeng\u00e9bb k\u00e9phez, ez azonban hossz\u00fa t\u00e1von nem biztos, hogy kifizet\u0151dik.<\/p>\n\n\n\n
Mesterk\u00e9lt, unalmas stockfot\u00f3kat haszn\u00e1lsz<\/h4>\n\n\n\n
A stockfot\u00f3k legnagyobb hib\u00e1ja a m\u0171faj jelleg\u00e9b\u0151l k\u00f6vetkezik: nem eredetiek, klis\u00e9t ism\u00e9telgetnek, hiszen nem a Te c\u00e9gedre, m\u00e1rk\u00e1dra, \u00fcgyfeleidre jellemz\u0151 k\u00e9pet mutatnak. Az ilyen fot\u00f3kat m\u00e1r ezerszer l\u00e1tt\u00e1k a felhaszn\u00e1l\u00f3k, nem ad nekik semmilyen \u00e9rt\u00e9kes inform\u00e1ci\u00f3t, nem kapcsol\u00f3dik igaz\u00e1n a m\u00e1rk\u00e1dhoz, ink\u00e1bb csak teher a weboldalon.<\/p>\n\n\n\n
$\"\"$
Egy sablonos, ezerszer l\u00e1tott stockfot\u00f3<\/figcaption><\/figure>\n\n\n\n
Nem haszn\u00e1lod a kreativit\u00e1sod<\/h4>\n\n\n\n
Megold\u00e1s lehet az el\u0151bbi probl\u00e9m\u00e1ra, hogy a stockfot\u00f3kat n\u00e9mileg \u00e1tdolgozod valamilyen k\u00e9pszerkeszt\u0151 alkalmaz\u00e1s seg\u00edts\u00e9g\u00e9vel. Keresel olyan effekteket, melyek egyediv\u00e9 teszik \u0151ket, \u00e9s amelyek csak a te weboldaladra, m\u00e1rk\u00e1dra jellemz\u0151ek. <\/p>\n\n\n\n
Nem figyelsz a felhaszn\u00e1l\u00e1si jogokra<\/h4>\n\n\n\n
A fot\u00f3kat k\u00edn\u00e1l\u00f3 weboldalak mindig jelzik, hogy a k\u00e9pek milyen m\u00f3don, milyen jel\u00f6l\u00e9ssel, hol \u00e9s hogyan haszn\u00e1lhat\u00f3k fel. J\u00f3, ha ezekre figyelsz, mert bizony k\u00f6z\u00fcl\u00fck sokan figyelnek arra, hogy kik haszn\u00e1lj\u00e1k fel a fot\u00f3ikat, \u00e9s hogyan. Ez pedig ak\u00e1r sokba is ker\u00fclhet neked.<\/p>\n\n\n\n
Mint l\u00e1that\u00f3, a stockfot\u00f3kat ugyan nem szeretj\u00fck, de ha j\u00f3l haszn\u00e1lod \u0151ket, akkor hat\u00e9kony seg\u00edts\u00e9get jelenthetnek sz\u00e1modra.<\/p>\n\n\n\n
Friss\u00edt\u00e9s, 2022.01.27.:<\/em><\/p>\n\n\n\n
Az 5 stockfot\u00f3-t\u00edpus, amit mindenk\u00e9ppen ker\u00fclj el!<\/h3>\n\n\n\n
Hab\u00e1r a stockfot\u00f3kkal a legnagyobb probl\u00e9ma az, hogy ugyanazzal a k\u00e9ppel t\u00f6bb helyen is tal\u00e1lkozhatsz a weben, azonban, ha ezen t\u00falteszed magad, akkor is akad n\u00e9h\u00e1ny olyan t\u00edpusuk, amit mindenk\u00e9ppen ker\u00fclni \u00e9rdemes, mert csak magadat j\u00e1ratod le vel\u00fck.<\/p>\n\n\n\n
Nevets\u00e9ges arckifejez\u00e9sek<\/h4>\n\n\n\n
Mint kor\u00e1bban l\u00e1ttuk, az embereket, az emberi \u00e9rzelmeket \u00e1br\u00e1zol\u00f3 fot\u00f3k hat\u00e1sosak lehetnek, mert befoly\u00e1solj\u00e1k a l\u00e1togat\u00f3k benyom\u00e1s\u00e1t a weboldaladr\u00f3l \u00e9s a c\u00e9gedr\u0151l. Ugyanakkor, ha nincs p\u00e9nzed arra, hogy megfizess egy modellt \u00e9s egy profi fot\u00f3st, akkor a stockfot\u00f3k k\u00f6z\u00f6tt tudsz k\u00f6r\u00fcln\u00e9zni, ahol b\u0151s\u00e9ggel tal\u00e1lsz k\u00fcl\u00f6nf\u00e9le \u00e9rzelmeket kifejez\u0151 k\u00e9peket.<\/p>\n\n\n\n
Ezek nagy r\u00e9sze azonban nem t\u0171nik igaz\u00e1n term\u00e9szetesnek, teh\u00e1t nem olyan, mint amikor egy val\u00f3di fot\u00f3s meg\u00f6r\u00f6k\u00edt egy val\u00f3di \u00e9rzelmet. Egy messzir\u0151l is hamisnak t\u0171n\u0151 \u00e9rzelemnek a s\u00f6t\u00e9t \u00e1rnya pedig az eg\u00e9sz weboldaladra r\u00e1vet\u00fcl, \u00fagyhogy a legjobb, ha ezeket elker\u00fcl\u00f6d. Mint p\u00e9ld\u00e1ul ezt a fot\u00f3t:<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Az „egyenruh\u00e1s” csoportok<\/h4>\n\n\n\n
Gyakran tal\u00e1lkozni olyan stockfot\u00f3kkal, melyekn\u00e9l a mesterk\u00e9lts\u00e9g abban is tetten \u00e9rhet\u0151, hogy a rajta szerepl\u0151 szem\u00e9lyek mintha egyenruh\u00e1ban lenn\u00e9nek. Ezeken l\u00e1tszik, hogy nem val\u00f3s karakterekr\u0151l van sz\u00f3, hanem egyfajta hangulat kifejez\u00e9se miatt mindegyik modell ugyanazt a st\u00edlus\u00fa ruh\u00e1t kapta mag\u00e1ra. Hi\u00e1nyzik bel\u0151le az emberek egy\u00e9nis\u00e9ge, nem l\u00e1tod m\u00f6g\u00f6tt\u00fck a t\u00f6rt\u00e9netet, hogy milyen preferenci\u00e1ik vannak, egy\u00e1ltal\u00e1n azt, hogy val\u00f3di emberekr\u0151l lenne sz\u00f3.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Elk\u00e9peszt\u0151 illusztr\u00e1ci\u00f3k<\/h4>\n\n\n\n
Nem csak \u00e9rzelmeket, hangulatokat fejezhet\u00fcnk ki fot\u00f3kkal, hanem bizonyos cselekv\u00e9seket, fogalmakat is \u00e1br\u00e1zolhatunk a seg\u00edts\u00e9g\u00fckkel. A stockfot\u00f3k pr\u00f3b\u00e1lnak el\u00e9be menni minden felmer\u00fcl\u0151 ig\u00e9nynek, azonban a megold\u00e1sok egy kicsit er\u0151ltetettek tudnak lenni.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
T\u00falszerkesztett k\u00e9pek<\/h4>\n\n\n\n
Sokan esnek abba a hib\u00e1ba, hogy t\u00falszerkesztik a k\u00e9peket, melyek ez\u00e1ltal mesterk\u00e9ltt\u00e9 v\u00e1lnak, elszakadnak a val\u00f3s\u00e1gt\u00f3l, \u00e9s ez sajnos mindenkinek felt\u0171nik. Ha ilyen fot\u00f3 jelenik meg a weboldaladon, az ronthatja a hiteless\u00e9ged, a bizalmat az ir\u00e1nyodba. \u00c9rdemesebb ink\u00e1bb val\u00f3s\u00e1gosabbnak hat\u00f3 k\u00e9peket haszn\u00e1lni, melyeken apr\u00f3 hib\u00e1k is felt\u0171nnek, hitelesebb\u00e9 t\u00e9ve a fot\u00f3t.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Id\u00e9tlen grafik\u00e1k<\/h4>\n\n\n\n
V\u00e9g\u00fcl meg kell eml\u00edten\u00fcnk azokat grafik\u00e1kat, illusztr\u00e1ci\u00f3kat, melyek megpr\u00f3b\u00e1lni kifejezni rajzolt form\u00e1ban valamilyen cselev\u00e9st, fogalmat. Ezek \u00e1ltal\u00e1ban k\u00fcl\u00f6n kateg\u00f3ri\u00e1ba ker\u00fclnek a stockfot\u00f3s oldalakon, \u00edgy van r\u00e1 lehet\u0151s\u00e9g, hogy elker\u00fclj\u00fck \u0151ket.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Hogyan helyezd el a k\u00e9peidet a weboldaladon?<\/strong><\/h2>\n\n\n\n
A modern webdesignnak elengedhetetlen r\u00e9szeit jelentik a k\u00e9pek, melyek magyar\u00e1zz\u00e1k, \u00e9rtelmezik a mellett\u00fck l\u00e9v\u0151 sz\u00f6veget. A hagyom\u00e1nyos megk\u00f6zel\u00edt\u00e9s szerint a k\u00e9peknek \u00e9s a sz\u00f6vegeknek van egy saj\u00e1t has\u00e1bjuk, ebbe vannak rendezve, egym\u00e1s al\u00e1: az egyik oldalon a k\u00e9pek, a m\u00e1sikon a hozz\u00e1juk tartoz\u00f3 sz\u00f6veg. A m\u00e1sik, \u00e9s m\u00e1r r\u00e9g\u00f3ta terjed\u0151 megold\u00e1sn\u00e1l viszont a k\u00e9pek \u00fagynevezett cikkcakk mint\u00e1ba rendez\u0151dnek: azaz lefel\u00e9 haladva v\u00e1ltj\u00e1k egym\u00e1st a k\u00e9pek \u00e9s a sz\u00f6veg. Ennek az elrendez\u00e9snek \u00e1ltal\u00e1ban az az indoka, hogy \u00edgy oldj\u00e1k a monot\u00f3ni\u00e1t, tegy\u00e9k \u00e9rdekesebb\u00e9 a hossz\u00fa oldalakat.<\/p>\n\n\n\n
Megint a hagyom\u00e1nyos megold\u00e1s a hat\u00e9konyabb<\/h4>\n\n\n\n
A Nielsen Norman Group azonban arra h\u00edvta fel a figyelmet<\/a>, hogy kutat\u00e1saik szerint a hagyom\u00e1nyos elrendez\u00e9s eset\u00e9ben hat\u00e9konyabban olvass\u00e1k \u00e9s futj\u00e1k \u00e1t a weboldal tartalm\u00e1t a felhaszn\u00e1l\u00f3k. Ennek oka v\u00e9leked\u00e9s\u00fck szerint az, hogy a k\u00f6vetkezetess\u00e9g mindig el\u0151ny\u00f6s a webdesignban.<\/p>\n\n\n\n
$\"\"$
(Forr\u00e1s: NNG)<\/figcaption><\/figure><\/div>\n\n\n\n
Vizsg\u00e1lataikban n\u00e9gy k\u00fcl\u00f6nb\u00f6z\u0151 weboldalt elemeztek, melyek cikkcakk minta alapj\u00e1n \u00e9p\u00fcltek fel. Ezeknek elk\u00e9sz\u00edtett\u00e9k a m\u00e1sik t\u00edpus\u00fa elrendez\u00e9s\u00e9t, azaz a k\u00e9peket \u00e9s a sz\u00f6vegeket k\u00e9t k\u00fcl\u00f6n has\u00e1bba rendezt\u00e9k. A kutat\u00e1sban t\u00f6bb dolog is kider\u00fclt.<\/p>\n\n\n\n
Az egyik az, hogy a felhaszn\u00e1l\u00f3k tekintet\u00e9nek \u00fatvonal\u00e1t a k\u00e9pek min\u0151s\u00e9ge \u00e9s inform\u00e1ci\u00f3s tartalma is befoly\u00e1solta<\/strong>. S\u0151t, az inform\u00e1ci\u00f3s \u00e9rt\u00e9k fontosabbnak bizonyult, mint az elrendez\u00e9s. A felhaszn\u00e1l\u00f3k gyakrabban tekintettek a magasabb inform\u00e1ci\u00f3s \u00e9rt\u00e9kkel b\u00edr\u00f3 k\u00e9pekre, mint az \u00e9rt\u00e9ktelenekre. \u00c9s ilyenkor nem sz\u00e1m\u00edtott, hogy milyen elrendez\u00e9sben ker\u00fcl t\u00e1lal\u00e1sra a k\u00e9p a weboldalon. Ez teh\u00e1t azt jelenti, hogy ha a k\u00e9p \u201ct\u00f6bb, mint dekor\u00e1ci\u00f3\u201d, akkor mindk\u00e9t elrendez\u00e9s j\u00f3l m\u0171k\u00f6dik.<\/p>\n\n\n\n
Az \u00e9rt\u00e9ktelen k\u00e9pek csak zavarnak<\/h4>\n\n\n\n
A dekor\u00e1ci\u00f3s c\u00e9llal haszn\u00e1lt k\u00e9peket viszont \u00e1tugrott\u00e1k a felhaszn\u00e1l\u00f3k. Azokon az oldalakon, ahol a k\u00e9pek els\u0151sorban ilyen c\u00e9lb\u00f3l szerepeltek, a l\u00e1togat\u00f3k gyorsan megtanult\u00e1k, hogy ezek nem fontosak a feladatuk v\u00e9grehajt\u00e1s\u00e1hoz, \u00edgy a sz\u00f6vegre koncentr\u00e1ltak.<\/p>\n\n\n\n
Ugyanakkor megfigyelhet\u0151 volt az is, hogy a cikkcakk elrendez\u00e9sn\u00e9l – szemben a norm\u00e1l elrendez\u00e9ssel – a felhaszn\u00e1l\u00f3k tekintete gyakran r\u00e1t\u00e9vedt a dekor\u00e1ci\u00f3s c\u00e9lokat szolg\u00e1l\u00f3 k\u00e9pekre. Ez azonban nem sz\u00e1nd\u00e9kos pillant\u00e1s volt, hanem v\u00e9letlenszer\u0171, \u00e9s a k\u00e9pek ink\u00e1bb csak akad\u00e1lyt jelentettek a feladat v\u00e9grehajt\u00e1s\u00e1n\u00e1l.<\/p>\n\n\n\n
Ennek oka hogy a dekor\u00e1ci\u00f3s k\u00e9peket cikkcakk minta eset\u00e9n nehezebb elker\u00fclni<\/strong>. Pedig az emberek els\u0151sorban arra t\u00f6rekszenek, hogy a legkisebb er\u0151fesz\u00edt\u00e9ssel \u00e9rj\u00e9k el c\u00e9ljukat. Ez\u00e9rt, ha megtanulj\u00e1k, hogy egy oldalon a k\u00e9pek feleslegesek sz\u00e1mukra, akkor elkezdik elker\u00fclni \u0151ket. Szab\u00e1lyos elrendez\u00e9s eset\u00e9n ez k\u00f6nnyen megy, hiszen gond n\u00e9lk\u00fcl tud a tekintet\u00fck lefel\u00e9 siklani a fontosabbnak tartott sz\u00f6veges tartalmakon. A cikkcakk mint\u00e1n\u00e1l viszont egy pillanatra elakadnak a k\u00e9peken, de csak egy eg\u00e9szen r\u00f6vid id\u0151re, mert egyb\u0151l fontosabb a sz\u00f6veget keresik.<\/p>\n\n\n\n
Ezt a helyzetet tov\u00e1bb lehet rontani azzal, ha a fot\u00f3k sz\u00f6veget is tartalmaznak<\/strong>, \u00e9s esetleg k\u00f6zel vannak helyezve a sz\u00f6vegekhez. Ez azt jelenti, hogy itt a k\u00e9pek \u00fagy n\u00e9znek ki, mint ha sz\u00f6vegek lenn\u00e9nek, ez\u00e9rt versenyeznek vel\u00fck a figyelem\u00e9rt. A felhaszn\u00e1l\u00f3nak ebben az esetben rendk\u00edv\u00fcl neh\u00e9z dolguk van, amikor neh\u00e9z meghat\u00e1rozniuk, hogy hol tal\u00e1lj\u00e1k a k\u00f6vetkez\u0151 bekezd\u00e9st.<\/p>\n\n\n\n
A felirattal ell\u00e1tott – p\u00e9ld\u00e1ul k\u00e9perny\u0151k\u00e9pek weboldalakr\u00f3l, fontos e-mailekr\u0151l – k\u00e9pek ugyan hasznosnak t\u0171nhetnek sz\u00e1modra, azonban a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra gyakran t\u00fal bonyolultak. M\u00e1rpedig egy els\u0151 pillant\u00e1sra felfoghatatlan k\u00e9p nem seg\u00edti \u0151ket a meg\u00e9rt\u00e9sben. \u00cdgy azt\u00e1n a t\u00f6bbi k\u00e9pedet ink\u00e1bb ker\u00fclni fogj\u00e1k.<\/p>\n\n\n\n
K\u00f6vetkeztet\u00e9sek<\/h4>\n\n\n\n
\u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy<\/p>\n\n\n\n
az inform\u00e1ci\u00f3s \u00e9rt\u00e9kkel b\u00edr\u00f3 k\u00e9pek t\u00f6bb figyelmet kapnak, mint a puszt\u00e1n dekor\u00e1ci\u00f3s c\u00e9llal rendelkez\u0151k,<\/li>
a dekor\u00e1ci\u00f3s k\u00e9pekre kevesebbszer tekintenek a felhaszn\u00e1l\u00f3k, \u00e9s nem veszik figyelembe \u0151ket sem a klasszikus, sem a cikkcakk elrendez\u00e9sn\u00e9l.<\/li>
A cikkcakk elrendez\u00e9sn\u00e9l azonban nem tudj\u00e1k elker\u00fclni a dekor\u00e1ci\u00f3s k\u00e9peket, \u00edgy gyakran megakadnak rajtuk egy pillanatra, majd azonnal tov\u00e1bb is l\u00e9pnek.<\/li><\/ul>\n\n\n\n
Legyinthetn\u00e9nk, hogy h\u00e1t csak egy pillanatra torpannak meg. Azonban a megakad\u00e1sok olyan hat\u00e1s\u00faak, mintha zs\u00fafolt lenne a weboldalad<\/strong>: nehezebb \u00e9s kev\u00e9sb\u00e9 hat\u00e9kony az olvas\u00e1sa. Ez\u00e9rt az NNG azt tan\u00e1csolja, hogy gondold \u00e1t alaposan sz\u00fcks\u00e9ged van-e egy-egy k\u00e9pre a weboldalon, van-e neki inform\u00e1ci\u00f3s \u00e9rt\u00e9ke. Hiszen az inform\u00e1ci\u00f3s k\u00e9pek azok, melyek j\u00f3l m\u0171k\u00f6dnek mindk\u00e9t elrendez\u00e9sn\u00e9l, mivel t\u00e1mogatj\u00e1k a sz\u00f6veget \u00e9s felh\u00edvj\u00e1k magukra a figyelmet. Ezekkel id\u0151t t\u00f6ltenek az emberek, mert meg szeretn\u00e9k \u00e9rteni, hogy mit aj\u00e1nlasz sz\u00e1mukra.<\/p>\n\n\n\n
Az oldalon egy\u00e9bk\u00e9nt az els\u0151 k\u00e9pek alapj\u00e1n d\u00f6ntik el az emberek, hogy figyelembe veszik-e a t\u00f6bbit. Ezt azt jelenti, hogy az oldal fels\u0151 r\u00e9sz\u00e9n tal\u00e1lhat\u00f3 k\u00e9pek inform\u00e1ci\u00f3tartalm\u00e1ra kell a legink\u00e1bb figyelned<\/strong>. A dekor\u00e1ci\u00f3s c\u00e9l\u00fa k\u00e9pek ez\u00e9rt jobb, ha leker\u00fclnek az oldal alj\u00e1ra. Persze hasznosak lehetnek feljebb is a m\u00e1rkaidentit\u00e1s szempontj\u00e1b\u00f3l. Ugyanakkor, ha gondok vannak az inform\u00e1ci\u00f3s \u00e9rt\u00e9kkel a k\u00e9pekn\u00e9l, akkor jobb \u0151ket egym\u00e1s al\u00e1 rendezni, hogy megk\u00f6nny\u00edtsd az emberek dolg\u00e1t a weboldalad \u00e1tfut\u00e1s\u00e1n\u00e1l. Az egyetlen kiv\u00e9tel az lehet, ha mind\u00f6ssze 2-3 soros a sz\u00f6veges tartalmad. Ebben az esetben a cikk-cakk elrendez\u00e9s is elfogadhat\u00f3 lehet a lista r\u00f6vids\u00e9ge miatt.<\/p>\n\n\n\n
Emellett \u00e9rdemes elker\u00fclni a t\u00fals\u00e1gosan bonyolult k\u00e9peket is<\/strong>. M\u00e9g akkor is, ha Te fontosnak \u00e9rzed \u0151ket, a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra neh\u00e9z lehet befogadni \u0151ket, k\u00fcl\u00f6n\u00f6sen akkor, ha m\u00e9g nem tudj\u00e1k, hogy mit k\u00edn\u00e1lsz a tartalmaddal. Ezek a k\u00e9pek r\u00e1ad\u00e1sul a sz\u00f6vegekkel is versenyeznek, \u00edgy \u00e9rdemes ink\u00e1bb olyan k\u00e9pet v\u00e1lasztani helyett\u00fck, melyek kieg\u00e9sz\u00edtik a sz\u00f6veget, nem pedig fokozz\u00e1k a kognit\u00edv terhel\u00e9st. Csak az elrendez\u00e9s kedv\u00e9\u00e9rt pedig ne haszn\u00e1lj k\u00e9peket! Minden k\u00e9pnek legyen \u00e9rtelme, m\u00e9g akkor is, ha csak a m\u00e1rk\u00e1d identit\u00e1s\u00e1t akarod er\u0151s\u00edteni vele!<\/p>\n\n\n\n
V\u00e9g\u00fcl pedig m\u00e9g egy tan\u00e1cs: a magas inform\u00e1ci\u00f3tartalm\u00fa k\u00e9peket mindig az els\u0151 sorba, bal oldalra helyezd! Hiszen az emberek jelent\u0151s r\u00e9sze innen kezdi \u00e1ttekinteni az oldalt, m\u00e9g miel\u0151tt lefel\u00e9 g\u00f6rgetne. Ha van inform\u00e1ci\u00f3tartalma az itt l\u00e9v\u0151 k\u00e9pnek, akkor nem akasztod meg feleslegesen a l\u00e1togat\u00f3kat.<\/p>\n\n\n\n
Mit kezdj a nagy k\u00e9pekkel a mobilkijelz\u0151k\u00f6n?<\/strong><\/h2>\n\n\n\n
Azok a k\u00e9pek, melyek remek\u00fcl n\u00e9znek ki egy monitoron, sokszor elvesztik erej\u00fcket egy mobil kijelz\u0151j\u00e9n, s\u0151t adott esetben k\u00e9pesek t\u00f6nkretenni az eg\u00e9sz designt. Valamit teh\u00e1t kell vel\u00fck tenni. De mi a legjobb megold\u00e1s?<\/p>\n\n\n\n
Alapesetben, amikor mobilbar\u00e1t weboldalt k\u00e9sz\u00edt\u00fcnk, a k\u00e9peket egyszer\u0171en a kisebb kijelz\u0151re m\u00e9retezz\u00fck \u00e1t, hogy megfelel\u0151en illeszkedjen. Ugyanakkor, ami j\u00f3l m\u0171k\u00f6d\u00f6tt a monitoron, az nem biztos, hogy mobilon is j\u00f3 lesz. Mert a kis m\u00e9ret miatt elveszhet az az \u00fczenet, amit \u00e1t k\u00edv\u00e1ntunk vele adni, \u00e9rtelmetlenn\u00e9 v\u00e1lik a k\u00e9p egy rossz kiv\u00e1g\u00e1s miatt, vagy a nagy m\u00e9ret felesleges g\u00f6rget\u00e9sre k\u00e9nyszer\u00edti az embereket. Ugyanez persze igaz visszafel\u00e9 is: ami j\u00f3l n\u00e9z ki egy apr\u00f3 kijelz\u0151n, az lehet csapnival\u00f3 a sz\u00e1m\u00edt\u00f3g\u00e9ped monitor\u00e1n. De milyen probl\u00e9m\u00e1k mer\u00fclnek a k\u00e9pek mobilos alkalmazhat\u00f3s\u00e1ga sor\u00e1n? Erre adott v\u00e1laszt az NNG egy blogbejegyz\u00e9s\u00e9ben<\/a>.<\/p>\n\n\n\n
A k\u00e9p tisztas\u00e1ga, \u00e9s a rajta l\u00e9v\u0151 sz\u00f6veg olvashat\u00f3s\u00e1ga<\/h4>\n\n\n\n
Nagyon sok weboldalon jelenik meg sz\u00f6veg a k\u00e9peken. Ez azonban okozhat n\u00e9mi gondot \u00e1tm\u00e9retez\u00e9s eset\u00e9n. A megv\u00e1ltoz\u00f3 sz\u00ednkontraszt miatt esetleg rosszul olvashat\u00f3 lesz a sz\u00f6veg, vagy pedig rosszul l\u00e1that\u00f3v\u00e1 v\u00e1lik a k\u00e9p a sz\u00f6veg miatt. A kisebb kijelz\u0151m\u00e9ret ugyanis azt jelenti, hogy kevesebb hely jut a k\u00e9pnek \u00e9s a sz\u00f6vegnek is. Amennyiben a sz\u00f6veg a k\u00e9pen bel\u00fcl szerepel, akkor a k\u00e9p kisebb\u00edt\u00e9s\u00e9vel a sz\u00f6veg m\u00e9rete is cs\u00f6kken.<\/p>\n\n\n\n
De m\u00e9g ha a sz\u00f6veg nem is r\u00e9sze a k\u00e9pnek, akkor is ad\u00f3dhatnak gondok, hiszen a sz\u00f6veg elt\u00e9r\u0151 m\u00f3don illeszkedik a kisebb kijelz\u0151h\u00f6z. Az \u00e1tm\u00e9retez\u00e9s, v\u00e1g\u00e1s hat\u00e1ssal van mind a k\u00e9p, mind pedig a sz\u00f6veg olvashat\u00f3s\u00e1g\u00e1ra, valamint a kett\u0151 kapcsolat\u00e1ra. Teh\u00e1t, m\u00edg monitoron egy adott sz\u00f6veg a k\u00e9p azon r\u00e9sz\u00e9re esik, ahol megfelel\u0151 a kontraszt, \u00edgy j\u00f3l olvashat\u00f3 a sz\u00f6veg, mobilon m\u00e1shov\u00e1 ker\u00fclhet. \u00c9s ha itt kisebb a kontraszt, mindj\u00e1rt rosszabb lesz az olvashat\u00f3s\u00e1g, mik\u00f6zben a k\u00e9p is \u00e9rtelmezhetetlenn\u00e9 v\u00e1lhat.<\/p>\n\n\n\n
$\"Rossz$
Rossz helyre ker\u00fcl a sz\u00f6veg, \u00edgy a k\u00e9p nem \u00e9rtelmezhet\u0151 \u00e9s a sz\u00f6veg is nehezebben olvashat\u00f3<\/figcaption><\/figure><\/div>\n\n\n\n
Rossz v\u00e1g\u00e1s vagy \u00e1tm\u00e9retez\u00e9s<\/h4>\n\n\n\n
A f\u0151 probl\u00e9m\u00e1t itt az jelenti, hogy m\u00edg a desktop kijelz\u0151k v\u00edzszintes t\u00e1jol\u00e1s\u00faak, addig a mobilok a portr\u00e9 m\u00f3dot haszn\u00e1lj\u00e1k \u00e1ltal\u00e1ban. Ennek az az eredm\u00e9nye, hogy egy adott k\u00e9p nem fog m\u0171k\u00f6dni mindk\u00e9t eszk\u00f6z\u00f6n gondos tervez\u00e9s n\u00e9lk\u00fcl. Ha rosszul ker\u00fcl megv\u00e1g\u00e1sra a k\u00e9p, akkor megv\u00e1ltozhat vagy \u00e9rtelmetlenn\u00e9 v\u00e1lhat a jelent\u00e9se, m\u00edg ha egyszer\u0171en csak \u00e1tm\u00e9retezz\u00fck, akkor nem felt\u00e9tlen\u00fcl l\u00e1that\u00f3, hogy mi is szerepel rajta.<\/p>\n\n\n\n
$\"Amikor$
Amikor a k\u00e9p a rossz v\u00e1g\u00e1s miatt \u00e9rtelmezhetetlenn\u00e9 v\u00e1lik<\/figcaption><\/figure><\/div>\n\n\n\n
G\u00f6rget\u00e9sre k\u00e9nyszer\u00edt\u00e9s<\/h4>\n\n\n\n
A k\u00e9pek r\u00e9v\u00e9n hosszabb\u00e1 v\u00e1lik a weboldal. Amikor a weboldal fels\u0151 r\u00e9sz\u00e9re egy k\u00e9pet helyezel, az lefel\u00e9 tolja a tartalmat, adott esetben a hajt\u00e1s al\u00e1. Ez frusztr\u00e1ci\u00f3t okozhat a felhaszn\u00e1l\u00f3knak, k\u00fcl\u00f6n\u00f6sen abban az esetben, ha a k\u00e9p nem igaz\u00e1n seg\u00edt nekik a megc\u00e9lzott feladata v\u00e9grehajt\u00e1s\u00e1ban.<\/p>\n\n\n\n
Gyakori megold\u00e1s, amikor a k\u00e9peket r\u00e1csba szervezik a weboldalon, \u00e9s mindegyik kap egy sz\u00f6veges k\u00e9pal\u00e1\u00edr\u00e1st. Ilyenkor a k\u00e9p a sz\u00f6veg felett helyezkedik el, \u00e9s nem mellette, mint a lista alap\u00fa elrendez\u00e9sn\u00e9l. Kism\u00e9ret\u0171 kijelz\u0151k\u00f6n ebben az esetben a k\u00e9p el tud szakadni a kapcsol\u00f3d\u00f3 sz\u00f6vegt\u0151l. Ez pedig k\u00fcl\u00f6nb\u00f6z\u0151 probl\u00e9m\u00e1kat okozhat.<\/p>\n\n\n\n
Az egyik ilyen, hogy a csoportos\u00edt\u00e1s \u00e9rtelm\u00e9t veszti. Mert nem lehet meg\u00e1llap\u00edtani, hogy melyik sz\u00f6veghez melyik k\u00e9p tartozik. Az alatta vagy a felette l\u00e9v\u0151? A designnal persze lehet enyh\u00edteni ezen a probl\u00e9m\u00e1n, hiszen a t\u00e1vols\u00e1g n\u00f6velhet\u0151 az \u00f6ssze nem kapcsol\u00f3d\u00f3 r\u00e9szek \u00e9s cs\u00f6kkenthet\u0151 az egybe tartoz\u00f3 r\u00e9szek k\u00f6z\u00f6tt. Viszont mobilon ezek a t\u00e1vols\u00e1gok tal\u00e1n nem is l\u00e1that\u00f3k: hiszen, ha a felhaszn\u00e1l\u00f3 csak egyetlen k\u00e9pet l\u00e1t \u00e9s egyetlen sz\u00f6veget, akkor nem tudja mihez viszony\u00edtani a sz\u00f6veg \u00e9s a k\u00e9p k\u00f6z\u00f6tti t\u00e1vols\u00e1got.<\/p>\n\n\n\n
Tov\u00e1bbi probl\u00e9ma, hogy t\u00f6bbet kell g\u00f6rgetni. A k\u00e9p tulajdonk\u00e9ppen akad\u00e1ly\u00e1v\u00e1 v\u00e1lik annak, hogy a felhaszn\u00e1l\u00f3 eljusson az \u0151t \u00e9rdekl\u0151 tartalomhoz. K\u00fcl\u00f6n\u00f6sen akkor, ha a k\u00e9p egy\u00e1ltal\u00e1n nem j\u00e1rul hozz\u00e1 a weboldal tartalm\u00e1nak \u00e9rthet\u0151v\u00e9 t\u00e9tel\u00e9hez. A plusz g\u00f6rget\u00e9ssel \u00f6nmag\u00e1ban nincs gond, viszont \u00e1ltala n\u00f6vekszik az interakci\u00f3s k\u00f6lts\u00e9g, terhel\u0151dik a munkamem\u00f3ria. Hiszen az emberek nem egyszerre, egyben l\u00e1tj\u00e1k az inform\u00e1ci\u00f3kat, hanem csak g\u00f6rget\u00e9s r\u00e9v\u00e9n, \u00edgy fejben kell tartaniuk, amit kor\u00e1bban l\u00e1ttak.<\/p>\n\n\n\n
A megold\u00e1s<\/h3>\n\n\n\n
1. A k\u00e9pek elt\u00e1vol\u00edt\u00e1sa<\/h4>\n\n\n\n
Mindez persze nem azt jelenti, hogy a kism\u00e9ret\u0171 kijelz\u0151k\u00f6n nem kellene k\u00e9peket haszn\u00e1lni. Csak \u00e1t kell gondolni a haszn\u00e1latukat, meg kell vizsg\u00e1lni az inform\u00e1ci\u00f3s \u00e9rt\u00e9k\u00fcket, azaz, hogy mennyi inform\u00e1ci\u00f3t adnak hozz\u00e1 az oldalhoz. Ha ez az \u00e9rt\u00e9k magas, akkor \u00e9rdemes megtartani a k\u00e9pet. A k\u00f6vetkez\u0151 l\u00e9p\u00e9s egy ilyen megtartott k\u00e9ppel, hogy megfelel\u0151en kell m\u00e9retezni, megv\u00e1gni \u00e9s elhelyezni. De ha a k\u00e9pnek nincs jelent\u0151s\u00e9ge, akkor a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny akkor javul, ha elt\u00e1vol\u00edtod.<\/p>\n\n\n\n
$\"Amikor$
Amikor az a legjobb megold\u00e1s, ha elt\u00e1vol\u00edt\u00e1sra ker\u00fcl a fot\u00f3<\/figcaption><\/figure><\/div>\n\n\n\n
De az inform\u00e1ci\u00f3s \u00e9rt\u00e9ken t\u00fal akkor is \u00e9rdemes kidobni a k\u00e9peket, ha<\/p>\n\n\n\n
\u00e9rtelmezhetetlenn\u00e9 v\u00e1lik egy bizonyos m\u00e9ret alatt<\/li>
nem lehet \u00fagy m\u00e9retre v\u00e1gni, hogy ne vesz\u00edtse el a jelent\u00e9s\u00e9t<\/li>
ha a rajta elhelyezett sz\u00f6veg kitakarn\u00e1 egy jelent\u0151s r\u00e9sz\u00e9t<\/li>
n\u00f6veli a g\u00f6rget\u00e9s mennyis\u00e9g\u00e9t az oldalon<\/li><\/ul>\n\n\n\n
Term\u00e9szetesen, ha egy k\u00e9p nem tesz hozz\u00e1 semmit a tartalomhoz, akkor desktop m\u00e9retben is \u00e9rdemes megszabadulni t\u0151le. Ami az\u00e9rt is el\u0151ny\u00f6s, mert ez\u00e1ltal javul a weboldal sebess\u00e9ge, azaz a bet\u00f6lt\u00e9si ideje<\/a>.<\/p>\n\n\n\n
2. \u00c1tm\u00e9retez\u00e9s \u00e9s v\u00e1g\u00e1s<\/h4>\n\n\n\n
Ha viszont a k\u00e9p seg\u00edt \u00e9rtelmezni az oldal tartalm\u00e1t, vil\u00e1gos a c\u00e9lja a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, akkor \u00e9rdemes \u00e1tm\u00e9retezni, megv\u00e1gni. A k\u00e9pnek ugyanis illeszkednie kell a mobil kijelz\u0151j\u00e9hez is, m\u00e9gpedig \u00fagy, hogy ne vesz\u00edtse el az \u00e9rtelmezhet\u0151s\u00e9g\u00e9t. A nagy k\u00e9pekn\u00e9l szok\u00e1sos elj\u00e1r\u00e1s, hogy a legfontosabb r\u00e9szlet ker\u00fcl csak megjelen\u00edt\u00e9sre kis kijelz\u0151n. A k\u00e9p orient\u00e1ci\u00f3ja is v\u00e1ltozhat t\u00e1jk\u00e9pr\u0151l portr\u00e9ra.<\/p>\n\n\n\n
Rajzolt illusztr\u00e1ci\u00f3k vagy ikonok eset\u00e9ben lehet, hogy nincs gond az \u00e9rthet\u0151s\u00e9ggel azonban a felesleges g\u00f6rget\u00e9s elker\u00fcl\u00e9se \u00e9rdek\u00e9ben \u00e9rdemes lehet cs\u00f6kkenteni a m\u00e9ret\u00fcket, valamint v\u00e1ltoztatni az elhelyez\u00e9s\u00fck\u00f6n, p\u00e9ld\u00e1ul a kapcsol\u00f3d\u00f3 sz\u00f6veg mell\u00e9 helyezni, hogy ez\u00e1ltal is kevesebb g\u00f6rget\u00e9sre legyen sz\u00fcks\u00e9g a tartalom \u00e1tfut\u00e1s\u00e1hoz. A legjobb megold\u00e1s megtal\u00e1l\u00e1s\u00e1hoz k\u00eds\u00e9rletez\u00e9sre van sz\u00fcks\u00e9g.<\/p>\n\n\n\n
3. A k\u00e9phez tartoz\u00f3 sz\u00f6veg megv\u00e1ltoztat\u00e1sa vagy elt\u00e1vol\u00edt\u00e1sa<\/h4>\n\n\n\n
N\u00e9ha nem el\u00e9g, ha mag\u00e1t a k\u00e9pet szerkesztj\u00fck, a hozz\u00e1 kapcsol\u00f3d\u00f3 sz\u00f6veget is m\u00f3dos\u00edtani kell. Egy r\u00f6videbb sz\u00f6veget k\u00f6nnyebb elhelyezni egy k\u00e9pen, vagy mellette, vagy csak a k\u00f6zel\u00e9ben, mik\u00f6zben minim\u00e1lisra cs\u00f6kken a befogad\u00e1shoz sz\u00fcks\u00e9ges g\u00f6rget\u00e9s mennyis\u00e9ge.<\/p>\n\n\n\n
$\"A$
A sz\u00f6veg megfelel\u0151 elhelyez\u00e9se egy megv\u00e1ltozott t\u00e1jol\u00e1sn\u00e1l<\/figcaption><\/figure><\/div>\n\n\n\n
Arra is sz\u00fcks\u00e9g lehet a k\u00e9pen szerepl\u0151 sz\u00f6veg eset\u00e9ben, hogy azt a k\u00e9p egy m\u00e1s r\u00e9sz\u00e9re helyezz\u00fck kis kijelz\u0151n val\u00f3 megjelen\u00e9sn\u00e9l. A sz\u00f6vegek jellemz\u0151en a k\u00e9p kev\u00e9sb\u00e9 fontos r\u00e9szein szoktak megjelenni, de lehet, hogy mobilos megjelen\u00e9sn\u00e9l pont ez a r\u00e9sz ker\u00fcl lev\u00e1g\u00e1sra. \u00cdgy teh\u00e1t a sz\u00f6veget m\u00e1shol kell elhelyezni a k\u00e9pen, esetleg ker\u00fcl al\u00e1 vagy mell\u00e9 is.<\/p>\n\n\n\n
A l\u00e9nyeg teh\u00e1t az, hogy mobilos megjelen\u00e9sn\u00e9l minden k\u00e9p eset\u00e9ben meg kell k\u00e9rdezned magadt\u00f3l, hogy sz\u00fcks\u00e9g van-e az adott k\u00e9pre, hozz\u00e1j\u00e1rul-e a tartalom jobb meg\u00e9rt\u00e9s\u00e9hez. Ha igen, akkor gondosan kell szerkeszteni a k\u00e9pet a megfelel\u0151 m\u00e9retre \u00fagy, hogy ne vesz\u00edtse el a jelent\u00e9s\u00e9t, ne k\u00e9nyszer\u00edtse a felhaszn\u00e1l\u00f3t felesleges g\u00f6rget\u00e9sre, \u00e9s ne lass\u00edtsa le az oldalt.<\/p>\n\r\n

Mire figyelj a fot\u00f3k kiv\u00e1laszt\u00e1s\u00e1n\u00e1l \u00e9s haszn\u00e1lat\u00e1n\u00e1l?<\/h3>\n\n\n\n

Lazy loading<\/h5>\n\n\n\nA l\u00e9nyeg itt az, hogy egy k\u00e9p csak akkor jelenjen meg, ha a felhaszn\u00e1l\u00f3 el\u00e9r hozz\u00e1 a b\u00f6ng\u00e9sz\u0151ben, ahelyett, hogy az oldal megjelen\u00e9s\u00e9re kelljen v\u00e1rnia a be nem t\u00f6lt\u00f6tt k\u00e9pek miatt.<\/p>\n\n\n\n

Mire figyelj a hero image kiv\u00e1laszt\u00e1s\u00e1n\u00e1l?<\/h4>\n\n\n\n

Hogyan teheted eredetibb\u00e9 a stockfot\u00f3kat?<\/h3>\n\n\n\n

A megold\u00e1s<\/h3>\n\n\n\n

Lazy loading<\/h5>\n\n\n\n
A l\u00e9nyeg itt az, hogy egy k\u00e9p csak akkor jelenjen meg, ha a felhaszn\u00e1l\u00f3 el\u00e9r hozz\u00e1 a b\u00f6ng\u00e9sz\u0151ben, ahelyett, hogy az oldal megjelen\u00e9s\u00e9re kelljen v\u00e1rnia a be nem t\u00f6lt\u00f6tt k\u00e9pek miatt.<\/p>\n\n\n\n