Kirjaudu sisään
Aloita ilmainen kokeilu

Kuvien lataus

Voit käyttää erilaisia kuvia, kuten yrityksen logoa, tuotekuvia, diaesityksiä, bannereita ja blogipostausten kuvia. Voit myös muuttaa kuvia rajaus- ja koonmuutostoiminnoilla ja mukauttaa teemassasi media-asetuksia, jos haluat muuttaa reunaviivaa tai varjoa kaikessa kaupassasi näkyvässä mediasisällössä.

Jos haluat verkkokaupan kuvien näkyvän juuri haluamallasi tavalla, sinun on käytettävä oikeaa kuvasuhdetta. Kuvat optimoidaan automaattisesti myyntipaikallesi Shopify Content Delivery Networkilla (CDN).

Tällä sivulla

Kuvan lataaminen teemaeditoriin

Voit lisätä teemaasi kuvia teemaeditorissa. Voit myös ladata kuvia Shopify-ylläpitäjän Sisältö > Tiedostot -osiossa. Lisätietoja on kohdassa Tiedostojen lataaminen ja hallinta.

Vaiheet:

Tietokone
  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Klikkaa Mukauta teemassa, jolle haluat ladata kuvan.
  3. Valinnaista: jos haluat lisätä kuvan kauppasi jollekin muulle sivulle kuin etusivulle, klikkaa Etusivu-pudotusvalikkoa ja valitse sitten muokattava malli.
  4. Klikkaa teemaeditorin sivupalkista osiota tai lohkoa, johon haluat lisätä kuvan.
  5. Tee Kuva-kentässä jokin seuraavista toimenpiteistä:
    • Voit ladata kuvan tietokoneelta suorittamalla seuraavat vaiheet:
      1. Klikkaa Valitse kuva > Lisää kuvat.
      2. Etsi ja avaa kuva tietokoneelta.
      3. Klikkaa Valmis.

- Voit käyttää ilmaista kuvaa Burst-kuva-arkistosta suorittamalla seuraavat vaiheet: 1. Klikkaa Tutustu ilmaisiin kuviin. 2. Etsi käytettävä kuva. 3. Klikkaa Valitse.

  1. Klikkaa Tallenna.
iPhone

  1. Napauta Shopify-sovelluksessa …-painiketta.

  2. Napauta myyntikanavat -osiossa Verkkokauppa.

  3. Napauta Hallinnoi kaikkia teemoja.

  4. Napauta Mukauta teemassa, jolle haluat ladata kuvan.

  5. Valinnaista: jos haluat lisätä kuvan kauppasi jollekin muulle sivulle kuin etusivulle, napauta Etusivu-pudotusvalikkoa ja valitse sitten muokattava malli.

  6. Napauta Osiot ja napauta sitten osiota tai lohkoa, johon haluat lisätä kuvan.

  7. Tee Kuva-kentässä jokin seuraavista toimenpiteistä:

    • Voit ladata kuvan laitteelta suorittamalla seuraavat vaiheet:
      1. Napauta Valitse kuva > Lisää kuvat.
      2. Etsi ja avaa kuva laitteelta.
      3. Napauta Valmis.

- Voit käyttää ilmaista kuvaa Burst-kuva-arkistosta suorittamalla seuraavat vaiheet: 1. Napauta Tutustu ilmaisiin kuviin. 2. Etsi käytettävä kuva. 3. Napauta Valmis.

  1. Napauta Tallenna.
Android

  1. Napauta Shopify-sovelluksessa ☰-painiketta.

  2. Napauta myyntikanavat -osiossa Verkkokauppa.

  3. Napauta Hallinnoi kaikkia teemoja.

  4. Napauta Mukauta teemassa, jolle haluat ladata kuvan.

  5. Valinnaista: jos haluat lisätä kuvan kauppasi jollekin muulle sivulle kuin etusivulle, napauta Etusivu-pudotusvalikkoa ja valitse sitten muokattava malli.

  6. Napauta Osiot ja napauta sitten osiota tai lohkoa, johon haluat lisätä kuvan.

  7. Tee Kuva-kentässä jokin seuraavista toimenpiteistä:

    • Voit ladata kuvan laitteelta suorittamalla seuraavat vaiheet:
      1. Napauta Valitse kuva > Lisää kuvat.
      2. Etsi ja avaa kuva laitteelta.
      3. Napauta Valmis.

- Voit käyttää ilmaista kuvaa Burst-kuva-arkistosta suorittamalla seuraavat vaiheet: 1. Napauta Tutustu ilmaisiin kuviin. 2. Etsi käytettävä kuva. 3. Napauta Valmis.

  1. Napauta ✓.

Kuvien lisääminen metakenttiä käyttäen

Jos olet määrittänyt metakenttiä kuville, voit lisätä kuvan verkkokauppaan dynaamisen lähteen valitsinta käyttämällä. Lisätietoja metakentistä ja tuetuista kuvamuodoista on kohdassa Arvojen lisääminen metakenttiin.

Kuvan keskipisteen asettaminen

Voit käyttää keskipisteitä verkkokaupan kuvan tärkeimmän osan määrittämiseen. Kun asetat kuvalle keskipisteen, se on kohdealue. Keskipisteet näkyvät aina kehyksessä, vaikka käytössäsi olisi teema, joka rajaa kuvaasi pohjaan sopivaksi. Keskipisteiden avulla voit paremmin hallita sitä, miten kuva näkyy näytön koon vaihdellessa ja tapauksissa, joissa teemoissa käytetään eri kuvasuhdetta.

Kuvaa kohti voi olla vain yksi keskipiste, mutta voit muuttaa keskipistettä tai poistaa sen milloin tahansa.

Keskipisteen yhteensopivuus Shopifyn ilmaisten teemojen kanssa

Voit asettaa keskipisteen seuraaville Shopifyn ilmaisten teemojen versioille:

  • Colorblock, versio 3.0.0 ja uudemmat
  • Craft, versio 5.0.0 ja uudemmat
  • Crave, versio 5.0.0 ja uudemmat
  • Dawn, versio 7.0.0 ja uudemmat
  • Origin, versio 1.0.0 ja uudemmat
  • Publisher, versio 1.0.0 ja uudemmat
  • Refresh, versio 2.0.0 ja uudemmat
  • Ride, versio 3.0.0 ja uudemmat
  • Rise, versio 1.0.0 ja uudemmat
  • Sense, versio 5.0.0 ja uudemmat
  • Spotlight, versio 0.0.1 ja uudemmat
  • Studio, versio 4.0.0 ja uudemmat
  • Taste, versio 4.0.0 ja uudemmat
  • Trade, versio 1.0.0 ja uudemmat

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

Keskipisteen lisääminen kuvaan

Jos lisäät kuvaan keskipisteen ja käytät sitten kuvaa verkkokaupassasi useissa paikoissa, sama keskipiste on käytössä kaikkialla, missä käytät kuvaa.

Keskipiste ei välttämättä aina ole visuaalisesti kuvan keskellä. Tämä riippuu siitä, miten teemasi rajaa kuvia ja muuttaa niiden kokoa.

Vaiheet:

  1. Klikkaa kuvaa mistä tahansa Shopify-ylläpitäjän seuraavista sijainneista:

    • Sisältö > Tiedostot -osiossa.
    • Teemaeditorissa.
    • Tuoteluetteloiden Media-osiossa Tuotteet-osiossa.
    • Shopify Email -editorissa.
    • Minkä tahansa sellaisen resurssin Metakentät-osiossa, jolla on Tiedostoviite-tyypin metakenttä kuvan lisäämistä varten.

  2. Voit valita kuvan osan, johon haluat asettaa keskipisteen, joko klikkaamalla kuvaa tai vetämällä sinistä pistettä.

  3. Klikkaa Tallenna.

Keskipisteen poistaminen kuvasta

Vaiheet:

  1. Klikkaa kuvaa mistä tahansa Shopify-ylläpitäjän seuraavista sijainneista:

    • Sisältö > Tiedostot -osiossa.
    • Teemaeditorissa.
    • Tuoteluetteloiden Media-osiossa Tuotteet-osiossa.
    • Shopify Email -editorissa.
    • Minkä tahansa sellaisen resurssin Metakentät-osiossa, jolla on Tiedostoviite-tyypin metakenttä kuvan lisäämistä varten.

  2. Klikkaa Poista.

  3. Klikkaa Tallenna uutena.

Kuvamuodot

Seuraavia kuvamuotoja tuetaan:

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

JPEG-kuvien käyttäminen

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 ilman kuvan laadun huomattavaa heikkenemistä. Käytä JPEG-muotoa seuraavissa kuvatyypeissä:

  • tuotteet
  • bannerit ja diaesitykset
  • sivut ja blogipostaukset

PNG-kuvien käyttäminen

PNG-kuvat soveltuvat ihanteellisesti grafiikkaan ja kuvakkeisiin, joissa on tasaiset värit eikä liukuja. PNG-muoto tukee myös läpinäkyvyyttä kuvissa. 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), kuvasi toimitetaan tällaisessa muodossa.

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

Kuvien latausrajat

Kuvien lataamista Shopifyhin on rajoitettu sekä megapikselien että megatavuina mitattavan tiedostokoon 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:

  • 20 megapikseliä
  • 20 megatavua

Löydät kuvan megapikseliarvon käyttämällä seuraavaa kaavaa:

(pixel width x pixel height)/1,000,000

Esimerkiksi kuva, jonka resoluutio on 4 900 pikseliä x 6 930 pikseliä, on 33,9 megapikseliä laskettuna tällä kaavalla: (4900x6930)/1,000,000 = 33.9 MP.

Kuvien väriprofiilit

Kun näytät kuvan verkkokaupassasi, kuvan värit saattavat näkyä eri tavalla kuin Shopifyhin lataamassasi 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 seuraavista 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 ladattu kuva ei sisällä väriprofiilia, verkkoselain käyttää oletuksena sRGB:tä, joka on yleisin kuvien verkossa näyttämiseen käytettävä väriprofiili. Tämä takaa, että kuvat näkyvät samoin kaikilla merkittävillä verkkoselaimilla ja laitteilla.
  • Väriprofiilit voivat viedä paljon levytilaa, mikä voi pidentää sivujen 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.

Tarkastele Adoben dokumentaatiota siitä, miten voit määrittää tai poistaa väriprofiilin (Illustrator, Photoshop) ja määrittää tai poistaa väriprofiilin (InDesign).

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, sinun täytyy 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ä.

Huomioitavaa kuvien käyttämisestä diaesityksissä tai kuvabannereissa

Jotta kuvat toimivat hyvin teemassasi, pidä seuraavat asiat mielessä:

  • 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 ja taustoihin tekstiä ja linkkejä teemaeditorilla.

  • 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 matkapuhelimessa tai tabletissa pystysuuntaisessa tilassa. Jos alla olevassa esimerkissä ihmiset ovat kuvan tärkein osa, voit sijoittaa keskipisteen kuvan oikealle puolelle.

Leveät kuvat korkealla näytöllä

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 kannettavassa tietokoneessa tai pöytäkoneessa. Jos alla olevassa esimerkissä kengät ovat kuvan tärkein osa, voit sijoittaa keskipisteen kuvan alaosaan.

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

Etkö löydä hakemaasi vastausta? Autamme mielellämme.