Kuvien lataus

Voit käyttää verkkokaupassasi monenlaisia kuvia, kuten yrityksen logoa, tuotekuvia, diaesityksiä, bannereita ja blogijulkaisujen kuvia. Shopify tarjoaa mahdollisuuden muuttaa kuviasi dynaamisesti rajaus- ja koonmuunnolla sen lisäksi, että verkkokaupassasi käytetään automaattisesti parasta mahdollista kuvamuotoa.

Huomaa

Kuvia ei tarvitse pakata manuaalisesti ennen lataamista. Lataa aina mahdollisimman korkealaatuiset kuvat.

Kuvan lataaminen teemaeditoriin

Voit lisätä teemaasi kuvia teemaeditorista. Voit myös ladata kuvia Shopify Adminin Tiedostot-sivulla. Lisätietoja on kohdassa Tiedostojen lataaminen sivustoon.

Vaiheet:

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Napsauta muokattavan teeman vierestä Mukauta.
3. Valitse pudotusvalikosta malli, jota haluat muokata.
4. Klikkaa teemaeditorin sivupalkista osiota tai lohkoa, johon haluat lisätä kuvan.

5. Klikkaa Valitse kuva ja tee sitten jokin seuraavista toimenpiteistä:

   • Voit ladata kuvan tietokoneelta klikkaamalla Lataa.
   • Jos haluat käyttää ilmaista kuvaa Burst-kuva-arkistosta, klikkaa Ilmaiset kuvat.

6. Näytä kuvan esikatselu teemassa klikkaamalla kuvaa. Kun olet löytänyt haluamasi kuvan, klikkaa Valitse.

7. Klikkaa Tallenna.

Lisää kuva käyttämällä metakenttiä

Jos olet määrittänyt metakenttiä kuville, voit lisätä kuvan dynaamisen lähteen valitsinta käyttämällä. Lisätietoa yleisten metakenttien tuetuista arvoista löydät kohdasta Metakenttien sisältötyypit ja arvot.

Kuvabannerit

Voit luoda kuvabannereja, jotka sisältävät seuraavia elementtejä:

• yksi tai kaksi kuvaa
• teksti
• toimintopainike

Tietokoneilla bannerikuvat näytetään vierekkäin. Koska tämä muoto ei sovi mobiililaitteille, voit asettaa bannerikuvia päällekkäin valitsemalla Pinoa kuvat mobiilissa -vaihtoehdon Kuvabanneri-teema-asetuksista. Saat lisätietoja kuvabannereista ja diaesityksistä tutustumalla kohtaan Diaesityksiä ja kuvabannereita koskevat parhaat käytännöt.

Määritä teemakuvan keskipiste

Voit käyttää keskipisteitä verkkokaupan teeman kuvan tärkeimpien osa-alueiden määrittämiseen. Kun määrität kuvalle keskipisteen, se on kohdealue. Keskipisteet näkyvät aina kehyksessä, vaikka käytössäsi olisikin teema, joka leikkaa kuvaasi, jotta se sopii pohjaan. Keskipisteiden avulla voit paremmin hallita sitä, miten kuva näytetään, kun teemoissa käytetään eri kuvasuhteita ja eri kokoisia näyttökokoja.

Sinulla voi olla vain yksi keskipiste kuvaa kohti, mutta voit muuttaa sitä tai poistaa sen milloin tahansa.

Keskipisteen asettaminen on käytettävissä seuraavissa ilmaisissa Shopify-teemoissa:

• Craft versio 5.0.0 tai uudempi
• Crave versio 5.0.0 tai uudempi
• Colorblock versio 3.0.0 tai uudempi
• Dawn versio 7.0.0 tai uudempi
• Refresh versio 2.0.0 tai uudempi
• Ride 3.0.0 tai uudempi
• Sense versio 5.0.0 tai uudempi
• Studio versio 4.0.0 tai uudempi
• Taste versio 4.0.0 tai uudempi

Jos käytät kolmannen osapuolen teemaa, tarkista teemasi dokumentaatiosta, tukeeko teema keskipisteiden käyttöä.

Keskipisteen lisääminen kuvaan

Voit lisätä kuvaan keskipisteen Tiedostot-osiosta ja teemaeditoristasi. Jos lisäät kuvaan keskipisteen ja käytät kuvaa useissa paikoissa, ne kaikki käyttävät samaa keskipistettä.

Voit lisätä keskipisteen vain teeman kuviin. Et voi lisätä keskipistettä tuotteiden, blogien tai kokoelmien kuviin.

Tietokone

Vaiheet:

1. Klikkaa teemaeditorissa osiota tai lohkoa, jossa kuva on.
2. Klikkaa kuvan päällä Muokkaa.
3. Klikkaa Lisää keskipiste.
4. Klikkaa ja vedä sinistä ympyrää tai määritä keskipiste klikkaamalla kuvan tärkeintä osaa.
5. Klikkaa Valmis.

iPhone

Vaiheet:

1. Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
2. Napauta kuvasta Muokkaa.
3. Napauta Lisää keskipiste.
4. Aseta keskipiste napauttamalla kuvan tärkeintä osaa.
5. Napauta Valmis.

Android

Vaiheet:

1. Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
2. Napauta kuvasta Muokkaa.
3. Napauta Lisää keskipiste.
4. Aseta keskipiste napauttamalla kuvan tärkeintä osaa.
5. Napauta Valmis.

Huomaa

Voit siirtää keskipistettä avaamalla kuvan uudelleen ja asettamalla uuden keskipisteen klikkaamalla kuvan toista aluetta.

Poista keskipiste

Tietokone

Vaiheet:

1. Klikkaa teemaeditorissa osiota tai lohkoa, jossa kuva on.
2. Napauta kuvasta Muokkaa.
3. Klikkaa Poista keskipiste.
4. Klikkaa Valmis.

iPhone

Vaiheet:

1. Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
2. Napauta kuvasta Muokkaa.
3. Napauta Poista keskipiste.
4. Napauta Valmis.

Android

Vaiheet:

1. Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
2. Napauta kuvasta Muokkaa.
3. Napauta Poista keskipiste.
4. Napauta Valmis.

Huomaa

Keskipiste ei välttämättä aina ole visuaalisesti kuvan keskellä. Tämä riippuu siitä, miten teemasi leikkaa tai muuttaa kuviesi kokoa.

Kuvamuodot

Shopify tukee seuraavia kuvamuotoja:

• JPEG
• Progressiivinen JPEG
• PNG
• GIF
• HEIC
• Webp
• AVIF

Huomaa

Shopify tunnistaa automaattisesti, mitä kuvamuotoja asiakkaan selain tukee, ja näyttää sen jälkeen kuvan automaattisesti parhaassa käytettävissä olevassa muodossa. Lisätietoja Shopifyn kuvanmuuntomahdollisuuksista saat vierailemalla sivulla https://cdn.shopify.com/

Milloin kannattaa käyttää JPEG-kuvia

JPEG-kuvat soveltuvat ihanteellisesti valokuvaukseen ja muihin stillkuviin, joiden väriprofiili on monipuolinen. JPEG-muodossa on miljoonien värien paletti. JPEG-muodon pakkaus on myös häviöllinen, mikä voi auttaa pitämään sivujen latausajat nopeina niin, että kuvan laatu ei heikkenee huomattavasti.

Käytä JPEG-muotoa seuraavissa kuvatyypeissä:

• tuotteet
• bannerit ja diaesitykset
• sivut ja blogipostaukset

Milloin kannattaa käyttää PNG-kuvia

PNG-kuvat soveltuvat ihanteellisesti grafiikkaan ja kuvakkeisiin, joissa on tasaiset värit eikä liukuja. PNG-muoto tukee myös läpinäkyvyyttä.

Käytä PNG-muotoa seuraavissa kuvatyypeissä:

• logot
• kuvakkeet
• rajat ja poistot

Kuvan automaattinen pakkaaminen ja muodon valinta

Jotta latausajat pysyvät nopeina, Shopify pakkaa automaattisesti verkkokaupassasi näytettävät kuvat. Kuvan pakkaaminen tarkoittaa, että sen tiedostokokoa pienennetään sivun latautumisen nopeuttamiseksi.

Lisäksi Shopify määrittää automaattisesti parhaan mahdollisen tiedostomuodon, jota voit käyttää kuviesi toimittamiseen. Kun havaitsemme esimerkiksi, että ostajan verkkoselain tukee nykyaikaisia kuvamuotoja, kuten WebP:tä ja AV1-kuvatiedostomuotoa, Shopify toimittaa kuvasi tällaisessa muodossa.

Jotta voidaan parantaa tehokkuutta pienentämällä tiedostokokoa, GIF-tiedostot muunnetaan automaattisesti animoituun WebP-muotoon.

Latausrajat

Kuvien lataamista Shopifyhin on rajoitettu sekä megapikselien että tiedostokoon (megatavujen) osalta. Megapikselien avulla ilmaistaan, monestako miljoonasta pikselistä kuva muodostuu. Megatavujen avulla ilmaistaan, montako miljoonaa tavua muistia tai levytilaa kuva vie.

Shopifyhin ladatut kuvat eivät voi ylittää kumpaakaan seuraavista rajoista:

• 25 megapikseliä
• 20 megatavua

Voit selvittää kuvan megapikselit seuraavaa kaavaa käyttämällä: (pixel width x pixel height)/1,000,000. Esimerkiksi kuva, jonka resoluutio on 4900x6930, olisi 33,9 megapikseliä laskettuna kaavalla: (4900x6930)/1,000,000 = 33.9 MP.

Huomaa

Tuotekuvien lähettämiselle on eri kuva- ja tiedostokoon rajoitukset.

Väriprofiilit

Kun näytät kuvan verkkokaupassasi, kuvan värit saattavat näyttää erilaisilta kuin Shopifyhin lähettämässäsi alkuperäisessä kuvassa. Näin voi käydä, kun kuvassa on väriprofiili. Väriprofiili on tietojoukko, joka on tallennettu .ICC- tai .ICM-tiedostopäätteellä varustettuun tiedostoon. Väriprofiili upotetaan usein kuviin, jotta värit näkyvät eri laitteissa yhdenmukaisella tavalla. Kun kuvat näytetään verkkokaupassasi, niiden väriprofiili poistetaan.

Väriprofiilit poistetaan tietyistä syistä:

• Kaikki laitteet eivät pysty lukemaan .ICC- tai .ICM-väriprofiileja, joten niiden säilyttäminen voi johtaa kuvien värien epäyhdenmukaisuuteen eri laitteissa.
• Kun lähetetty kuva ei sisällä väriprofiilia, verkkoselain käyttää oletuksena sRGB:tä (yleisin väriprofiili, jota käytetään kuvien näyttämiseen verkossa). Tämä takaa, että kuvat näyttävät samalta kaikilla merkittävillä verkkoselaimilla ja laitteilla.
• Väriprofiilit voivat viedä paljon levytilaa, mikä voi pidentää latausaikoja.

Väriprofiilin poistaminen kuvasta

Voit poistaa väriprofiilin kuvastasi tallentamalla sen ilman väriprofiilia ennen lataamista Shopifyhin. Tämä prosessi vaihtelee käyttämäsi kuvaeditorin mukaan.

Väriprofiilin poistaminen Adobe Illustratorissa tai Adobe Photoshopissa

Voit poistaa väriprofiilin Adobe Illustratorissa tai Adobe Photoshopissa seuraavasti:

1. Klikkaa Edit > Assign Profile (Muokkaa > Määritä profiili).

2. Valitse Don’t Color Manage This Document (Älä Hallinnoi tämän asiakirjan värejä).

3. Klikkaa OK.

Väriprofiilin poistaminen Adobe InDesignissa

Voit poistaa väriprofiilin Adobe InDesignissa seuraavasti:

1. Klikkaa Edit > Assign Profile (Muokkaa > Määritä profiili).

2. Valitse RGB-profiilin ja CMYK-profiilin osalta Discard (Use Current Working Space) (Hylkää (Käytä nykyistä työtilaa)).

3. Klikkaa OK.

Tarkemmat tiedot saat Adoben väriprofiileja koskevasta -dokumentaatiosta.

Diaesityksiä, kuvabannereita ja täysleveitä kuvia koskevat parhaat käytännöt

Monet Shopify-teemat sisältävät suuria kuvia tai diaesityksiä, jotka skaalautuvat selaimesi korkeuden mukaan tai mukautuvat näytön kokoon.

Jos käytät jotakin näistä teemoista tai sinulla on suuri diaesitys tai taustakuva, on tärkeä tietää, minkä tyyppiset kuvat näyttävät parhailta.

Koska suuret kuvat eivät mahdu kaikkiin laitteisiin, Shopify näyttää joskus vain osan kuvasta käyttämäsi laitteen mukaan. Jos kuvaesityksesi sisältää paljon suuria kuvia, saatat huomata, että osia kuvista jää näkymättä.

Suositukset

Jotta kuvat toimivat hyvin teemassasi, on hyvä pitää mielessä joitakin asioita:

• Kuvissa, joita käytät diaesityksissä tai taustakuvina, ei saa olla tekstiä. Jos teksti on osa itse kuvaa, sitä saatetaan siirtää, rajata tai säätää teeman mukaan. Voit lisätä diaesityksiin tekstiä ja linkkejä teemaeditorin avulla.

• Valitse diaesityksiin tai taustakuviksi yksinkertaisia kuvia, jotta mahdollinen kuvan päällä oleva teksti on helppo lukea.

Leveät kuvat korkealla näytöllä

Leveitä kuvia voidaan rajata vasemmalta ja oikealta, kun niiden tarkastelemiseen käytettävässä laitteessa on korkea näyttö (kuten matkapuhelin tai tabletti). Jos alla olevassa esimerkissä ihmiset ovat kuvan tärkein osa, voit sijoittaa keskipisteen kuvan oikealle puolelle:

Korkeat kuvat leveällä näytöllä

Korkeita kuvia voidaan rajata ylhäältä ja alhaalta, kun niiden tarkastelemiseen käytettävässä laitteessa on leveä näyttö (kuten kannettava tietokone tai pöytäkone). Jos kengät ovat alla olevassa esimerkissä kuvan tärkein osa, voit sijoittaa kuvan alaosaan keskipisteen, jolloin kenkiä ei rajata pois: