Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-12-130 komment

Hogyan használd a képeket a weboldaladon? Hogyan válassz háttérképet?

  A képek a weboldalon többet jelentenek egyszerű dekorációnál, helykitöltő elemnél, mert képesek a felhasználói élmény befolyásolására.

Képekkel olykor sokkal könnyebben közölhetünk valamit, mint szavakkal. Egy egyszerű kép is többet tud mondani, mint egy bekezdésnyi szöveg. A képeknél nem számítanak a nyelvi korlátok. Ráadásul az emberek sokkal gyorsabban dolgozzák a képi információkat. A képekkel könnyedén felkeltheted a látogatók figyelmét a weboldaladon, és segítségükkel megkülönböztetheted a termékeidet. Nem mindegy azonban, hogy milyen képeket használsz és hogyan.

Nem minden weboldalnak van szüksége kép-központú designra

Nyilván komoly értéke van annak, ha a felhasználók figyelmét fel tudod kelteni néhány esztétikus képpel, ugyanakkor ez azzal jár, hogy más elemeket nehezebb lesz megtalálni és használni az oldalon. Ha túl nagy figyelem irányul a képekre, akkor az eltérítheti a felhasználót a tartalmad befogadásától. Ilyenkor csak a képre figyel, és nem veszi észre a call to actiont, mely a weboldal lényegét jelenti.

Habár egy kép-központú design adott esetben indokolt is lehet, a legtöbb weboldalnál inkább egy kiegyensúlyozott megközelítést érdemes követni. A képeknek, melyeket a felhasználói felületen alkalmazol, a terméket vagy szolgáltatásokat kell támogatnia. De semmiképpen sem szabad túlragyognia és elhomályosítania fontos tartalmakat vagy funkciókat.

Legyen célja és megfelelő mondanivalója a képeknek!

Sok weboldalon csak azért szerepelnek képek, hogy kitöltsék a helyet, és rosszabb esetben még össze is zavarják a látogatókat. A képek azért vannak, hogy vagy egy történetet mesélj el velük, vagy leegyszerűsítsd a mondanivalód. Úgyhogy ne erőltesd bele a képeket a tartalmaidba

Minden képben van egy történet, amit elmesél a látogatóknak. Csakúgy, mint az írott szövegnél, jó ha tudod már az indulás előtt, hogy mit akarsz elmondani vele. A képekkel inspirálhatod és elkötelezheted a közönségedet, de nem minden kép javítja a felhasználói élményt.

A usability tesztek azt mutatják, hogy a pusztán dekorációs céllal felhasznált képek ritkán adnak értéket a designhoz. Inkább csak rontják, mint javítják a felhasználói élményt. Az emberek általában átsiklanak rajtuk, vagy rosszabb esetben frusztrálja őket a látvány.

A legveszélyesebb dolog minden design esetében, amikor a képek rossz üzenetet közvetítenek. Ezért mindig meg kell győződnöd arról, hogy a képek illeszkednek az írott tartalomhoz. Olyan képeket kell választanod a weboldaladra, melyek szoros kapcsolatban állnak a termékeddel és illeszkednek a kontextusba is.

A képek nem teremthetnek vizuális zajt!

A képek esetén nem igaz az az elv, hogy a több jobb. Már ha a weboldaladnak nem kifejezetten az a célja, hogy képeket mutass be rajta. A képeid valószínűleg azt a célt szolgálják, hogy a termékeid, szolgáltatásaid megismertesd a látogatókkal. Ehhez viszont elegendő néhány kép, nem kell túl sok. Azok viszont olyanok legyenek, hogy valóban megragadják a látogatók figyelmét.

Mindig, amikor egy képet teszel a weboldaladra, tedd fel magadnak a kérdést, hogy az adott kép illik-e a weboldalad esztétikájához. Tehát például, ha a weboldalad elegáns, kifinomult, nagy whitespace-eket használsz, akkor a képid is legyenek nagyok, melyek a teljes kijelzőt elfoglalják.

Mindig azonos méretű és stílusú képeket használj!

A weboldalad sokkal jobban fog kinézni, ha következetes vagy a képhasználatnál. Ez a méretet, az azonos képarányokat és a stílust is jelenti. Ez segít abban is, hogy a szöveget megfelelően formázd.

Figyelj a reszponzivitásra!

Győződj meg arról, hogy a képek, amiket a weboldaladon használsz, minden kijelzőméreten jól jelennek meg. Teszteld őket különféle felbontásoknál, képarányoknál és eszközön!

  • A képek soha nem tűnhetnek pixelesnek!
  • Soha ne növeld őket 100%-nál nagyobbra!
  • Mindig az eredeti arányokkal jelenítsd meg őket!

Reszponzív weboldalaknál gyakori probléma a megfelelő képméret kiválasztása, mely a legjobban illeszkedik minden eszköz kijelzőjéhez. Egyetlen kép néha nem elegendő ahhoz, hogy minden képernyőfelbontást és eszközt kiszolgáljon.

De hogyan válaszd ki az optimális reszponzív képméretet? Akadnak olyan online eszközök is a neten, melyek segítségével különféle képméreteket tudsz kezelni. Ilyen például a Cloudinary, mely képes arra, hogy reszponzív töréspontokat hozz létre a segítségével. Ez az eszköz egy fejlett algoritmust használ, így könnyen meghatározza a megfelelő töréspontokat minden feltöltött kép esetében. A képeket elemzi, hogy megtalálja ezeket, majd mindegyik felbontásra készít egy képet.

Ha lehet, eredeti képeket használj!

Ha eredeti képet használsz a weboldaladon, akkor javul a felhasználói élmény, és növeled az esélyét annak, hogy a keresésekre jobb helyezést érj el. Az eredeti képekre az emberek jobban felfigyelnek, mint a stockfotókra. Habár stockfotókat is használhatsz jól a weboldaladon, az kétségtelen, hogy SEO szempontból az utóbbi nem optimális választás, és nem ugyanazt a hatást éred el velük. Az emberek tucatnyi vagy akár több száz oldalon is találkozhatnak ugyanazzal a képpel, mint amit Te használsz.

SEO szempontból az is fontos, hogy megfelelő fájlnevet adj a képeidnek. A Google ugyanis még nem nézi meg, hogy mi van a képeiden, amikor feltérképezi azt. A hozzá kapcsolódó szövegekből tud kiindulni. A fájlnév információt nyújt számára arról, hogy mi található a képen. A fájlnév a kép URL-jében is megjelenik, ezért mindig kisbetűvel célszerű írni, és kötőjelet hagyni az egyes szavak között.

Ugyanígy fontos a képaláírás és az alt text is. Utóbbi persze nem látható az átlagos felhasználó számár, ugyanakkor a keresőmotorok számára információt hordoz. Ha a képeden van felirat, akkor az alt text ugyanaz lehet.

Ne feledkezz meg a felhasználási jogokról!

Amikor képeket keresel a neten, azt mindig vedd figyelembe, hogy azoknak jogtulajdonosaik vannak. Ha csak nem adnak kifejezett engedélyt a képek használatára – illetve jelzik a használat korlátait -, nem használhatod fel a képeiket következmények nélkül.

A weben egyébként számtalan olyan oldalt találsz, ahol szabadon felhasználható képeket kínálnak. Nyilván a választék nem olyan széles, mint ha a teljes webes képi tartalomból válogatnál, de legalább legális.

Többféle vizuális megoldást használj!

Az illusztrációknak és a fotóknak is helye van egy-egy termék weboldalán. Egy fotó ideális eszköz specifikus dolgok vagy történetek bemutatására. Tehát amikor nem valamilyen autót kell mutatnunk, hanem egy adott autót.

Az illusztrációk viszont kiválóak arra, hogy általános dolgokat fejezzenek ki, melyeknél egy fotó esetleg elidegenítően hathat. Ezek tehát akkor segítik a megértést, amikor nincs szükség valaminek az egzakt megjelenítésére.

Legyen egy fókuszpontod!

A képek olyan vizuális kommunikációs eszközt adnak a kezedbe, mellyel közvetítheted az üzeneteidet. Egyértelmű fókusz segítségével könnyen és gyorsan közölheted a gondolataidat, míg homályos fókusszal a kép jelentés nélkülivé válik.

Amikor fókuszról beszélünk, egyszerűen arról van szó, hogy egy bizonyos dologra irányul a figyelem a fotón. Ez a dolog kerül a kép középpontjába, így tisztán érthetővé és befogadhatóvá válik az üzenet. El kell kerülnöd azt a hibát, hogy az embereknek találgatniuk kelljen a kép jelentését!

katicabogar

Mutass valódi embereket!

Az emberekről készült képek nagyon hatékonyak, amikor a felhasználóidat kell elkötelezned. Amikor emberi arcokat vagy egyszerűen embereket látunk, akkor azt érezzük, mintha kapcsolatba lépnénk a céggel. Ugyanakkor nagyon sok cég használ túl sok őszintétlen, hamis fotót, melyekkel bizalmat akarnak építeni. Ilyen tipikusan sok stockfotó, a nem igazán őszintén mosolygó emberekkel, melyek valami furcsa idillt sugallnak.

Érdemes olyan, jó minőségű, emberekről készült képeket használni, melyek illeszkednek a weboldalad karakteréhez. A képeknek hiteles tájékoztatást kell nyújtaniuk a termékedről vagy szolgáltatásodról, a cégedről, az értékeidről. Ha például van egy terméked, akkor olyan fotókat mutass be, melyen az emberek a termékedet használják.

Javítsd velük a webáruházad designját!

A termékeket sokszor a képek adják el. Az emberek nagymértékben támaszkodnak a képekre, amikor ismerkednek egy termékkel, és fontolgatják annak megvásárlását. Ezért a webáruházak legfontosabb elemét a termékekről készült képek jelentik. Minél vonzóbb az emberek számára a terméked megjelenése, annál bátrabban vágnak bele a megvásárlásába. Ami persze neked jobb konverziós arányokat hoz.

A termékképeknek ezért szépnek kell lenniük. Egy jó kép elvégzi a munkát: felkelti a felhasználó figyelmét, és megkülönbözteti a terméked a többitől. Ugyanakkor az ilyen képek elkészítése munkaigényes feladat.

Ami még fontos, hogy az elsődleges képed a hajtás felett jelenjen meg. Ne kelljen az embereknek görgetniük azért, hogy lássanak egy képet a termékről. Lényeges még, hogy a kép nagy legyen, olyan nagy, amekkora csak lehetséges. Ha pedig már elérted a maximális méretet, lehetővé kell tenned, hogy az emberek rázoomolhassanak az őket érdeklő részletekre. Ez különösen fontos például ruházati termékeknél, ahol sokat számítanak a részletek. Természetesen a zoomolt részleteknek is kiváló minőségűnek kell lenniük.

Fejezd ki a képekkel a személyiséged, és válts ki velük érzelmeket!

A képeknek meg kell ragadniuk a termék vagy szolgáltatás lényegét, ugyanakkor meg is kell lepniük és gyönyörködtetniük kell az embereket. A fotók képesek arra, hogy legalább annyira szórakoztassanak, mint amilyen mértékben informálnak.

Ha már van egy kielégítő felhasználói élményed, akkor a jó képekkel érzelmi kapcsolatot alakíthatsz ki a felhasználóiddal. Az érzelmileg erőteljes képek biztosítják azt, hogy az emberek mélyebben is érdeklődjenek majd a weboldalad iránt.

Használd a megfelelő fájltípust!

Mindig legyél tisztában azzal, hogy milyen képfájl-típust használsz! Általában a JPEG vagy JPG kínálja a legjobb megoldást, amikor jó minőségű, de kis méretű képekre van szükséged. Utóbbi főleg a weboldalsebesség miatt fontos. A JPEG-képek jellemzően olyan fotók, melyeken sok szín, árnyalat, árnyék található. A fotókat tudod hatékonyan tömöríteni JPEG-gel, ugyanakkor tény, hogy a tömörítés minőségromlással jár, hiszen az adatok egy része elveszik. Emellett átlátszó hátteret sem használhatsz, mint például a PNG-nél.

A PNG-t általában akkor szerencsés használni, amikor a képeden kevés a szín, az árnyalat. Tipikusan ilyenek a logók, illetve a különböző grafikák, illusztrációk. Sokkal jobb minőség érhető el PNG-vel, mint JPG-vel, és ha nem fotóról van szó, akkor a méret is kisebb lehet. A PNG-fájlokat tudod kicsinyíteni, nagyítani anélkül, hogy az bármiféle minőségromlással járna. Célszerű 24 bites PNG-t használni a 8 bites helyett, mert több színt jelenít meg, és jobb a minősége.

Dilemmád elsősorban akkor lehet a választásnál, ha a fotódon szöveg is található. Általában akkor érdemes JPEG-et választani, ha a képed nagyobb részét teszi ki a fotó. Fordított esetben válaszd a PNG-t. Egy PNG fájlt bármikor átalakíthatsz JPG-vé, azonban visszafelé már nem működik, illetve technikailag kivitelezhető, csak nincs értelme, mert a minőség nem fog javulni, csak nagyobb lesz a fájlméret.

Találd meg a helyes egyensúlyt a minőség és a fájlméret között!

Minél nagyobb felbontású a képed, annál szebb, hiszen annál jobb a minősége. Ez ugyanakkor a fájlméret növekedésével jár, ami lassítja az oldalad betöltődését. A weboldalaknál a legnagyobb mértékben a képek a felelősek a lassú betöltődésért. Ha gyorsítani kell a weboldaladat, akkor mindig az első legyen, hogy a képek fájlméretét csökkented! A weben találsz olyan online eszközöket, melyek viszonylag veszteségmentes módon képesek tömöríteni a képfájljaidat.

Figyelj arra, hogy a felhasznált kép kiterjedése ne legyen nagyobb, mint az éppen szükséges szélesség, mert ezáltal feleslegesen nagy a mérete. Ezért a fájltípuson és a tömörítés mértékén kívül mindig vágd meg a képed a megfelelő szélességre és magasságra. Azt se felejtsd el, hogy a kijelzők általában csak 72dpi felbontású képet tudnak megjeleníteni, így ennél nagyobb felbontás felesleges, csak a mérete nő a képnek. Végül pedig: soha ne használj nagyméretű, de alacsony minőségű képet, mert az pixelesnek és homályosnak fog látszani!

Néhány ökölszabály:

  • A teljes-kijelzős háttérképek és nagyméretű képek mérete se haladja meg az 1MB-t. Ha 1MB-nál nagyobb a fotód, akkor méretezd át.
  • Minden más képnek legalább 300KB alatt kellene maradnia, de lehet sokkal kisebb is.
  • Ha teljes-kijelzős háttérképet használsz (amiről hamarosan szó lesz a bejegyzésben), akkor tölts fel egy 2000 px szélességű képet.
  • Ha van lehetőséged az általad használd grafika programban, hogy webre optimalizált minőségben mentsd el a képet (save for web), akkor mindig használd ki.
  • Használhatsz olyan webes szoftvereket, mint a TinyPNG és társai. Ezekből elég sokat találsz ma már, és habár nem egyforma hatékonysággal teszik a dolgukat, mindegyik hatékonyan képes csökkenteni a fotód méretét.

Használj képaláírást és alt taget!

A képek szöveges információkkal való kiegészítése révén tudod keresőoptimalizálni őket. Ez persze elsősorban az eredeti képeknél fontos, nem a stockfotóknál. Egy képaláírás az embereknek is segíthet a kép jobb megértésében, nagyobb eséllyel olvassák el a képaláírást, mint a kenyérszövegedet. Ugyanakkor persze az is igaz, hogy felesleges erőltetni a képaláírásokat ott, ahol nincs szükség rájuk.

Az alt tagek a képek szöveges megfelelői, ha a böngésző nem jeleníti meg a képet. Az alt tag lényege, hogy leírja a kép tartalmát. SEO-szempontból fontos, mivel hasznos információkat ad a keresőmotoroknak, melyek ezeket az információkat is felhasználják, amikor képeket kell megjeleníteniük az egyes keresésekre.

A képhez kapcsolódó szövegek közé tartozik még a megfelelő fájlnév is, hiszen ez is szöveges információ. SEO szempontból természetesen a kulcsszavakat magukba foglaló képek jelentik az optimális választást. Az eredeti fájlneveket gyakran át kell forgalmaznod oly módon, hogy az a lehető legjobban leírja azt, ami a képen látható. Ez segít a keresőmotoroknak megérteni a képeidet. Ugyanakkor persze fájlnevekről van szó, tehát túl hosszúra ne nyúljanak.

Hogyan válassz háttérképet a weboldaladra?

A háttérképek a weboldalak szerves részét jelentik. A modern webdesignban sokkal fontosabbá váltak, mint eddig bármikor. A háttér szerves része a weboldaladnak, ugyanúgy egy képet közvetít a cégedről, mint mondjuk a logód, vagy a többi elem a weboldalon. Annál is inkább fontos elmerengeni egy kicsit a háttérképek kérdésén, mert manapság, amikor mindent eluralt a minimalizmus és sablonokból készülnek az oldalak, a nagy egyformaságban alig pár olyan elem van, ami segít kitűnni és kifejezni az egyéniségedet. Az egyik ilyen elem a háttér.

Mindez azonban csak akkor működik, ha a megfelelő képeket használod. Egy rossz választással azonban eltorzíthatod azt az üzenetet, amit a látogatóid felé akarsz közvetíteni, sőt UX problémák is felmerülhetnek.

Milyen lehetőségek közül választhatsz?

1. A hagyományos megoldás: az egyszínű háttér

Ha nem az a típus vagy, akinek a trendek határozzák meg az életét, hanem komolyan, megfontoltan intézed a dolgokat, akkor választhatod a régről megszokott megoldást: az egyszínű hátteret. Ez néhány éve még alapvető választás volt, gyakorlatilag nem nagyon volt más lehetőség, mint egyszínű hátteret alkalmazni.

Egy ilyen háttér jól nézhet ki, ugyanakkor nem állítható róla, hogy túlzottan izgalmas vagy egyedi lenne. Egy minimalista weboldal esetén pedig pont ez az, amit kompenzálni kellene. Egy egyszínű háttérrel már végletesen minimalistává válik a weboldalad, egész egyszerűen nem lesz képes felkelteni az emberek figyelmét, és unalmassá válik.

Ugyanakkor persze technikailag az egyszínű háttér legalább nem okoz majd sok gondot neked. Például reszponzív weboldalakon egyáltalán nem lesz problémád azzal, hogy mekkora kijelzőre kerül a háttér. Habár az egyszínű háttér egyszerűnek tűnik, azonban ilyenkor is van néhány dolog, amire figyelni kell:

  • A háttér és a szöveg kontrasztja, valamint a színek párosítása megfelelő legyen.
  • A kiválasztott színek érzelmi hatást gyakorolnak a látogatókra: felélénkítik vagy épp megnyugtatják őket.
  • A színek nem semlegesek, gyakran erősebb a hatásuk, mint egy fotónak.

Az olyan színek, melyek a színkörön egymáshoz közel találhatók inkább megnyugtatók a látogatók számára – természetesen annak függvényében, hogy milyen színt választottál -, miközben az egymással szemben lévő színek felkeltik a figyelmet, ha háttér-előtér kombinációba kerülnek. Mivel egy fotón jellemzően sokféle szín látható, ezért nem annyira egyszerű az érzelmi hatás.

Minták használata

A következő megoldást a minták használata jelenti. Az egyszínű hátterekhez képest az az előnyük, hogy miközben ezek is alapvetően egyszerű megoldást jelentenek, mégis megmutatható általuk némi egyediség. A mintáknál is ki lehet használni a színek erejét, vagyis kiválthatók velük a megfelelő érzelmek, ugyanakkor a minta révén különlegessé tehető a megjelenés.

Itt alig látszik a minta a háttérben, pedig van.

Itt alig látszik a minta a háttérben, pedig van.

Mivel egy minta folyamatosan ismétlődő elemekből tevődik össze, így technikailag elvileg nem okoz gondot, hogy milyen méretű kijelzőn jelenik meg. Ugyanakkor arra figyelni kell, hogy egy kisfelbontású kijelzőn más lehet a hatása, mint óriási felbontásnál, nagy kijelzőn. Emellett az is fontos, hogy ne váljon nagyon erőssé a mintázat, ne követeljen túlságosan sok figyelmet a felhasználótól. De figyeljünk arra is, hogy

  • a minta nagyon enyhe kontrasztban legyen a háttérszínnel,
  • megtörhető whitespace-ekkel, ami azt jelenti, hogy megpihenhet a szem,
  • különböző kijelzőméreteknél lehetőleg ugyanannyi minta jelenjen meg minden kijelzőn,
  • vagy olyan nagy legyen a minta, amennyire lehetséges, hogy ne zavarja a felhasználókat még nagyfelbontású és nagyméretű kijelzőn sem.

Absztrakt képek

Az absztrakt képek sokszor egyszerű megoldás jelentenek, még ha nem is feltétlenül könnyű a használatuk háttérképként. Jól alkalmazhatók olyan esetben, amikor valami egyedit akarsz adni a minimalista weboldaladhoz, de nem akarod követni a ma olyannyira népszerű, óriási háttérképek trendjét.

Az absztrakt képek az egész weboldalnak adnak egyfajta kreatív kisugárzást, ugyanakkor megmarad a fókusz a szövegeken. Hátránya, hogy a design esetleg unalmassá válhat, a visszatérő látogatók előbb ráunnak, mint egy jó fotóra. Ez persze függ az absztrakt háttérkép összetettségétől, de egy egyszerű megoldásnál gyakorlatilag nincs semmi, ami egy második látogatáskor is érdekes lehet benne. Ha nem tudod mire gondolunk, akkor mutatjuk:

Egy absztrakt háttér.

Egy absztrakt háttér.

Háttérfotó, hero image

Trendi lett mostanában a teljes kijelzőn terpeszkedő háttérképeket használni a weboldalakon. De nemcsak egymást birkaként való követése áll a jelenség mögött, hanem a hatásosság és a praktikum is. Hiszen míg teljes erővel nyűgöz le egy asztali gép nagyméretű monitorán a faltól falig tartó fotó, addig értelmezhető marad az okostelefonok kijelzőjén is, merthogy azt is maximális, tehát a lehető legnagyobb szélességben elfoglalja. Minél nagyobb méretű egy kép, annál jobban át tudja adni a felhasználóknak egy márka identitását, de annál hatékonyabban működik a landing oldalakon is.

A háttérképeknek és háttérvideóknak mára kialakult egy felhasználási gyakorlata, mely segíti a felhasználói élmény és a usability optimális kialakítását és a tartalom hatékony megjelenítését. A képnek természetesen összhangban kell lennie a cég imidzsével és a célközönség jellemzőivel is. Ha ezeket pontosan sikerül eltalálni, akkor fogja elérni a megfelelő hatást a felhasználóknál. Egy teljes oldalt betöltő kép választásánál nagyobb a felelősség is, ahogy nagyobb az általa kiváltott hatás is, így érdemes időt szánni rá.

Mire figyelj a háttérképeknél?

Először is ne kezeld különállóként a hátteret és az előtérben szereplő információkat! Ezek együttesen képesek elérni egy bizonyos eredményt vagy célt. A legkomolyabb, háttérképekkel kapcsolatos hibák pont abból származnak, hogy külön kezelik a háttérképet, amire aztán attól szinte teljesen függetlenül ráhelyeznek valamit. De van azért még néhány dolog:

Figyelj az olvashatóságra!

Az első kérdés, amit fel kell tenned magadnak, hogy milyen hatással lesz az olvashatóságra a választott háttérkép? Az ugyanis fontos, hogy a szöveged olvasható legyen, így amikor mögé teszel egy háttérképet, megfelelő kontrasztnak kell lennie közöttük.

Ha nem vagy biztos abban, hogy jól olvasható a szöveged, viszont ragaszkodsz egy képhez, akkor vannak lehetőségeid. Képszerkesztő vagy akár CSS révén homályosíthatsz a képen, módosíthatsz a kontraszton, rátehetsz egy layert, hogy olvashatóbbá váljon a szöveg. Emellett persze fontos a megfelelő betűtípus és betűméret választása, hiszen jelentős mértékben hozzájárul az olvashatósághoz.

Legyen a kép releváns és rendezett

Olyan fotót kell választanod háttérképként, mely valamilyen módon kapcsolódik a cégedhez és a weboldaladhoz. Ez azt jelenti, hogy kötődik ahhoz a helyhez, ahol jelen vagy, esetleg a termékedhez vagy a szolgáltatásodhoz. Ugyanakkor abba az irányba is érdemes tapogatóznod, hogy a képpel erősítsd a weboldalad üzenetét. A háttérképre mindig úgy gondolj, mint az átfogó márkastratégiád egy fontos részére.

Az is fontos, hogy a kép ne legyen zsúfolt, mert elvonhatja a figyelmet a tartalomról, még akkor is, ha homályosítod, vagy módosítasz a színén. Ez persze nem azt jelenti, hogy nem használhatsz mozgalmas vagy más nagy hatású képet. Csak azt igyekezz elkerülni, hogy a kép elnyomja a tartalmat!

Figyelj a minőségére!

Egyrészt csak olyan képeket használj, melyek minősége kiváló, mert egyébként sérül a felhasználói élmény. A rossz minőségű kép zavarja az embereket. Ezért

  • ne tömörítsd olyan mértékben, hogy az torzuljon vagy pixelessé váljon.
  • Fotók esetében, illetve olyan képeknél, ahol sokféle szín, illetve színátmenet jelenik meg, jpg-tömörítést használj!
  • Mintához használt képeknél viszont válts png-re!
  • Ha teljes képernyőszélességű háttérképet használsz, akkor 1920 pixeles szélességű (full HD) képet alkalmazz!
  • 4K kijelzőkre viszont érdemes eltérő háttérképet használni.

Kerüld a stockfotókat!

Ma már egyre kevésbé javasolják a szakemberek a weben mindenhol megjelenő stockfotók használatát a weboldalakon. Eredetiségre és különbözőségre kell törekedni, melyhez nem ártanak a saját, egyedi képek sem. A nagyméretű, és a weboldal imidzsét alapvetően meghatározó háttérképeknél már végképp nem javasolt a stockfotók használata.

Legyen a háttered reszponzív!

Attól függően, hogy milyen kijelzőn nézed a weboldalad, változik az, hogy mennyi látszik a háttérképedből. Ez különösen akkor lényeges kérdés, amikor fotóról van szó, mint háttérképről. Ami esetleg lenyűgözőnek hat egy hatalmas monitoron, az borzalmas hatást válthat ki egy mobilon. A kulcsfontosságú részek ugyanis levágásra kerülhetnek, és a kép értelmezhetetlenné válik.

Ehhez először is olyan képet kell választanod, mely jól illeszkedik a különböző képarányokhoz (függőleges, vízszintes, négyzet). Egy ilyen fotó várhatóan jól néz majd ki nem csak asztali gépen, hanem mobilon is. Arra is vetned kell egy pillantást, hogy a CSS miként kezeli a képeket a különböző kijelzők esetén. Például a  background-size: cover; tulajdonsággal láthatóvá teheted az egész képet. Ugyanakkor valószínű, hogy egy kis igazításra szükség lehet a megfelelő megjelenítéshez minden eszközön.

Három megoldás van arra, hogy a háttérképed reszponzív legyen. Először is, a háttérkép ismétlődhet vízszintesen és függőleges irányban is, hasonlóan ahhoz, ahogy egy minta ismétlődik. De ez alapvetően csak absztrakt képeknél kivitelezhető megoldás.

Lehetséges olyan képet kiválasztani, ami ugyanolyan jól néz ki kicsi és nagy kijelzőn is. Attól függően persze, hogy milyen részletezettségű a háttérképed. Ez a megoldás általában jól működik például tájképeknél, ugyanakkor embereket ábrázoló fotóknál már nem annyira. Nem biztos, hogy egy 4K felbontású monitoron jól mutat egy képernyőt betöltő emberi arc.

Használj okos skálázást! Ez lenne a harmadik megoldás, ami elsőre valószínűleg furcsán hangzik. Ahelyett, hogy a képet mindig a megfelelő kijelzőmérethez igazítanád, úgy kell méretezned, hogy az nagyobb kijelzőknél mindig többet fedjen fel magából. Természetesen a legfontosabb részek minden kijelzőméretnél láthatóak maradnának, tehát a kisebb, okostelefonos kijelzőkön is értelmezhető maradna a háttérkép.

Mindez megoldható CSS-sel, illetve több háttérképpel a megfelelő felbontásokra. Ennek a módszernek a használatánál azonban meg kell győződnöd arról, hogy a felhasználóid mindig a legjobban optimalizált verzióját kapják a háttérképeknek.

Használj finom textúrákat!

Ha maradsz a mintáknál, akkor fontos, hogy olyat válassz, amelynél nem látszik sehol törés az illesztéseknél, vagyis egyetlen nagy képnek látszik az egész oldalon. Arra azonban figyelj, hogy nem minden textúra működik minden kijelzőméretnél, és a nagyméretű képfájlok használata rontani fogja az oldalad betöltési idejét.

Fontos a kifinomultság, hacsak nem brutalista megjelenésre törekszel. És itt is figyelned kell arra, hogy ne terheld túl a mintákkal a felhasználókat. Keress olyan képeket, melyekre a finom vonalak és színek jellemzőek, és amelyek kontrasztosak a tartalmaddal.

Kezdd nagyfelbontású képekkel, aztán vágj!

Amikor letöltesz képeket, hogy azokat felhasználd majd háttérképként, akkor mindig a lehető legnagyobb felbontást válaszd. Ez lehetőséget nyújt számodra a további szerkesztésre, vágásra, hogy végül a megfelelő méretű képet kapd. Hogy mi a megfelelő méret, a weboldaladon használt tároló méretétől függ. Míg bizonyos textúrák megfelelően nyújthatók vagy ismételhetők, más fotóknál ez nem működik, így vágnod kell a megfelelő szélességre. Használhatsz CSS média lekérdezéseket, hogy más kijelzőméretek meghívják a kisebb verziókat.

Végül pedig, amit még fontos észben tartani, hogy minden webdesign munka, így a háttérképek kiválasztása, megalkotása is az “üzenettel” kezdődik, amit a weboldal közvetíteni akar a közönsége felé. Az üzenet pedig alapvetően szavakat jelent. Tehát akármilyen furcsának is tűnik, a háttérképek kiválasztását azzal kezdd, hogy meghatározod mit is akarsz elmondani ezen képek előterében, tehát első körben össze kell állítanod a szöveg első vázlatát.

Ezzel a megoldással lehetsz csak biztos abban, hogy az üzenet és a háttérkép teljes összhangban lesznek egymással. Ha nem így teszel, akkor azt kockáztatod, hogy a háttérkép kívülállóvá válik, és elüt majd a weboldal tartalmától.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.