Viss par attēliem
Šajā pamācībā apkopota informācija par attēlu formātiem, izmēriem un ievietošanas principiem EcomCart platformā. Pareizi sagatavoti attēli nodrošina labu vizuālo kvalitāti un optimālu lapas ielādes ātrumu.
ℹ️ Par logo, ikonu un aizstājējbildi var iepazīties Logo, ikonas, aizvietotāja bildes pamācībā.
Attēlu formāti
Pareiza faila formāta izvēle palīdz samazināt ielādes laiku un saglabāt attēla kvalitāti. Mūsdienās ir neskaitāmi daudz dažādu digitālo attēlu formātu, dažreiz ir grūti saprast, vai izvēlaties pareizos attēlus savai mājaslapai. Zemāk ir aprakstīti visi ieteicamie attēlu formāti, kurus var droši izmantot interneta veikalā.
Ieteicamie formāti:
-
WEBP - moderns formāts ar augstu kvalitāti un mazu faila izmēru. Piemērots banneriem un lieliem vizuāliem elementiem. 💡 Pirms attēlu ievietošanas mājaslapā, iesakām jebkuru attēlu pārkonvertēt šajā formātā, izmantojot Squoosh.app vai kādu citu attēlu pārveidošanas rīku. Šis formāts pieļauj caurspīdīgus attēlus. Izņēmums ir kustīgi attēli un logotipi. Ja vēlaties pievienot kustīgu attēlu, tad tas ir jāsaglabā GIF formātā. Kā arī, ja vēlaties ievietot logotipu, tam būtu jābūt vektoru formātā, piemēram, SVG. Par logo niansēm lasiet Logo, ikonas, aizvietotāja bildes pamācībā.
-
PNG - šis ir visatpazīstamākais failu formāts, ko zinās lielākā daļa cilvēku. Tas ir nedaudz vecāks formāts par WEBP, līdz ar to nav tik labi optimizēts ātrdarbībai. Toties šis faila formāts saglabās attēlu kvalitāti visaugstākajā līmenī. Šis ir vispopulārākais faila formāts caurspīdīgiem attēliem un vēl aizvien populārs internetā.
-
GIF - šo faila formātu izmanto tikai un vienīgi kustīgiem attēliem. Taču jābūt uzmanīgam, lai šajā attēlā nav pārāk gara attēlu sekvence, kas var palielināt faila izmēru un bremzēt mājaslapas ātrdarbību. Šie attēli parasti arī ir ļoti kompresēti, līdz ar to zaudējot attēla kvalitāti.
-
❌ JPG - šis ir populārs attēla formāts augstas izšķirtspējas fotogrāfijām. Šo formātu nevajadzētu izmantot mājaslapās, jo to failu izmēri ir salīdzinoši lieli. Šie attēli arī nevar būt caurspīdīgi. JPG attēlus ieteicams pārveidot WEBP formātā pirms publicēšanas. 💡 Iesakam izmantot Squoosh.app vai Bulk-Squoosh rīkus šo attēlu konvertēšanai.
🖼️ Sākumlapas banneri
Ja sākumlapā izmantojat sāna navigācijas izvēlni, tad baneru izmēri būs:
-
Platums: 905 px
-
Augstums: Pēc ieskatiem (rekomendējam 375 – 550 px)
Banerus var likt arī šaurākus augstuma ziņā, bet platums vēlams, lai ir minētie 905 px. Kad ievietojiet jaunu attēlu sākumlapas banneru blokā, nepieciešams pielāgot bloka izmērus, lai tie būtu vienādi vai lielāki par attēla izmēru, saglabājot attēla attiecību. Tas ir varīgi, lai attēls tiktu attēlots iespējami augstākajā kvalitātē. Ja bloka izmērs būs mazāks par attēla izšķirtspēju, attēls tiks parādīts miglaini.
📍 Sākumlapas bannera bloka izmērus var labot ejot uz Dizains >> Izkārtojumi >> 01.Sākumlapa.
📍 Sākumlapas skatā meklējam bloku ar nosaukumu Banneri >> Homepage Banner, kas atrodas Centrālajā saturā. Klikšķinam uz zīmulīša, lai rediģētu bloku.
Kad atveras jauns logs ar bloka uzstādījumiem, pārliecinamies, ka Platums un Augstums atbilst banneru attēlu izmēriem. Mūsu gadījumā attēli ir PNG formātā un 905px x 375px izmēros.
Ja sistēmā nav norādīti Slaidera kustības un maiņas ātrumi, nebūs iespējams saglabāt izmaiņas. Ja lauki ir tukši, ievadiet 3000 jeb 3 sekundes gan vienā, gan otrā laukā. Tie ir sistēmas noklusējuma uzstādījumi. Jo mazāks skaitlis, jo īsāku laiku banneri uzkavējas pirms nomainās uz nākamo, kā arī ātrāka ir maiņas animācija. Jo lielāks skaitlis, jo lēnāka ir animācija un ilgāk attēls uzkavējas pirms parādās nākamais.
📌 Svarīgi zināt:
1000 vienības = 1 sekunde
Pēc izmaiņu veikšanas neaizmirstiet
-
💾 saglabāt uznirošajā logā,
-
aizvērt logu,
-
💾 atkal saglabāt veikala izkārtojumu.
Ja netiks saglabāts veikala izkārtojums, izmaiņas nebūs redzamas mājaslapā.
Kur ievietot banneru failus?
Iepriekš izstāstījām visu par failu formātiem un pareizajiem izmēriem, taču visdrīzāk pamanījāt, rediģējot bloku, nav iespējams pievienot vai noņemt banneru attēlus. Šī bloka saturu mēs rediģējam atsevišķā sadaļā. Lai mainītu sākumlapas banneru failus:
-
📍 Dodamies uz Dizains >> Baneri >> Homepage Banner.
-
✏️ Klikšķinam uz zīmulīša ikonas.
-
Atveras logs, kurā iespējams norādīt visus banneru attēlus gan pilna izmēra mājaslapai, gan mobīlajai mājaslapas versijai.
Visus bannerus jāizveido un jāuzstāda katras mājaslapas valodas versijā. Katrai valodai ir sava izvēlne, kurā var norādīt savus bannerus. Var norādīt ar dažādus bannerus dažādām valodu versijām. Nav obligāti jānorāda tie paši banneri visās valodās. Šādi veikalā iespējams specializēt piedāvājumu klientiem no dažādām valstīm.
-
Pirmajā kolonnā jānorāda banneru virsraksti. Šie virsraksti tiek ievadīti katra bannera ALT kodā, līdz ar to šie ir SEO draudzīgi ieraksti, lai personalizētu katra attēla SEO tekstu.
-
Otrā kolonnā jānorāda pilna mājaslapas adrese, uz kuru vēlaties, lai banneris aizved. Ja adrese netiek norādīta, banneris nav klikšķināms un tas tiek attēlots tikai kā informatīvs attēls. Par to kā pareizi norādīt veikala mājaslapas linkus, skatiet Web Linki pamācību.
-
Trešajā kolonnā - Attēls jāievieto fails uz banneri WEBP vai PNG formātā. Zem attēla parādīsies zaļi vai sarkani indikatori, kas norāda par pareizu vai nepareizu failu formātu, kā arī attēla izmēru un faila datu apjomu.
-
Ceturtajā kolonnā ievietojam mobilo attēla versiju. Par mobilajiem attēliem lasiet zemāk Mobīlās versijas banneri.
-
Piektajā kolonnā jānorāda banneru secība. To ir svarīgi norādīt ar skaitļiem 1, 2, 3, lai banneri tiktu attēloti pareizajā secībā. Jo mazāks skaitlis, jo augstāka attēla prioritāte banneru blokā. Kolonnas apakšā ir zila poga, ar kuru var pievienot vairāk bannerus.
-
Sestā kolonna izvada sarkanas pogas, ar kurām var noņemt liekās banneru rindas.
ℹ️ Profesionāls ieteikums - WEBP
Ja izmantojat ieteicamo WEBP attēlu formātu sākumlapas banneriem, iesakam attēlu saglabāt 1.5x - 2x lielāku nekā PNG failu. Faila izmērs būs mazāks kā PNG attēlam, toties attēla kvalitāte būs daudz labāka. Tādējādi pārliecināsieties, ka lietotāji ar ekrāniem augstākā izšķirtspējā redzēs banneru attēlus to iespējami labākajā kvalitātē.
Piemēram, ja mans orģinālais PNG banneris būtu 905px x 375px izmērā, WEBP formāta failu es saglabātu augstākā 1810px x 750px izmērā, kas ir 2x lielāks. Ja izvēlaties bannerus saglabāt augstākā izšķirtspējā, jāatceras, ka banneru bloka izmērs arī jānomaina uz 1810x750 px izmēru.
📱 Mobilās versijas banneri
Mobilās versijas banneriem ir paredzēta atsevišķa attēla faila vieta. Tomēr nav obligāti jāveido atsevišķs mobilais banneris, ja mājaslapas datora (web) versijas banneris nav pārāk plats un tajā esošais teksts mobilajā skatījumā ir labi salasāms, vai arī ja bannerī vispār nav teksta.
Lai noteiktu, vai nepieciešams atsevišķs mobilās versijas banneris, ieteicams ievietot esošo web versijas banneri mobilās versijas attēla vietā un pārbaudīt, kā tas attēlojas, atverot mājaslapu telefona pārlūkā.
📍 Attēlus var ievietot, ejot uz Dizains >> Baneri >> Homepage Banner uzstādījumiem.
Ja tomēr nepieciešams izveidot mobilās versijas banneri, iesakam to izveidot šaurāku par Web versijas banneri. Piemēram:
-
600x375 px izmērā.
-
Ļoti labi mobilajā versijā izskatās attēli 1:1 attiecībā. Piemēram, 500x500 px izmērā.
-
Var eksperimentēt un izveidot arī vertikālas banneru versijas mobilajam skatam, ja vēlaties banneri kā pirmo galveno apskates objektu sākumlapā.
Nav noteikti strikti mobilo versiju banneru izmēri. Taisam, ko sirds kāro un testējam, kā tas izskatīsies mājaslapā uz mobilajām iekārtām.
ℹ️ Protams, arī šeit iesakām izmantot optimizētus failu formātus kā WEBP un veidot bannerus augstākās izšķirtspējās, piemēram 1000 x 1000 px. Mūsdienu telefonu ekrāni ir augstas izšķirspējas, līdz ar to attēlus nepieciešams veidot augstā kvalitātē.
Moduļa uzstādījumi sākumlapas izkārtojumā
Kad mobilās versijas bannera attēls ir ievietots, nepieciešams atgriezties pie izskārtojuma uzstādījumiem un norādīt mobilā bannera attēla izmērus. To varam izdarīt ejot uz Dizains >> Izkārtojumi >> 01.Sākumlapa >> Homepage Banner.
Klikšķinam rediģēt uz zīmulīša un atvērsies banneru uzstādījumu logs, kurā nepieciešams norādīt Mobile Platuma un Augstuma izmērus. Ja šo nenorāda, attēli var tikt attēloti nepareizajā attiecībā mobilajā mājaslapas skatā. Visi izmēri jānorāda px formātā.
Šeit izmēri ir līdzīgi kā pilna izmēra banerim. Attēla platums un augstums var būt dažāds, skatoties pēc tā cik lielu šo attēlu esat ievietojuši.
Pilna platuma banneris sākumlapā
Sākumlapā iespējams izmantot arī pilna platuma kustīgos banerus. To iespējams uzstādīt, noņemot blokus pie sākumlapas izkārtojuma sadaļas kolonna pa kreisi.
Pilna platuma banera izmēri:
Platums: 1216 px
Augstums: Pēc ieskatiem (rekomendējam 500 px)
ℹ️ Ja esat uzstādījis sākumlapas banneri lielākā izšķirtspējā WEBP formātā 2x lielākā izmērā jau iepriekš, kā minēts augstāk, tad pilna platuma banneris būs pietiekami augstā kvalitātē un nekādas papildus darbības vairs nav vajadzīgas.
Kategoriju banneri
Kategorijas skatā ir iespējams arī izvietot pilna platuma nekustīgos attēlus, kas var izcelt kādu konkrētu kategoriju, produktus vai cita veida informāciju. Šos attēlus norāda kategorijas apraksta datu laukā.
📍 Katalogs >> Kategorijas >> [izvēlamies kategoriju, kurai vēlamies pievienot banneri] >> klikšķinam zīmulīti. Atvērsies logs, kurā iespējams pievienot un rediģēt konkrētas kategorijas aprakstu. Apraksta laukā ievietojam attēlu, izmantojot attēlu pārvaldnieka rīku.
Šeit izmēri ir līdzīgi kā sākumlapas banerim. Attēla augstums var būt dažāds, skatoties pēc tā cik lielu šo attēlu vēlaties norādīt. Attēlu pirms ielādes jau sagatavo vēlamajos izmēros:
Platums: 905 px
Augstums: Pēc ieskatiem
Sāna banneri
Iespējams pievienot dažādus banerus arī kolonnā pa kreisi, gan sākumlapā, gan produktu un kategoriju lapās.
Platums: 294 px
Augstums: Pēc ieskatiem, bet nevajadzētu aizrauties ar pārāk lieliem izmēriem augstumā.
Citi attēli un to izmēri
Mazās bildes - attēlus precēm vai mazajām kategorijām iesakām saglabāt PNG formātā. Maza izmēra attēlus nav nepieciešams optimizēt WEBP formātā.
Kategorijas bloka attēla izmēri
Šie ir ieteicamie attēlu izmēri kategoriju blokiem:
Platums: 210 px
Augstums: 135 px
Produkta attēla izmērs
Produktu attēlu minimālais izmērs ir 800 x 800 px. Ja izmērs būs mazāks, bilde netiks attēlota kvalitatīvi.
Rekomendējam produktu attēlu augstuma un platuma attiecībai būt 1:1 attiecībā, bet tas nav obligāti, jo sistēma mēģinās tos pielāgot.
