Nézz meg bármelyik weboldalt, amely az első másodpercekben elvesztett téged, és görgess vissza a tetejére. Valószínű, hogy a képeknek volt ehhez közük. Egy stockfotó mosolygó idegenekről, akik semmire sem hasonlítanak azokra az emberekre, akiket ez a cég valójában kiszolgál. Egy főkép, amely annyira homályos, hogy bármelyik cég bármelyik iparágában lehetne. Vagy egyáltalán nincsenek képek, amitől az oldal kopárnak és befejezetlennek érződik. A képek a weboldalon nem dekorációk. Kommunikáció. Ez a cikk bemutatja, mit tesznek valójában a weboldalképek, hogyan válaszd ki a megfelelőket, hová valók az egyes oldalakon, és mi történik, ha rosszul csinálod.
A látogatók gyorsabban dolgozzák fel a képeket, mint a szavakat. Mielőtt bárki elolvasná a főcímedet, az agya már kialakított egy első benyomást a látványból. Ez azt jelenti, hogy a képeid érvelnek a cégedről, mielőtt te megtehetnéd. A kérdés az, hogy ez-e az az érv, amelyet el akarsz mondani.
Mit csinálnak valójában a weboldalképek?
Az oldaladon minden kép mond valamit a látogatónak. A főoldalad főképe azt mondja: "ilyen cég vagyunk, és ezeknek szólunk". A rólunk oldalad fotója azt mondja: "valódi emberek vannak itt". A szolgáltatás oldalad termékképe azt mondja: "ezt kapod, ha velünk dolgozol".
Ha ezek a jelek világosak és relevánsak, a látogatók eligazodnak. Ha homályosak vagy általánosak, a látogatók semmit sem éreznek, ami a legrosszabb kimenetel. Az a látogató, aki semmit nem érez, nem talál okot az olvasás folytatására.
A képek azt is irányítják, hová megy a tekintet. Ez az oldal vizuális hierarchiájának lényege. Egy jól elhelyezett kép odavonja a figyelmet ahhoz a szakaszhoz, amely számít. Egy rosszul elhelyezett megosztja a figyelmet, és a látogató bizonytalan lesz abban, hová nézzen legközelebb. Minden kép azzal érdemelje ki a helyét, hogy segít a látogatónak a helyes irányba haladni.
Valódi fotók vagy stockfotók: számít ez?
Igen. Többet, mint a legtöbben várják.
A látogatók jobban felismerik a stockfotókat, mint öt évvel ezelőtt. A tökéletesen megvilágított tárgyalószoba négy sokszínű szakemberrel, akik egy laptopra bólogatnak. A kézfogás egy városkép előtt. A mosolygó nő kávéscsészével. Ezek a képek annyira elterjedtek, hogy a látogatók egyfajta vizuális immunitást fejlesztettek ki velük szemben. Látják őket, és semmit nem érzékelnek.
A valódi fotók az ellenkezőjét teszik. Egy fotó a valódi üzletedről, a valódi csapatodról, a valódi elkészült munkádról. Ezek a képek rád jellemzőek, és csak rád. Aki látja őket, bizonyítékot kap arra, hogy a weboldal mögött valódi cég áll, ami az egyik legértékesebb dolog, amit egy kép közölhet. Még egy jó fényben készült telefonos fotó is gyakran hatékonyabb, mint egy csiszolt stockfotó, mert valódi.
Ennek ellenére a stockfotónak megvan a helye. Blogcikkekhez, elvont fogalmak illusztrálásához, másodlagos képhelyek kitöltéséhez, ahol a konkrétság kevésbé számít, egy jól kiválasztott stockfotó elvégzi a feladatot. A szabály: használj valódi fotókat, ahol a bizalom a tét, és stockfotókat ott, ahol a kép pusztán a tartalmat támogatja, nem pedig a cégedről állít valamit.
Hogyan válaszd ki a megfelelő képet az egyes oldalakhoz?
Mielőtt képet keresnél, kérdezd meg, milyen feladatot kell ellátnia az adott oldalon.
A főoldaladon a főképnek közölnie kell, mit csinálsz és kinek, mielőtt bárki elolvasna egy szót. Ha a látogató csak a főképedre nézne, és fogalma sem lenne, milyen iparágban vagy, a kép nem végzi a dolgát.
A rólunk oldaladon a képnek személyesnek kell lennie. Mutasd az embereket. Mutasd a helyet. Mutass valamit, ami emberivé és konkréttá teszi a céget, a vállalati és névtelen helyett.
A szolgáltatás vagy termék oldalán az eredményt mutasd. Előtte-utána kép egy felújító cégnek. Képernyőkép a vezérlőpultról egy szoftvereszköznek. Fotó az elkészült ételről egy vendéglátó cégnek. Az eredményt mutató képek meggyőzőbbek, mint a folyamatot mutatók, mert arra a kérdésre válaszolnak, amelyet a látogató valójában feltesz: mi lesz az enyém, ha ez kész?
Ha tudod a feladatot, akkor keresd meg a képet. Nem fordítva.
Mitől dolgozik egy kép ellened?
Irrelevancia
Az a kép, amelynek semmi konkrétat nem kell mondania a cégedről, a szolgáltatásodról vagy az ügyfeledről, azt mondja a látogatónak, hogy senki nem gondolkodott gondosan az oldal vizuális élményén. Ez a benyomás megmarad.
Eltérés
Ha a szöveged meleg és beszélgetős, de a képeid hidegek és vállalatiak, az oldal következetlennek érződik. A látogatók ezt a diszharmóniát akkor is észreveszik, ha nem tudják megnevezni. A kép hangulatának és a szöveg hangulatának egyeznie kell.
Lassú betöltés
A nagy, tömörítetlen képek a leggyakoribb ok arra, hogy a weboldalak lassan töltődnek be. Az az oldal, amely telefonon több mint három másodpercig tölt be, a látogatóinak jelentős részét elveszíti, mielőtt bármit látnának. Minden feltöltött képet tömöríteni kell a webre. A legtöbb weboldal-platform ennek egy részét automatikusan kezeli, de érdemes tudni, mit töltesz fel. Nézd meg, hogyan hat a weboldal sebessége a látogatókra és a keresési helyezésekre a teljes képért.
Hiányzó alt szöveg
Az oldalad minden képének szüksége van egy rövid leírásra arról, mit ábrázol, az alt szöveg mezőben megírva. Ez két okból számít. A képernyőolvasót használó látogatók az alt szövegre hagyatkoznak annak megértéséhez, mit tartalmaz a kép. A keresők az alt szöveget használják a képek indexeléséhez. Ha kihagyod, gyorsan elveszíted a hozzáférhetőségi pontokat és a SEO-értéket is.
Hová kerüljenek a képek az oldalaidon?
Nincs univerzális szabály a képelhelyezésre, de van néhány minta, amely következetesen működik.
A legerősebb képedet oda tedd, ahová a látogatók először néznek. A legtöbb oldalon ez a felső szakasz, a hajtás felett. Ha a látogató legörget, mielőtt elköteleződne az olvasásra, a második képhely, valahol az oldal közepén, elkapja görgetés közben. A hosszú oldal alján lévő harmadik kép újra leköti azokat a látogatókat, akik majdnem végigolvasták.
Használj képeket a hosszú szövegrészek megtörésére, de csak akkor, ha a kép hozzátesz valamit. Az a kép, amely a mellette lévő bekezdésben tett pontot illusztrálja, feladatot lát el. Az a kép, amelyet csak azért tettek oda, mert a szakasz túl hosszúnak tűnt, töltelék, és a látogatók ezt észreveszik.
Mobilon a képek elhelyezése változik, mert a képernyő keskeny, és a képek függőlegesen egymásra kerülnek. Az a kép, amely asztali gépen a szöveg mellett áll, mobilon fölötte vagy alatta jelenik meg. Teszteld, hogyan néz ki az egyes oldal telefonon, és győződj meg róla, hogy a kép az új helyén is értelmes. Ez része annak, hogy az oldalad minden oldalon követi a reszponzív dizájn elveit.
Milyen fájlformátumúak legyenek a képeid?
A rövid változat:
- JPEG fényképekhez. Kis fájlméret, magas minőség, mindenhol működik.
- PNG logókhoz, ikonokhoz és minden olyanhoz, aminek átlátszó háttere vagy éles szövege van.
- WebP mindkettőhöz, ha a platformod támogatja. Azonos minőségi szinten kisebb fájlokat állít elő, mint a JPEG és a PNG. A legtöbb modern böngésző gond nélkül kezeli a WebP-t.
- SVG ikonokhoz és egyszerű illusztrációkhoz. Tökéletesen skálázódik bármilyen méretre, apró fájlmérettel.
A fájlméretnél a szabványos oldalképeknél 200 kilobájt alatti célt tűzz ki. A főképek elmehetnek körülbelül 400 kilobájtig. Ami ennél nagyobb, azt tömörítened kell feltöltés előtt. Egy öt megabájtos telefonos fotónak nincs helye egy weboldalon.
Mi az az alt szöveg, és miért kell minden képnek?
Az alt szöveg egy rövid írott leírás, amely egy képhez van csatolva. A kép címkéjében ül az oldalon, a látó látogatók számára láthatatlan, de a képernyőolvasók és a keresők elolvassák. Mindkettőnek szüksége van rá ahhoz, hogy értelmezze, mit tartalmaznak a képeid.
A hozzáférhetőség szempontjából az alt szöveg az, ahogyan a képernyőolvasót használó látogatók megtapasztalják az oldalad képeit. Nélküle ezek a látogatók semmit sem hallanak, amikor a kép betöltődik, ami rést hagy abban, amit közölni akartál. A SEO szempontjából a keresők nem látják a képeket úgy, ahogy az emberek. Az alt szöveg révén értik meg, mit mutat a kép, és releváns-e az oldalhoz, amelyet támogat.
Az alt szöveg jó megírása azt jelenti, hogy leírod, mi van ténylegesen a képen, konkrétan és egyszerűen. Egy elkészült konyhafelújításról szóló fotó alt szövege legyen például "fehér shaker stílusú konyha márvány munkalappal a felújítás után" a "konyha fotó" vagy az "image1" helyett. Ha a kulcsszavad természetesen belefér a leírásba, add hozzá. De elsősorban a leírásra írj. Az az alt szöveg, amely csak a kulcsszavak ismétlésére létezik, mindkét célt elvéti.
Minden feltöltött képhez legyen megírt alt szöveg, mielőtt az oldal élesedik. Képenként kevesebb mint egy percet vesz igénybe, és hat arra is, hogy ki fér hozzá a tartalmadhoz, és arra is, hogyan rangsorolódnak az oldalaid.
Hogyan kezeli a WEMASY a képeket
A WEMASY weboldalépítője képblokkokat tartalmaz, amelyeket az oldal bármelyik szakaszához hozzáadhatsz. Közvetlenül az építőben töltesz fel, kód nélkül helyezed el és méretezed át, és ugyanabban a lépésben adod meg az alt szöveget. A képek automatikusan reszponzívan jelennek meg, így minden képernyőmérethez igazodnak, anélkül hogy külön változatokat kellene készítened asztali gépre és mobilra.
A WEMASY oldalszakaszai támogatják a képeket a szöveg mellett rugalmas oszlopelrendezésekben, vagy teljes szélességű háttérként olyan szakaszoknál, ahol egy erős látvány adja meg a hangot. Így vagy úgy, a kép ahhoz a tartalomhoz kapcsolódik, amelyet támogat, ahelyett hogy lazán lebegne az elrendezéstől.
Nézd meg, mi tartozik bele a WEMASY weboldalépítőben, vagy nézd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések a weboldalképekről
Kellenek profi fotók a weboldalamhoz?
A profi fotók valódi különbséget jelentenek a kulcsoldalakon, különösen a főoldalon és a rólunk oldalon, ahol a bizalom kialakul. Másodlagos képekhez, blogcikkekhez és támogató vizuális elemekhez egy modern telefonnal, jó fényben készült fotó is rendben van. A prioritás az, hogy a kép valódi és releváns legyen a céged számára, nem az, hogy profi készítette. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon be tudod állítani.
Hány kép legyen a főoldalon?
Elég ahhoz, hogy támogassa a szakaszokat, de nem annyi, hogy az oldal zsúfoltnak érződjön vagy lassan töltődjön be. Egy erős főkép, egy-két kép az oldal törzsében, és opcionálisan egy csapat- vagy munkahelyi fotó lejjebb ésszerű szerkezet a legtöbb kisvállalkozás főoldalához. Minden kép azzal érdemelje ki a helyét, hogy nem csak helyet tölt ki.
Használhatok stockfotó oldalakról származó képeket a weboldalamon?
Igen, bizonyos feltételekkel. A stockfotó oldalak olyan licenceken kínálnak képeket, amelyek engedélyezik a kereskedelmi felhasználást, de a felhasználás előtt ellenőrizd az egyes képek feltételeit. A gyakorlati korlát az, hogy ezek a képek sok más oldalon is megjelennek, ezért támogató és másodlagos képhelyekre használd őket, ne elsődleges vizuális elemként a magas bizalmat igénylő oldalakon, mint a főoldal vagy a rólunk oldal.
Mekkora méretű képeket töltsek fel a weboldalamra?
Feltöltés előtt tömörítsd. A legtöbb oldalképnél 200 kilobájt alatti, a főképeknél 400 kilobájt alatti célt tűzz ki. Fényképekhez JPEG-et, logókhoz és átlátszó képekhez PNG-t, és WebP-t használj, ha a platformod támogatja. Mindig méretezd át a képet arra a maximális szélességre, amelyen megjelenik, feltöltés előtt, ahelyett hogy a böngészőre bíznád a lekicsinyítést.
Befolyásolják a képek a weboldalam keresési helyezéseit?
Igen, két módon. A nagy, tömörítetlen képek lassítják az oldaladat, amit a keresők figyelembe vesznek a rangsorolásnál. Az alt szöveg nélküli képek elszalasztják a lehetőséget, hogy elmondják a keresőknek, mit tartalmaz az oldal. A megfelelően méretezett, leíró alt szöveggel ellátott képek az oldal sebességéhez és a keresési láthatósághoz is hozzájárulnak.