Képek feltöltése

Különböző típusú képeket használhat, például a céglogóját, termékképeket, diavetítéseket, bannereket és blogbejegyzés-képeket. A képeket vágással és átméretezéssel is átalakíthatja, és testreszabhatja a médiaelemek beállításait a témában, hogy módosítsa az üzletében megjelenített összes médiaelem szegélyét vagy árnyékát.

Ahhoz, hogy a képek pontosan úgy jelenjenek meg az online áruházában, ahogyan szeretné, a megfelelő képarányt kell használnia. A képek automatikusan optimalizálva lesznek a kirakathoz a Shopify Content Delivery Network (CDN) segítségével.

Kép feltöltése a témaszerkesztőben

A témaszerkesztőben képeket adhat hozzá a témájához. Képeket a Shopify adminisztrációs felületének Tartalom > Fájlok szakaszában is feltölthet. További információkért lásd a(z) Fájlok feltöltése és kezelése című részt.

Lépések:

Képek hozzáadása metamezők használatával

Ha a képeihez be vannak állítva metamezők, akkor a dinamikus forrásválasztó segítségével adhat hozzá képet az online áruházához. A metamezőkről és a támogatott képformátumokról további információt a Értékek hozzáadása a metamezőkhöz című részben talál.

Fókuszpont beállítása egy képen

A fókuszpontok segítségével meghatározhatja egy kép legfontosabb részét az online áruházában. Amikor fókuszpontot állít be egy képen, azt jelöli ki a fókuszterületként. A fókuszpontok mindig a kereten belül jelennek meg, még akkor is, ha a témája levágja a képet, hogy illeszkedjen az elrendezéshez. A fókuszpontok nagyobb kontrollt biztosítanak afölött, hogyan jelenik meg a kép különböző képernyőméreteken, és azokban az esetekben, amikor a témák eltérő képarányokat használnak.

Képenként csak egy fókuszpontot állíthat be, de a fókuszpontot bármikor módosíthatja vagy eltávolíthatja.

Fókuszpont-kompatibilitás a Shopify ingyenes témáival

Fókuszpontot a Shopify ingyenes témáinak alábbi verzióin állíthat be:

• A Horizon család összes témája
• Colorblock 3.0.0-s vagy újabb verzió
• Craft 5.0.0-s vagy újabb verzió
• Crave 5.0.0-s vagy újabb verzió
• Dawn 7.0.0-s vagy újabb verzió
• Origin 1.0.0-s vagy újabb verzió
• Publisher 1.0.0-s vagy újabb verzió
• Refresh 2.0.0-s vagy újabb verzió
• Ride 3.0.0-s vagy újabb verzió
• Rise 1.0.0-s vagy újabb verzió
• Sense 5.0.0-s vagy újabb verzió
• Spotlight 0.0.1-es vagy újabb verzió
• Studio 4.0.0-s vagy újabb verzió
• Taste 4.0.0-s vagy újabb verzió
• Trade 1.0.0-s vagy újabb verzió

Ha harmadik féltől származó témát használ, akkor ellenőrizze a téma dokumentációját, hogy megtudja, a témája támogatja-e a fókuszpontok használatát.

Fókuszpont hozzáadása egy képhez

Ha fókuszpontot ad egy képhez, majd a képet több helyen is felhasználja az online áruházában, akkor ugyanaz a fókuszpont érvényesül mindenhol, ahol a képet használja.

Attól függően, hogy a témája hogyan vágja le és méretezi át a képeket, a fókuszpont nem mindig lesz vizuálisan középre igazítva.

Lépések:

1. Kattintson egy képre a Shopify-adminisztrátor alábbi helyszíneinek bármelyikén:
   • A Tartalom > Fájlok szakaszban.
   • A témaszerkesztőben.
   • A Termékek szakaszban található termékismertetők Média szakaszában.
   • A Shopify Messaging e-mail-szerkesztőjében.
   • Bármely olyan erőforrás Metamezők szakaszában, amely kép hozzáadásához Fájlhivatkozás típusú metamezővel rendelkezik.
2. Annak a képrésznek a kiválasztásához, ahol a fókuszpontot be szeretné állítani, kattintson a képre, vagy húzza a kék pontot.
3. Kattintson a Mentés gombra.

Fókuszpont eltávolítása egy képről

Lépések:

1. Kattintson egy képre a Shopify-adminisztrátor alábbi helyszíneinek bármelyikén:
   • A Tartalom > Fájlok szakaszban.
   • A témaszerkesztőben.
   • A Termékek szakaszban található termékismertetők Média szakaszában.
   • A Shopify Messaging e-mail-szerkesztőjében.
   • Bármely olyan erőforrás Metamezők szakaszában, amely kép hozzáadásához Fájlhivatkozás típusú metamezővel rendelkezik.
2. Kattintson az Eltávolítás gombra.
3. Kattintson a Mentés újként gombra.

Képformátumok

A következő képformátumok támogatottak:

• JPEG
• Progresszív JPEG
• PNG
• GIF
• HEIC
• WebP

JPEG képek használata

A JPEG képek ideálisak fényképekhez és más, összetett színeket tartalmazó állóképekhez. A JPEG formátum több millió színből álló palettával rendelkezik. A JPEG veszteséges tömörítést is alkalmaz, ami segíthet az oldalak betöltési idejének gyorsan tartásában, anélkül, hogy a képminőség észrevehetően romlana. Használja a JPEG formátumot a következő típusú képekhez:

• termékek
• bannerek vagy diavetítések
• oldalak és blogbejegyzések

PNG-képek használata

A PNG-képek ideálisak az egyszínű, színátmenet nélküli grafikákhoz és ikonokhoz. A PNG formátum a képek átlátszóságát is támogatja. Használja a PNG formátumot a következő képtípusokhoz:

• logók
• ikonok
• szegélyek és díszítőelemek

Automatikus képtömörítés és formátumválasztás

A képek nem tömörítődnek, amikor feltölti őket a Shopify adminisztrációs felületére, ami segít megőrizni az eredeti minőségüket. Azonban az alábbiak megtörténhetnek annak érdekében, hogy az oldalak betöltési ideje gyors maradjon a vásárlói számára:

• A kiváló minőségű képek is tömörítésen eshetnek át, amikor az üzlet témáján keresztül jelennek meg.
• A Shopify automatikusan meghatározza a lehető legjobb fájlformátumot a képek megjelenítéséhez.
• Ha a vásárló webböngészője támogatja az olyan modern képformátumokat, mint a WebP és az AVIF (AV1 Image File Format), akkor a képek ezekben a formátumokban jelennek meg.
• A GIF-ek automatikusan animált WebP formátumra konvertálódnak, hogy a fájlméret csökkentésével javuljon a teljesítmény.

A legjobb képminőség érdekében vegye fontolóra a következőket:

• Töltsön fel nagyobb felbontású képeket, legfeljebb 5000x5000 pixeles vagy 25 megapixeles méretben.
• Válasszon kevésbé veszteséges képtípusokat, például PNG-t, a vonalrajzokhoz, szövegekhez és átlátszóságot tartalmazó ikonikus grafikákhoz.
• Használjon JPEG formátumot a termékképekhez vagy a diavetítésekhez.
• Az SVG-fájlok támogatottak, de korlátozásokkal rendelkeznek: nem alakíthatók át (átméretezés, vágás stb.) raszterizált formátum (JPEG, WebP, PNG) kérése nélkül.

Más fájltípusok, mint például a PSD (Photoshop Document), a TIFF (Tagged Image File Format) és a BMP (Bitmap), szintén elfogadottak, de feltöltéskor JPEG/PNG formátumra konvertálódnak.

Képfeltöltési korlátok

A Shopify rendszerébe történő képfeltöltésekre korlátozások vonatkoznak mind a megapixelek (MP), mind a megabájtban (MB) mért fájlméret tekintetében. A megapixelek azt jelzik, hogy egy kép hány millió képpontból áll. A megabájtok azt jelzik, hogy egy kép hány millió bájt memóriát vagy lemezterületet foglal el.

A Shopify rendszerébe feltöltött képek nem léphetik túl a következő korlátok egyikét sem:

• 20 megapixel
• 20 megabájt

A kép megapixelértékének megállapításához használhatja a következő egyenletet:

(pixelszélesség x pixelmagasság)/1 000 000

Például egy 4900x6930 pixeles felbontású kép az egyenlet alapján 33,9 megapixeles: (4900x6930)/1 000 000 = 33,9 MP.

A képek színprofiljai

Amikor megtekint egy képet az online áruházában, a kép színei eltérhetnek a Shopify rendszerébe feltöltött eredeti kép színeitől. Ez akkor fordulhat elő, ha a képnek van színprofilja, ami egy .ICC vagy .ICM kiterjesztésű fájlban tárolt adatkészlet.

A színprofilok gyakran be vannak ágyazva a képekbe, hogy segítsenek egységesíteni a színek megjelenítését a különböző eszközökön. Amikor a képek megjelennek az online áruházában, a színprofiljuk eltávolításra kerül.

A színprofilok a következő okok miatt kerülnek eltávolításra:

• Nem minden eszköz képes olvasni az .ICC vagy .ICM színprofilokat, így azok megtartása a képszínek következetlenségét eredményezheti a különböző eszközökön.
• Ha egy feltöltött kép nem tartalmaz színprofilt, akkor a webböngésző az sRGB profilt feltételezi, amely a leggyakoribb színprofil a képek internetes megjelenítéséhez. Ez biztosítja, hogy a képek ugyanúgy jelenjenek meg az összes főbb webböngészőn és eszközön.
• A színprofilok nagy mennyiségű lemezterületet foglalhatnak el, ami hosszabb oldalbetöltési időt eredményezhet.

Színprofil eltávolítása a képről

Eltávolíthatja a színprofilt a képéről, ha a Shopify rendszerébe való feltöltés előtt színprofil nélkül menti el. Ez a folyamat a képszerkesztő programtól függően változik.

Tekintse meg az Adobe dokumentációját a következő témákban: Színprofil hozzárendelése vagy eltávolítása (Illustrator, Photoshop) és Színprofil hozzárendelése vagy eltávolítása (InDesign).

Helyes gyakorlatok diavetítésekhez, képbannerekhez és teljes szélességű képekhez

Számos Shopify-téma tartalmaz olyan nagyméretű képeket vagy diavetítéseket, amelyek a böngésző magasságához méreteződnek, vagy alkalmazkodnak a képernyőmérethez.

Ha ilyen témát használ, vagy nagyméretű diavetítése vagy háttérképe van, akkor meg kell értenie, hogy mely képtípusok jelennek meg a legjobban.

Mivel a nagyméretű képek nem férnek el minden eszközön, a Shopify néha csak a kép egy részét jeleníti meg a használt eszköztől függően. Ha a diavetítés sok nagyméretű képet tartalmaz, akkor előfordulhat, hogy a képek egyes részei nem láthatók.

Tudnivalók a diavetítésekhez és képbannerekhez használt képekről

Annak érdekében, hogy a képek jól működjenek a témával, tartsa szem előtt a következőket:

• A diavetítésekhez vagy hátterekhez használt képek ne tartalmazzanak szöveget. Ha a szöveg magának a képnek a része, akkor a téma beállításaitól függően elmozdulhat, levágódhat vagy módosulhat. Használja a témaszerkesztőt szöveg és hivatkozások hozzáadásához a diavetítésekhez és hátterekhez.

• A diavetítésekben vagy háttérképként használt képekhez válasszon egyszerű képeket, hogy a rajtuk lévő szöveg könnyen olvasható legyen.

Széles képek magas képernyőkön

A széles képek bal és jobb oldala levágódhat, ha a megtekintéshez használt eszköznek magas a képernyője, például egy mobiltelefon vagy egy álló módban megtekintett táblagép. Az alábbi példában, ha az emberek a kép legfontosabb részei, akkor a kép jobb oldalán helyezhet el egy fókuszpontot.

Magas képek széles képernyőkön

A magas képek teteje és alja levágódhat, ha a megtekintéshez használt eszköznek széles a képernyője, például egy laptop vagy egy asztali monitor. Az alábbi példában, ha a cipő a kép legfontosabb része, akkor a kép alján helyezhet el egy fókuszpontot.

Képbetöltési viselkedés

Amikor meglátogat egy oldalt az online áruházában, észreveheti, hogy a képek először kissé homályosak, majd egy pillanat múlva élessé válnak. Ez normális jelenség, amely segít javítani az üzlete betöltési sebességét és a felhasználóélményt.

A Shopify-témák a késleltetett betöltés nevű technikát alkalmazzák, amely először a kép egy kisebb verzióját tölti be, míg a teljes felbontású kép a háttérben töltődik. Ez lehetővé teszi a vásárlók számára, hogy azonnal áttekintsék a tartalmat ahelyett, hogy megvárnák a nagyméretű képek teljes betöltődését. A folyamat általában kevesebb mint egy másodperc alatt lezajlik, de azt az érzetet kelti, hogy az üzlete gyorsabban töltődik be.

Ez a technika különösen előnyös a sok képet tartalmazó üzletek számára, mivel jelentősen javítja a kezdeti oldalbetöltési időt, és azonnali vizuális visszajelzést nyújt a vásárlóknak.

Képek hibaelhárítása