Shoprenter képek

Bevezető

Egy webáruházban sokféle képet használhatunk, beleértve a céges logót, a termékképeket, a bannereket, a blogbejegyzések képeit stb. Attól függően, hogy hogyan és hol szeretnénk képet használni, a legjobb lehet, ha bizonyos méretben és formátumban töltjük azt fel.

 

Kép formátumok

A Shoprenter a következő kép formátumokat támogatja:

Raszteres fájlformátumok

• JPEG vagy JPG
• PNG
• GIF

Vektoros fájlformátumok

• SVG

 

Mi a különbség a raszteres és a vektoros formátumok között?

A raszteres képek egy meghatározott pontokból álló rácsból állnak, amelyeket pixeleknek neveznek, ahol minden pixelhez színt rendelnek. A vektorképektől eltérően a raszterképek felbontástól függenek, vagyis egy méretben léteznek. A raszteres kép átalakításakor maguk a pixelek nyúlnak ki, ami „pixeles” vagy elmosódott képet eredményezhet.

A raszteres képeket általában fényképekhez, digitális és webes grafikákhoz használják (például hirdetések, közösségi média tartalom grafikák).

A raszteres képektől eltérően a vektoros képek felbontástól függetlenek. Ha egy vektorképet kicsinyítünk vagy nagyítunk, az alakjai nagyobbak lesznek, de nem veszít semmilyen részletet vagy pixelt. Mivel a kép mindig azonos lesz, méretétől függetlenül, nem létezik veszteséges vagy veszteség nélküli vektor képtípus.

Vektoros képeket általában logókhoz, ikonokhoz és digitális illusztrációkhoz használnak.

 

Mikor használjunk JPEG képeket?

A JPEG képek ideálisak fotográfiához és más összetett színes képekhez. A JPEG formátum palettája több millió színt tartalmaz. A JPEG veszteséges tömörítéssel is rendelkezik, ami hozzájárulhat a gyors oldal betöltéshez a képminőség észrevehető romlása nélkül. A JPEG lehetővé teszi, hogy kisebb fájlméretet hozzunk létre, mint egy PNG esetén.

Használjunk JPEG formátumot a következő típusú képekhez:

• termékképek
• hirdetések, bannerek
• blogbejegyzések

 

Mikor használjunk PNG képeket?

A PNG képek ideálisak grafikákhoz, ikonokhoz. Fontos előny és gyakran döntő tényező a PNG fájlok használatában, hogy - a JPEG-vel ellentétben - támogatják az átláthatóságot.

Használjunk PNG formátumot a következő típusú képekhez:

• logók
• ikonok
• határok és szegélyek

 

Akkor JPEG vagy PNG?

Nincs helyes vagy rossz válasz. A döntés során tartsuk szem előtt a fenti pontokat és optimalizáljunk azok alapján.

 

Mikor használjunk SVG képeket?

Az SVG jelentése Scalable Vector Graphics, XML alapú vektor képformátum a kétdimenziós grafikákhoz. Ideális választás logókhoz, ikonokhoz.

Előnye, hogy

• minden méretben ugyanolyan minőséget eredményez,
• a Google is indexeli,
• animálható,
• kisebb fájlméretet eredményez ami gyorsabb oldalbetöltést tesz lehetővé.

Hátránya, hogy SVG-t nem minden böngésző támogat, például az IE 9 és az ettől régebbi, valamint a régi Android (V3).

 

Tömörítési arányok

A gyors betöltési idők tartása érdekében a Shoprenter tömöríti a képeket amikor azok az áruházban megjelennek. A kép tömörítése a fájlméret csökkentését jelenti az oldal gyorsabb betöltése érdekében. A tömörítéssel jelentősen lerövidül a képek eléréséhez szükséges idő. A tömörítés a kép formátumától, méretétől és eredeti minőségétől függően megváltoztathatja a képminőséget.

A Shoprenter képminőségi szintje a tömörítés után 80%.

 

Korlátozás

A Shoprenterre történő képfeltöltések korlátozásokkal rendelkeznek a fájlméret tekintetében. A feltöltött képek nem haladhatják meg a 10 megabájtot.

 

Képtípusok és méretek

A Shoprenterben a legtöbb kép méretet beállíthatjuk az admin felületen a Beállítások -> Webshop beállítások -> Általános beállítások oldalon a Képek fülön.

Termékképek

Mire érdemes figyelni?

• Termékképek esetén lehetőleg mindet ugyanolyan arányban töltsünk fel. Ez lehet 1:1, 4:3 - lényegtelen. Ami fontos, hogy egyezzen, máskülönben a rendszer fehér részekkel fogja kiegészíteni a képet fent - lent vagy az oldalakon attól függően, hogy hogyan tér el a kép aránya a beállítotthoz képest.
• A "nagyméretű termék kép mérete" beállításnál ne adjunk meg nagyobbat mint amekkora méretűek az eredeti képeink, hiszen ebben az esetben a rendszer megpróbálja a képet felnagyítani ami így torzulni fog. (Egy raszteres 500x500-as kép nem lesz szép 700x700-ban)
• Minden beállításnál a mi képeink méretéhez kell az értékeket beállítani. Például ha termékképek 1000x1000 méretűek, ebben az esetben helyesek lehetnek ezek a beállítások:
  

Gyakori probléma, hogy nem csak a méretet hibázzuk el hanem az arányt is, ennek a következménye, hogy homályos, életlen képeket látunk.

Nincs általános beállítás, ami jó az egyik boltban az egyáltalán nem biztos, hogy jó a másikban is! Ez teljes mértékben a használt képektől függ.

 

Logó

Mire érdemes figyelni?

• SVG logót használjunk.
• A logó magassága témánként eltérő méretben limitálva lehet, ez egyedi CSS segítségével tetszőlegesen módosítható.
• Válasszuk a logónak a horizontális vagy vertikális elrendezését tudatosan asztali és mobil nézetben egyaránt.
• Nem minden levelező kliens támogatja az SVG formátumot, ezért abban az esetben ha mi így szeretnénk használni a logót, a kimenő levelekbe érdemes beállítani a PNG vagy JPEG változatot a Beállítások -> Megjelenés -> Automatikus e-mailek oldalon.
• Az admin felületen a Beállítások -> Webshop beállítások -> Általános beállítások oldalon a Logó fülön a feltöltött képpel megegyező arányú értékeket adjunk meg.

 

Banner

• A bannerkezelő modul beállításai és ajánlott kép méretei témánként eltérőek lehetnek.
• A bannerek magassága egyezzen meg, így elkerülhetők a bosszantó "ugrálások".
• A Shoprenterben az újabb témák esetén lehetőség van asztali és mobil eszközre külön képet is feltölteni.

 

Fontos információk

Számos Shoprenter téma nagy képeket vagy bannereket alkalmaz, ezért fontos megérteni, hogy milyen típusú képek fognak a legjobban működni.

Mivel a nagy képek nem férnek el minden eszközön, a Shoprenter néha csak a kép egy részét jeleníti meg a használt eszköztől függően, így előfordulhat, hogy a képek egyes részei nem láthatók.

• Ilyen például a Tokyo témában a bannerkezelő modulban szereplő képek. A Tokyo témához tartozó banner útmutató itt érhető el.
• Ugyanez a helyzet a magas képekkel, ezeknek a tetejét és alját levághatjuk, például a Korfu téma kicker image képei esetén.
• Egy másik gyakori megoldás, hogy bizonyos eszközön belezoomolunk a képbe, például a Stockholm téma kicker image modul képek esetén.

 

További tanácsok

Annak érdekében, hogy a képek jól illeszkedjenek a témához, az alábbiakat tartsuk szem előtt:

• Győződjünk meg arról, hogy az egyes képek fókuszpontja középen van. Amikor a képeket a Shoprenter levágja egyes képernyőkön, a fókuszpont látható lesz, míg a körülötte lévő területek rejtve vannak. (például a Korfu témában a kicker image modul)
• Az újabb témák esetén a bannerek esetében nem szükséges a szöveget a képre szerkeszteni, a modulban megadható cím, alcím és gomb is. Ezeket a szövegeket a képre szerkesztett szöveggel ellentétben a robotok is olvasni tudják, ezzel segíthetik a SEO-t, valamint egységes lesz a megjelenés.
• A modulokban használt képekhez válasszunk egyszerű képeket, hogy minden szöveg könnyen olvasható legyen rajta. Ha egy modulban fehér szöveget jelenítünk meg, ne válasszunk fehér háttérképet hozzá, mert a szöveg ebben az esetben nem lesz olvasható.
• Figyeljünk arra, hogy megfelelően nevezzük el a képfájlokat, ugyanis a Google ez alapján fogja tudni, hogy mit ábrázol pontosan a kép. Használhatunk kulcsszavakat is a képek leírására és törekedjünk a minél pontosabb elnevezésre. 
• Ne felejtsük el feltölteni a képekhez tartozó alt text-et! Weboldalunk forráskódjában lehetőségünk van elhelyezni egy rövid leírást, mely SEO szempontból - akárcsak az előző pontban említett képek elnevezése - rendkívül fontos lépés. Az alt text remek lehetőség arra, hogy további kulcsszavakat helyezzünk el a Google számára, így mindenképp érdemes erre kellő figyelmet fordítanunk, vagy adott esetben szakértői segítséget kérnünk.

Bízunk benne, hogy tetszett a leírás és könnyen hasznosítani fogod a webáruházban. További kérdés esetén elértek minket az info@shoprenter.hu címen vagy a +36-1/234-5012 számon.