Prijenos slika

Možete upotrebljavati različite vrste slika, poput logotipa poduzeća, slika proizvoda, prezentacija, natpisa i slika objava na blogu. Svoje slike također možete transformirati radnjama za obrezivanje i promjenu veličine te prilagoditi postavke medijskog sadržaja u temi kako biste promijenili obrub ili sjenu na svom medijskom sadržaju prikazanom u trgovini.

Kako bi se slike u vašoj internetskoj trgovini prikazivale točno onako kako želite, trebate upotrijebiti ispravan omjer slike. Slike se automatski optimiziraju za vašu internetsku trgovinu uz Shopify Content Delivery Network (CDN).

Prijenos slike u alatu za uređivanje tema

Slike možete dodati u temu u alatu za uređivanje tema. Slike možete prenijeti i u odjeljku Sadržaj > Datoteke u administratorskom alatu za Shopify. Da biste saznali više, pogledajte Prijenos datoteka i upravljanje njima.

Koraci:

Dodavanje slika pomoću metapolja

Ako ste postavili metapolja za slike, za dodavanje slike u internetsku trgovinu možete upotrijebiti alat za odabir dinamičkog izvora. Više informacija o metapoljima i podržanim formatima slika potražite u odjeljku Dodavanje vrijednosti metapoljima.

Postavljanje središnje točke na slici

Pomoću središnjih točaka možete definirati najvažniji dio slike u svojoj internetskoj trgovini. Kada postavite središnju točku na slici, određujete glavno područje fokusa. Središnje točke uvijek su prikazane u okviru, čak i ako imate temu koja obrezuje sliku kako bi se uklopila u izgled. Središnje točke daju vam veću kontrolu nad načinom prikaza slike na različitim veličinama zaslona te u slučajevima kada teme upotrebljavaju različite omjere širine i visine.

Možete imati samo jednu središnju točku po slici, ali je u svakom trenutku možete promijeniti ili ukloniti.

Kompatibilnost središnje točke s besplatnim temama platforme Shopify

Središnju točku možete postaviti na sljedećim verzijama besplatnih tema platforme Shopify:

• Sve teme iz obitelji Horizon
• Colorblock verzija 3.0.0 i novija
• Craft verzija 5.0.0 i novija
• Crave verzija 5.0.0 i novija
• Dawn verzija 7.0.0 i novija
• Origin verzija 1.0.0 i novija
• Publisher verzija 1.0.0 i novija
• Refresh verzija 2.0.0 i novija
• Ride verzija 3.0.0 i novija
• Rise verzija 1.0.0 i novija
• Sense verzija 5.0.0 i novija
• Spotlight verzija 0.0.1 i novija
• Studio verzija 4.0.0 i novija
• Taste verzija 4.0.0 i novija
• Trade verzija 1.0.0 i novije

Ako upotrebljavate temu treće strane, provjerite dokumentaciju teme kako biste saznali podržava li vaša tema upotrebu središnjih točaka.

Dodavanje središnje točke na sliku

Ako slici dodate središnju točku i zatim tu sliku upotrijebite na više mjesta u svojoj internetskoj trgovini, ista se središnja točka primjenjuje svugdje gdje se slika upotrebljava.

Ovisno o tome kako vaša tema obrezuje i mijenja veličinu slika, središnja točka možda neće uvijek biti vizualno centrirana.

Koraci:

1. Kliknite sliku na bilo kojoj od sljedećih lokacija u administratorskom alatu za Shopify:
   • U odjeljku Sadržaj > Datoteke.
   • U uređivaču tema.
   • U odjeljku Multimedija u oglasima proizvoda unutar odjeljka Proizvodi.
   • U uređivaču e-pošte za Shopify Messaging.
   • U odjeljku Metapolja bilo kojeg resursa koji ima metapolje vrste Referenca datoteke za dodavanje slike.
2. Kako biste odabrali dio slike na koji želite postaviti središnju točku, kliknite sliku ili povucite plavu točku.
3. Kliknite na Spremi.

Uklanjanje središnje točke sa slike

Koraci:

1. Kliknite sliku na bilo kojoj od sljedećih lokacija u administratorskom alatu za Shopify:
   • U odjeljku Sadržaj > Datoteke.
   • U uređivaču tema.
   • U odjeljku Multimedija u oglasima proizvoda unutar odjeljka Proizvodi.
   • U uređivaču e-pošte za Shopify Messaging.
   • U odjeljku Metapolja bilo kojeg resursa koji ima metapolje vrste Referenca datoteke za dodavanje slike.
2. Kliknite Ukloni.
3. Kliknite Spremi kao novo.

Formati slika

Podržani su sljedeći formati slika:

• JPEG
• Progresivni JPEG
• PNG
• GIF
• HEIC
• WebP

Upotreba slika u JPEG formatu

Slike u JPEG formatu idealne su za fotografije i druge statične slike sa složenim bojama. JPEG format ima paletu s milijunima boja. JPEG ima i sažimanje s gubicima, što može pomoći u održavanju kratkog vremena učitavanja stranice bez osjetnog gubitka kvalitete slike. Upotrijebite JPEG format za sljedeće vrste slika:

• proizvodi
• natpisi ili prezentacije
• stranice i objave na blogu

Upotreba slika u PNG formatu

Slike u PNG formatu idealne su za grafiku i ikone jednostavnih boja bez prijelaza. PNG format također podržava prozirnost na slikama. Upotrijebite PNG format za sljedeće vrste slika:

• logotipi
• ikone
• obrubi i ukrasi

Automatsko sažimanje i odabir formata slika

Slike se ne sažimaju prilikom prijenosa u administratorski alat za Shopify, što pomaže u očuvanju njihove izvorne kvalitete. Međutim, može se dogoditi sljedeće kako bi se vrijeme učitavanja stranice za vaše kupce održalo kratkim:

• Kada se slike poslužuju putem teme vaše trgovine, visokokvalitetne slike mogle bi se sažeti
• Shopify automatski određuje najbolji mogući format datoteke za upotrebu pri isporuci vaših slika
• Kada web-preglednik kupca podržava moderne formate slika, kao što su WebP i AVIF (format slikovne datoteke AV1), vaše se slike isporučuju u tim formatima
• Slike u GIF formatu automatski se pretvaraju u animirani WebP format kako bi se poboljšala učinkovitost smanjenjem veličine datoteke

Uzmite u obzir sljedeće radnje za najbolju kvalitetu slike:

• Prenesite slike veće rezolucije do 5000 px x 5000 px ili 25 megapiksela
• Odaberite vrste slika s manjim gubicima, poput PNG-a, za crteže crtama, tekst i grafike ikona s prozirnošću
• Upotrijebite JPEG za slike proizvoda ili prezentacije
• SVG datoteke su podržane, ali imaju ograničenja – ne mogu se transformirati (promijeniti im se veličina, obrezati ih itd.) bez zahtijevanja rasteriziranog formata (JPEG, WebP, PNG)

Prihvaćaju se i druge vrste datoteka, kao što su PSD (Photoshop Document), TIFF (Tagged Image File Format) i BMP (Bitmap), ali bit će pretvorene u JPEG/PNG prilikom prijenosa.

Ograničenja za prijenos slika

Prijenosi slika na platformu Shopify imaju ograničenja u pogledu megapiksela (MP) i veličine datoteke koja se mjeri u megabajtima (MB). Megapikseli služe za prikazivanje od koliko se milijuna piksela slika sastoji. Megabajti služe za prikazivanje koliko milijuna bajtova memorije ili prostora na disku slika zauzima.

Slike prenesene na platformu Shopify ne mogu prekoračiti niti jedno od sljedećih ograničenja:

• 20 megapiksela
• 20 megabajta

Da biste pronašli vrijednost u megapikselima za svoju sliku, možete upotrijebiti sljedeću jednadžbu:

(širina u pikselima x visina u pikselima) / 1 000 000

Na primjer, slika s rezolucijom od 4900 px puta 6930 px ima 33,9 megapiksela prema jednadžbi: (4900 x 6930) / 1 000 000 = 33,9 MP.

Profili boja slika

Kada gledate sliku u svojoj internetskoj trgovini, boje na slici mogu se prikazivati drugačije od onih na izvornoj slici koju prenesete na platformu Shopify. To se može dogoditi kada slika ima profil boja, što je skup podataka pohranjenih u datoteci s nastavkom .ICC ili .ICM.

Profili boja često su ugrađeni u slike kako bi pomogli u standardiziranju načina na koji se boje prikazuju na različitim uređajima. Kada se slike prikazuju u vašoj internetskoj trgovini, njihovi se profili boja uklanjaju.

Profili boja uklanjaju se iz sljedećih razloga:

• Ne mogu svi uređaji čitati profile boja u .ICC ili .ICM formatu, stoga njihovo zadržavanje može rezultirati nedosljednostima u bojama slika na različitim uređajima.
• Kada prenesena slika ne uključuje profil boja, internetski preglednik pretpostavit će da je riječ o profilu sRGB, koji je najčešći profil boja za prikaz slika na webu. Time se osigurava jednak prikaz vaših slika u svim glavnim internetskim preglednicima i na uređajima.
• Profili boja mogu zauzeti mnogo prostora na disku, što može rezultirati duljim vremenom učitavanja stranice.

Uklanjanje profila boja sa slike

Profil boja možete ukloniti sa slike tako da je spremite bez profila boja prije nego što je prenesete na Shopify. Taj se postupak razlikuje ovisno o programu za uređivanje slika.

Pogledajte dokumentaciju tvrtke Adobe o tome kako dodijeliti ili ukloniti profil boja (Illustrator, Photoshop) i dodijeliti ili ukloniti profil boja (InDesign).

Najbolje prakse za prezentacije, natpise sa slikama i slike pune širine

Mnoge teme za Shopify sadrže velike slike ili prezentacije koje se prilagođavaju visini vašeg preglednika ili veličini zaslona.

Ako upotrebljavate jednu od tih tema ili imate veliku prezentaciju ili pozadinsku sliku, važno je razumjeti koje se vrste slika najbolje prikazuju.

Budući da velike slike ne mogu stati na sve uređaje, Shopify ponekad prikazuje samo dio slike, ovisno o uređaju koji upotrebljavate. Ako vaša prezentacija sadrži mnogo velikih slika, možda ćete primijetiti da dijelovi slika nisu vidljivi.

Što treba uzeti u obzir pri upotrebi slika za prezentacije ili natpise sa slikama

Kako biste bili sigurni da vaše slike dobro funkcioniraju s vašom temom, imajte na umu sljedeće:

• Slike koje upotrebljavate za prezentacije ili pozadine ne bi smjele sadržavati tekst. Ako je tekst dio same slike, može se pomaknuti, obrezati ili prilagoditi ovisno o temi. Za dodavanje teksta i poveznica u prezentacije i pozadine upotrijebite uređivač tema.

• Za slike koje upotrebljavate u prezentacijama ili kao pozadine odaberite jednostavne motive kako bi preklopljeni tekst bio lako čitljiv.

Široke slike na visokim zaslonima

Široke slike mogu se obrezati s lijeve i desne strane kada se gledaju na uređaju s visokim zaslonom, poput mobilnog telefona ili tableta u portretnom načinu. U primjeru u nastavku, ako su ljudi najvažniji dio slike, možete postaviti središnju točku na desnu stranu slike.

Visoke slike na širokim zaslonima

Visoke slike mogu se obrezati na vrhu i dnu kada se gledaju na uređaju sa širokim zaslononom, poput prijenosnog računala ili monitora stolnog računala. U primjeru u nastavku, ako su cipele najvažniji dio slike, možete postaviti središnju točku na dno slike.

Ponašanje pri učitavanju slika

Kada posjetite stranicu u svojoj internetskoj trgovini, možete primijetiti da su slike isprva pomalo mutne, a zatim nakon nekoliko trenutaka postaju oštre. To je očekivano ponašanje koje pomaže poboljšati brzinu učitavanja vaše trgovine i korisničko iskustvo.

Teme za Shopify upotrebljavaju tehniku pod nazivom odgođeno učitavanje, koja najprije učitava manju verziju slike, dok se slika pune razlučivosti učitava u pozadini. To korisnicima omogućuje da odmah pregledaju sadržaj umjesto da čekaju da se velike slike u potpunosti učitaju. Postupak obično traje manje od sekunde, ali stvara dojam da se vaša trgovina brže učitava.

Ta je tehnika posebno korisna za trgovine s puno slika jer znatno poboljšava početno vrijeme učitavanja stranice i korisnicima pruža trenutačne vizualne povratne informacije.

Rješavanje problema sa slikama