Kuvien lataus
Voit käyttää erilaisia kuvia, kuten yrityksen logoa, tuotekuvia, diaesityksiä, bannereita ja blogijulkaisujen kuvia. Voit muuttaa kuvia rajaus- ja koonmuutostoiminnoilla. Voit mukauttaa teemassasi media-asetuksia, jos haluat muuttaa reunaviivaa tai varjoa kaikessa kaupassasi näkyvässä mediasisällössä.
Jos haluat näyttää verkkokaupassasi kuvia juuri niin kuin haluat, sinun on käytettävä oikeaa kuvasuhdetta.
Tällä sivulla
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:
- Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
- Napsauta muokattavan teeman vierestä Mukauta.
- Valitse pudotusvalikosta malli, jota haluat muokata.
- Klikkaa teemaeditorin sivupalkista osiota tai lohkoa, johon haluat lisätä kuvan.
-
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.
Näytä kuvan esikatselu teemassa klikkaamalla kuvaa. Kun olet löytänyt haluamasi kuvan, klikkaa Valitse.
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.
Vaiheet:
- Klikkaa teemaeditorissa osiota tai lohkoa, jossa kuva on.
- Klikkaa kuvan päällä Muokkaa.
- Klikkaa Lisää keskipiste.
- Klikkaa ja vedä sinistä ympyrää tai määritä keskipiste klikkaamalla kuvan tärkeintä osaa.
- Klikkaa Valmis.
Vaiheet:
- Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
- Napauta kuvasta Muokkaa.
- Napauta Lisää keskipiste.
- Aseta keskipiste napauttamalla kuvan tärkeintä osaa.
- Napauta Valmis.
Vaiheet:
- Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
- Napauta kuvasta Muokkaa.
- Napauta Lisää keskipiste.
- Aseta keskipiste napauttamalla kuvan tärkeintä osaa.
- Napauta Valmis.
Poista keskipiste
Vaiheet:
- Klikkaa teemaeditorissa osiota tai lohkoa, jossa kuva on.
- Napauta kuvasta Muokkaa.
- Klikkaa Poista keskipiste.
- Klikkaa Valmis.
Vaiheet:
- Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
- Napauta kuvasta Muokkaa.
- Napauta Poista keskipiste.
- Napauta Valmis.
Vaiheet:
- Napauta teemaeditorissa osiosta tai lohkoa, jossa on kuva.
- Napauta kuvasta Muokkaa.
- Napauta Poista keskipiste.
- Napauta Valmis.
Kuvamuodot
Shopify tukee seuraavia kuvamuotoja:
- JPEG
- Progressiivinen JPEG
- PNG
- GIF
- HEIC
- Webp
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ä asiakkaan verkkoselain tukee nykyaikaisia kuvamuotoja, kuten WebP:tä ja AV1-kuvatiedostomuotoa (AVIF), 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.
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:
Klikkaa Edit > Assign Profile (Muokkaa > Määritä profiili).
Valitse Don’t Color Manage This Document (Älä Hallinnoi tämän asiakirjan värejä).
Klikkaa OK.
Väriprofiilin poistaminen Adobe InDesignissa
Voit poistaa väriprofiilin Adobe InDesignissa seuraavasti:
Klikkaa Edit > Assign Profile (Muokkaa > Määritä profiili).
Valitse RGB-profiilin ja CMYK-profiilin osalta Discard (Use Current Working Space) (Hylkää (Käytä nykyistä työtilaa)).
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:
