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.

sr-img-guide-webp.jpg

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.

image-20201113-113218.png

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.

sr-akad_mia_png-vs-jpg_2.jpg

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

sr-akad_mia_png-vs-jpg_3.jpg

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:
    img-size.PNG

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.

sr-akad_mia_png-vs-jpg_1.jpg

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.
Van még kérdésed? Kérdés beküldése

Kérdésed van?

  • Böngéssz a Témák között!
  • Keress rá a konkrét kérdésedre!
  • Ha nem találtál megoldást a problémádra, vedd fel a kapcsolatot kollégáinkkal:
  • Írd meg kérdésed a Kérdés beküldése menüpontban!
  • Írj e-mailt az info@shoprenter.hu címre!
  • Írj chat-en webáruházad adminisztrációs felületén!
  • Hívj bennünket a 06-1/234-5011-es számon munkanapokon 9:00-17:00 között!
  • Hétvégén is elérhetők vagyunk e-mailben és chat-en 10:00-14:00 között.

Hibabejelentés