Nahrávanie obrázkov

Môžete použiť rôzne typy obrázkov, napríklad logo spoločnosti, obrázky produktov, prezentácie, bannery a obrázky blogových príspevkov. Obrázky môžete aj transformovať, orezávať a meniť ich veľkosť, ako aj prispôsobiť nastavenia médií v téme, ak chcete zmeniť okraje alebo tiene pre všetky médiá zobrazené v obchode.

Ak chcete, aby sa obrázky v online obchode zobrazovali presne podľa vašich predstáv, musíte použiť správny pomer strán obrázka. Obrázky sa pre výkladnú skriňu automaticky optimalizujú pomocou siete Shopify Content Delivery Network (CDN).

Nahranie obrázka v editore tém

Obrázky do témy môžete pridať v editore tém. Obrázky môžete nahrať aj v časti Obsah > Súbory u administrátora Shopify. Ďalšie informácie nájdete v časti Nahrávanie a správa súborov.

Kroky:

Pridanie obrázkov pomocou metapolí

Ak máte pre obrázky nastavené metapolia, pomocou výberu dynamického zdroja môžete pridať obrázok do svojho online obchodu. Ďalšie informácie o metapoliach a podporovaných formátoch obrázkov nájdete v časti Pridávanie hodnôt do metapolí.

Nastavenie ústredného bodu na obrázku

Ústredné body môžete použiť na definovanie najdôležitejšej časti obrázka vo vašom online obchode. Keď na obrázku nastavíte ústredný bod, stane sa centrom pozornosti. Ústredné body sa vždy zobrazujú v zábere, aj keď máte tému, ktorá obrázok oreže tak, aby zodpovedal rozloženiu. Ústredné body vám poskytujú väčšiu kontrolu nad tým, ako sa obrázok zobrazuje na rôznych veľkostiach obrazoviek a v prípadoch, keď témy používajú rôzne pomery strán.

Každý obrázok môže mať len jeden ústredný bod, no kedykoľvek ho môžete zmeniť alebo odstrániť.

Kompatibilita ústredného bodu s bezplatnými témami Shopify

Ústredný bod môžete nastaviť v nasledujúcich verziách bezplatných tém Shopify:

• Všetky témy z rodiny Horizon
• Colorblock verzie 3.0.0 a novšej
• Craft verzie 5.0.0 a novšej
• Crave verzie 5.0.0 a novšej
• Dawn verzie 7.0.0 a novšej
• Origin verzie 1.0.0 a novšej
• Publisher verzie 1.0.0 a novšej
• Refresh verzie 2.0.0 a novšej
• Ride verzie 3.0.0 a novšej
• Rise verzie 1.0.0 a novšej
• Sense verzie 5.0.0 a novšej
• Spotlight verzie 0.0.1 a novšej
• Studio verzie 4.0.0 a novšej
• Taste verzie 4.0.0 a novšej
• Trade verzia 1.0.0 a novšia

Ak používate tému od tretej strany, prečítajte si dokumentáciu k svojej téme a zistite, či podporuje používanie ústredných bodov.

Pridanie ústredného bodu do obrázka

Ak do obrázka pridáte ústredný bod a následne ho použijete na viacerých miestach vo svojom online obchode, daný ústredný bod sa aplikuje všade, kde sa obrázok zobrazí.

V závislosti od toho, ako vaša téma orezáva a mení veľkosť obrázkov, ústredný bod nemusí byť vždy vizuálne v strede.

Kroky:

1. Kliknite na obrázok na ktoromkoľvek z nasledujúcich miest v administrátorovi Shopify:
   • V sekcii Obsah > Súbory.
   • V editore tém.
   • V sekcii Médiá v ponukách produktov v sekcii Produkty.
   • V e-mailovom editore Shopify Messaging.
   • V sekcii Metapolia pri akomkoľvek zdroji, ktorý má metapole typu Odkaz na súbor na pridanie obrázka.
2. Ak chcete vybrať časť obrázka, pre ktorú chcete nastaviť ústredný bod, kliknite na obrázok alebo potiahnite modrú bodku.
3. Kliknite na Uložiť.

Odstránenie ústredného bodu z obrázka

Kroky:

1. Kliknite na obrázok na ktoromkoľvek z nasledujúcich miest v administrátorovi Shopify:
   • V sekcii Obsah > Súbory.
   • V editore tém.
   • V sekcii Médiá v ponukách produktov v sekcii Produkty.
   • V e-mailovom editore Shopify Messaging.
   • V sekcii Metapolia pri akomkoľvek zdroji, ktorý má metapole typu Odkaz na súbor na pridanie obrázka.
2. Kliknite na Odstrániť.
3. Kliknite na Uložiť ako nové.

Formáty obrázkov

Podporované sú nasledujúce formáty obrázkov:

• JPEG
• Progresívny formát JPEG
• PNG
• GIF
• HEIC
• WebP

Používanie obrázkov vo formáte JPEG

Obrázky vo formáte JPEG sú ideálne na fotografie a iné statické obrázky s komplexnými farbami. Formát JPEG má paletu s miliónmi farieb. Využíva aj stratovú kompresiu, vďaka ktorej je doba načítania stránky rýchla bez viditeľnej straty kvality obrázka. Formát JPEG používajte pre nasledujúce typy obrázkov:

• produkty
• bannery alebo prezentácie
• stránky a blogové príspevky

Používanie obrázkov vo formáte PNG

Obrázky vo formáte PNG sú ideálne na grafiku a ikony s plnými farbami a bez prechodov. Formát PNG podporuje aj priehľadnosť obrázkov. Formát PNG používajte pre nasledujúce typy obrázkov:

• logá
• ikony
• orámovania a okraje

Automatická kompresia a výber formátu obrázkov

Obrázky sa pri nahraní do administrátora Shopify nekomprimujú, čo pomáha zachovať ich pôvodnú kvalitu. V záujme zabezpečenia rýchlej doby načítania stránky pre vašich zákazníkov však môže dôjsť k nasledujúcim situáciám:

• Keď sa obrázky poskytujú prostredníctvom témy obchodu, pri obrázkoch s vysokou kvalitou môže dôjsť ku kompresii
• Shopify pri doručovaní obrázkov automaticky určí najlepší možný formát súboru
• Ak webový prehliadač zákazníka podporuje moderné formáty obrázkov, ako napríklad WebP a AVIF (formát obrazového súboru AV1), obrázky sa doručia v týchto formátoch
• Súbory GIF sa automaticky konvertujú na animovaný formát WebP, čím sa zmenší veľkosť súboru a zlepší výkonnosť

V záujme dosiahnutia čo najlepšej kvality obrázkov zvážte nasledujúce kroky:

• Nahrávajte obrázky vo vyššom rozlíšení až do 5 000 x 5 000 px alebo 25 megapixelov
• Pre čiarové kresby, text a grafické ikony s priehľadnosťou vyberajte typy obrázkov s menšou stratou, ako napríklad PNG
• Pre obrázky produktov alebo prezentácie používajte formát JPEG
• Súbory SVG sú podporované, majú však obmedzenia – nedajú sa transformovať (meniť veľkosť, orezávať atď.) bez vyžiadania rastrovaného formátu (JPEG, WebP, PNG)

Iné typy súborov, ako napríklad PSD (dokument z aplikácie Photoshop), TIFF (Tagged Image File Format) a BMP (Bitmapa), sú akceptované, ale pri nahrávaní sa skonvertujú na formát JPEG/PNG.

Limity nahrávania obrázkov

Nahrávanie obrázkov na platformu Shopify má obmedzenia, pokiaľ ide o megapixely (MP) aj veľkosť súboru, ktorá sa meria v megabajtoch (MB). Megapixely sa používajú na vyjadrenie toho, z koľkých miliónov pixelov sa obrázok skladá. Megabajty vyjadrujú, koľko miliónov bajtov pamäte alebo miesta na disku obrázok zaberá.

Obrázky nahrané na platformu Shopify nesmú prekročiť ani jeden z týchto limitov:

• 20 megapixelov
• 20 megabajtov

Na výpočet hodnoty megapixelov obrázka môžete použiť nasledujúcu rovnicu:

(šírka v pixeloch x výška v pixeloch)/1 000 000

Napríklad obrázok s rozlíšením 4 900 px × 6 930 px má podľa rovnice 33,9 megapixela: (4900x6930)/1 000 000 = 33,9 MP.

Farebné profily obrázkov

Pri prezeraní obrázka v online obchode sa môžu farby na obrázku zobrazovať inak ako na pôvodnom obrázku, ktorý ste nahrali na platformu Shopify. Môže sa to stať vtedy, ak má obrázok farebný profil, čo je množina údajov uložených v súbore s príponou .ICC alebo .ICM.

Farebné profily sa často vkladajú do obrázkov, aby pomohli štandardizovať spôsob zobrazovania farieb na rôznych zariadeniach. Keď sa obrázky zobrazujú vo vašom online obchode, ich farebné profily sa odstránia.

Farebné profily sa odstraňujú z nasledujúcich dôvodov:

• Nie všetky zariadenia dokážu načítať farebné profily .ICC alebo .ICM, takže ich ponechanie môže viesť k nekonzistentným farbám obrázkov na rôznych zariadeniach.
• Keď nahraný obrázok neobsahuje profil farieb, webový prehliadač predpokladá profil sRGB, čo je najbežnejší profil farieb používaný na zobrazenie obrázkov na webe. Zabezpečí sa tým, že sa obrázky budú zobrazovať rovnako vo všetkých hlavných webových prehliadačoch a zariadeniach.
• Profily farieb môžu zaberať veľa miesta na disku, čo môže viesť k dlhšej dobe načítania stránky.

Odstránenie profilu farieb z obrázka

Profil farieb z obrázka môžete odstrániť tak, že ho pred nahraním do služby Shopify uložíte bez neho. Tento proces sa líši v závislosti od vášho programu na úpravu obrázkov.

Pozrite si dokumentáciu spoločnosti Adobe o tom, ako priradiť alebo odstrániť profil farieb (Illustrator, Photoshop) a priradiť alebo odstrániť profil farieb (InDesign).

Osvedčené postupy pre prezentácie, obrázkové bannery a obrázky na celú šírku

Mnohé témy Shopify obsahujú veľké obrázky alebo prezentácie, ktoré sa prispôsobia výške vášho prehliadača alebo veľkosti obrazovky.

Ak používate niektorú z týchto tém alebo máte veľkú prezentáciu či obrázok na pozadí, musíte vedieť, aké typy obrázkov sa zobrazujú najlepšie.

Keďže veľké obrázky sa nezmestia na všetky zariadenia, služba Shopify niekedy zobrazí iba časť obrázka v závislosti od používaného zariadenia. Ak vaša prezentácia obsahuje veľa veľkých obrázkov, môže sa stať, že niektoré ich časti nebudú viditeľné.

Dôležité informácie pri používaní obrázkov pre prezentácie alebo obrázkové bannery

Aby obrázky s témou fungovali správne, pamätajte na nasledujúce body:

• Obrázky, ktoré používate pre prezentácie alebo na pozadí, by nemali obsahovať text. Ak je text priamou súčasťou obrázka, téma ho môže posunúť, orezať alebo upraviť. Na pridanie textu a odkazov do prezentácií a na pozadia použite editor tém.

• Pre prezentácie alebo pozadia vyberajte jednoduché obrázky, aby sa prekrývajúci text dal ľahko čítať.

Široké obrázky na vysokých obrazovkách

Široké obrázky môžu byť zľava a sprava orezané, ak má zariadenie použité na ich zobrazenie vysokú obrazovku (napríklad mobilný telefón alebo tablet otočený na výšku). V príklade nižšie platí, že ak sú ľudia najdôležitejšou časťou obrázka, môžete umiestniť fokálny bod na pravú stranu obrázka.

Vysoké obrázky na širokých obrazovkách

Vysoké obrázky môžu byť zhora a zdola orezané, ak má zariadenie použité na ich zobrazenie širokú obrazovku (napríklad prenosný počítač alebo monitor počítača). V príklade nižšie platí, že ak sú topánky najdôležitejšou časťou obrázka, môžete umiestniť fokálny bod na jeho spodnú časť.

Správanie pri načítaní obrázkov

Keď navštívite stránku vo svojom online obchode, môžete si všimnúť, že obrázky sú na začiatku mierne rozmazané a po chvíli sa zaostria. Ide o očakávané správanie, ktoré pomáha zlepšiť rýchlosť načítania obchodu a používateľskú skúsenosť.

Témy Shopify používajú techniku nazývanú oneskorené načítavanie, ktorá najprv načíta menšiu verziu obrázka, zatiaľ čo sa na pozadí načítava obrázok v plnom rozlíšení. Zákazníci tak môžu ihneď preskúmať obsah namiesto toho, aby čakali na úplné načítanie veľkých obrázkov. Tento proces zvyčajne trvá menej ako sekundu a vytvára dojem, že sa váš obchod načíta rýchlejšie.

Táto technika je obzvlášť prínosná pre obchody s veľkým množstvom obrázkov, pretože výrazne skracuje počiatočnú dobu načítania stránky a zákazníkom poskytuje okamžitú vizuálnu spätnú väzbu.

Riešenie problémov s obrázkami