Shoprenter képek

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, azaz

• JPEG vagy JPG
• PNG
• WebP
• GIF

Vektoros fájlformátumok, azaz

• 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 oldalbetö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é.

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%.

Amennyiben a Beállítások > Labor oldalon engedélyezzük a "WebP képek automatikus kiszolgálása" beállítást, a gyors betöltési idők tartása érdekében a meglévő PNG és JPEG formátumú képeket a rendszer WebP-re konvertálja és ebben a formátumban jelenítjük meg a vásárlói felületen. Az eredeti képek nem változnak meg, csak a vásárlói felületen fognak .webp kiterjesztéssel megjelenni. Azon helyeken, ahol a rendszer nem konvertál WebP képeket de mégis azt szeretnénk használni, oda direktben WebP formátumban javasoljuk a képek feltöltését. Ilyen például a hírlevél feliratkozás modul illetve minden egyedi, szöveges tartalom oldal mint például a blog bejegyzések. 

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épmé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 a termékképek 1000x1000 méretűek, ebben az esetben helyesek lehetnek ezek a beállítások:
  

Gyakori probléma, hogy nemcsak 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.

A termékképek feltöltéséről itt olvasható külön útmutató.

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 Tartalom> Automatikus e-mailek menüpontban.
• 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épmé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.

A bannerek témánkénti ajánlott méretéről itt olvasható összefoglalónk.

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.