Kuvien lataaminen

Voit käyttää erityyppisiä kuvia, kuten yrityksesi logoa, tuotekuvia, diaesityksiä, bannereita ja blogipostausten kuvia. Voit myös muokata kuviasi rajaus- ja koonmuutostoiminnoilla ja mukauttaa teemasi media-asetuksia muuttaaksesi kaiken kaupassasi näytettävän median reunusta tai varjoa.

Jotta kuvat näkyisivät verkkokaupassasi juuri sellaisina kuin haluat, sinun on käytettävä oikeaa kuvasuhdetta. Kuvat optimoidaan automaattisesti myyntipaikkaasi varten Shopify Content Delivery Networkin (CDN) avulla.

Kuvan lataaminen teemaeditorissa

Voit lisätä kuvia teemaasi teemaeditorissa. Voit myös ladata kuvia Shopifyn ohjausnäkymän osiossa Sisältö > Tiedostot. Lisätietoja on kohdassa Tiedostojen lataaminen ja hallinta.

Vaiheet:

Kuvien lisääminen metakenttien avulla

Jos olet määrittänyt kuville metakenttiä, voit lisätä kuvan verkkokauppaasi dynaamisen lähteen valitsimen avulla. Lisätietoja metakentistä ja tuetuista kuvamuodoista on ohjeaiheessa Arvojen lisääminen metakenttiin.

Keskipisteen asettaminen kuvalle

Keskipisteiden avulla voit määrittää kuvan tärkeimmän osan verkkokaupassasi. Kun asetat kuvalle keskipisteen, teet siitä tarkennusalueen. Keskipisteet näkyvät aina rajauksen sisällä, vaikka teemasi rajaisi kuvan pohjaan sopivaksi. Keskipisteiden avulla voit hallita paremmin, miten kuvasi näkyy erikokoisilla näytöillä ja tilanteissa, joissa teemat käyttävät eri kuvasuhteita.

Kuvalla voi olla vain yksi keskipiste, mutta voit vaihtaa tai poistaa sen milloin tahansa.

Keskipisteen yhteensopivuus Shopifyn ilmaisten teemojen kanssa

Voit asettaa keskipisteen seuraaviin Shopifyn ilmaisten teemojen versioihin:

• Kaikki Horizon-perheen teemat
• 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 teemasi keskipisteiden käyttöä.

Keskipisteen lisääminen kuvaan

Jos lisäät kuvaan keskipisteen ja käytät kuvaa useassa paikassa verkkokaupassasi, sama keskipiste on käytössä kaikkialla, missä kuvaa käytetään.

Riippuen siitä, miten teemasi rajaa kuvia ja muuttaa niiden kokoa, keskipiste ei välttämättä ole aina visuaalisesti keskellä.

Vaiheet:

1. Napsauta kuvaa jossakin seuraavista sijainneista Shopify-ylläpitäjässäsi:
   • Sisältö > Tiedostot -osiossa.
   • Teemaeditorissa.
   • Tuotteet-osion tuotelistauksien Media-osiossa.
   • Shopify Messaging -sähköpostieditorissa.
   • Minkä tahansa sellaisen resurssin Metakentät-osiossa, jolla on kuvan lisäämiseen tarkoitettu Tiedostoviite-tyyppinen metakenttä.
2. Valitse kuvan osa, johon haluat asettaa keskipisteen, napsauttamalla kuvaa tai vetämällä sinistä pistettä.
3. Napsauta Tallenna.

Keskipisteen poistaminen kuvasta

Vaiheet:

1. Napsauta kuvaa jossakin seuraavista sijainneista Shopify-ylläpitäjässäsi:
   • Sisältö > Tiedostot -osiossa.
   • Teemaeditorissa.
   • Tuotteet-osion tuotelistauksien Media-osiossa.
   • Shopify Messaging -sähköpostieditorissa.
   • Minkä tahansa sellaisen resurssin Metakentät-osiossa, jolla on kuvan lisäämiseen tarkoitettu Tiedostoviite-tyyppinen metakenttä.
2. Napsauta Poista.
3. Napsauta Tallenna uutena.

Kuvamuodot

Seuraavia kuvamuotoja tuetaan:

• JPEG
• Progressiivinen JPEG
• PNG
• GIF
• HEIC
• WebP

JPEG-kuvien käyttäminen

JPEG-kuvat sopivat erinomaisesti valokuviin ja muihin still-kuviin, joissa on monimutkaisia värejä. JPEG-muodossa on miljoonien värien paletti. JPEG-muodossa on myös häviöllinen pakkaus, joka voi auttaa pitämään sivujen latausajat nopeina ilman huomattavaa heikkenemistä kuvanlaadussa. Käytä JPEG-muotoa seuraavantyyppisille kuville:

• tuotteet
• bannerit tai diaesitykset
• sivut ja blogipostaukset

PNG-kuvien käyttäminen

PNG-kuvat sopivat ihanteellisesti grafiikkaan ja kuvakkeisiin, joissa on tasaiset värit ilman liukuvärejä. PNG-muoto tukee myös kuvien läpinäkyvyyttä. Käytä PNG-muotoa seuraavantyyppisissä kuvissa:

• logot
• kuvakkeet
• reunukset ja somisteet

Automaattinen kuvien pakkaus ja muodon valinta

Kuvia ei pakata, kun lataat ne Shopifyn ohjausnäkymään. Tämä auttaa säilyttämään niiden alkuperäisen laadun. Seuraavia asioita voi kuitenkin tapahtua, jotta sivujen latausajat pysyvät nopeina asiakkaillesi:

• Kun kuvia käytetään kauppasi teeman kautta, niihin saatetaan soveltaa korkealaatuista pakkausta
• Shopify määrittää automaattisesti parhaan mahdollisen tiedostomuodon kuviesi näyttämistä varten
• Kun asiakkaan verkkoselain tukee nykyaikaisia kuvamuotoja, kuten WebP ja AVIF (AV1 Image File Format), kuvat toimitetaan näissä muodoissa
• GIF-kuvat muunnetaan automaattisesti animoituun WebP-muotoon tehokkuuden parantamiseksi pienentämällä tiedostokokoa

Harkitse seuraavia toimia parhaan kuvanlaadun saavuttamiseksi:

• Lataa korkeamman resoluution kuvia, joiden koko on enintään 5000 x 5000 px tai 25 megapikseliä
• Valitse vähemmän häviöllisiä kuvatyyppejä, kuten PNG, viivapiirroksille, tekstille ja läpinäkyvälle grafiikalle
• Käytä JPEG-muotoa tuotekuvissa tai diaesityksissä
• SVG-tiedostoja tuetaan, mutta niillä on rajoituksia – niitä ei voi muuntaa (muuttaa kokoa, rajata jne.) pyytämättä rasteroitua muotoa (JPEG, WebP, PNG)

Muita tiedostotyyppejä, kuten PSD (Photoshop Document), TIFF (Tagged Image File Format) ja BMP (Bitmap), hyväksytään, mutta ne muunnetaan JPEG/PNG-muotoon latauksen yhteydessä.

Kuvien latausrajoitukset

Shopifyhin ladattavilla kuvilla on rajoituksia sekä megapikselien (MP) että megatavuina (Mt) mitattavan tiedostokoon osalta. Megapikseleillä ilmaistaan, kuinka monesta miljoonasta pikselistä kuva koostuu. Megatavuilla ilmaistaan, kuinka monta miljoonaa tavua muistia tai levytilaa kuva vie.

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

• 20 megapikseliä
• 20 megatavua

Voit laskea kuvasi megapikseliarvon seuraavalla yhtälöllä:

(pikselileveys x pikselikorkeus) / 1 000 000

Esimerkiksi kuva, jonka resoluutio on 4900 x 6930 px, on yhtälön perusteella 33,9 megapikseliä: (4900x6930)/1 000 000 = 33,9 MP.

Kuvien väriprofiilit

Kun tarkastelet kuvaa verkkokaupassasi, kuvan värit saattavat näyttää erilaisilta kuin alkuperäisessä kuvassa, jonka lataat Shopifyhin. Näin voi käydä, kun kuvalla on väriprofiili, joka on .ICC- tai .ICM-päätteiseen tiedostoon tallennettu tietoaineisto.

Väriprofiilit sulautetaan usein kuviin, jotta värien näyttötapa voidaan standardoida eri laitteissa. Kun kuvia näytetään verkkokaupassasi, niiden väriprofiilit poistetaan.

Väriprofiilit poistetaan seuraavista syistä:

• Kaikki laitteet eivät pysty lukemaan .ICC- tai .ICM-väriprofiileja, joten niiden säilyttäminen voi aiheuttaa epäjohdonmukaisuuksia kuvan väreissä eri laitteiden välillä.
• Jos ladattu kuva ei sisällä väriprofiilia, verkkoselain olettaa sen olevan sRGB, joka on yleisin verkossa kuvien näyttämiseen käytetty väriprofiili. Näin varmistetaan, että kuvat näkyvät samalla tavalla kaikissa yleisimmissä verkkoselaimissa ja laitteissa.
• 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 kuin lataat sen Shopifyhin. Tämä prosessi vaihtelee kuvankäsittelyohjelman mukaan.

Katso Adoben ohjeista, miten väriprofiili määritetään tai poistetaan (Illustrator, Photoshop) ja miten väriprofiili määritetään tai poistetaan (InDesign).

Parhaat käytännöt diaesityksiä, kuvabannereita ja koko leveyden kuvia varten

Monissa Shopify-teemoissa on suuria kuvia tai diaesityksiä, jotka skaalautuvat selaimesi korkeuden mukaan tai mukautuvat näyttösi kokoon.

Jos käytät jotakin näistä teemoista tai sinulla on suuri diaesitys tai taustakuva, sinun on ymmärrettävä, minkä tyyppiset kuvat näkyvät parhaiten.

Koska suuret kuvat eivät mahdu kaikille laitteille, Shopify näyttää joskus vain osan kuvasta riippuen käyttämästäsi laitteesta. Jos kuvan diaesitys sisältää paljon suuria kuvia, saatat huomata, että osia kuvista ei ole näkyvissä.

Huomioitavia seikkoja kuvien käyttämisestä diaesityksissä tai kuvabannereissa

Varmistaaksesi, että kuvasi toimivat hyvin teemasi kanssa, pidä seuraavat seikat mielessä:

• Diaesityksissä tai taustoissa käyttämissäsi kuvissa ei saisi olla tekstiä. Jos teksti on osa itse kuvaa, se saattaa siirtyä, rajautua tai mukautua teemasi mukaan. Lisää tekstiä ja linkkejä diaesityksiin ja taustoihin teemaeditorin avulla.

• Valitse diaesityksissä tai taustakuvina käytettäviin kuviin yksinkertaisia kuvia, jotta niiden päälle tuleva teksti on helppolukuista.

Leveät kuvat korkeilla näytöillä

Leveitä kuvia saatetaan rajata vasemmalta ja oikealta, kun niiden katseluun käytettävässä laitteessa on korkea näyttö, kuten pystyasennossa olevassa matkapuhelimessa tai tabletissa. Alla olevassa esimerkissä, jos ihmiset ovat kuvan tärkein osa, voit sijoittaa polttopisteen kuvan oikeaan reunaan.

Korkeat kuvat leveillä näytöillä

Korkeita kuvia saatetaan rajata ylhäältä ja alhaalta, kun niiden katseluun käytettävässä laitteessa on leveä näyttö, kuten kannettavan tietokoneen tai pöytätietokoneen näyttö. Alla olevassa esimerkissä, jos kengät ovat kuvan tärkein osa, voit sijoittaa polttopisteen kuvan alaosaan.

Kuvien latautumiskäyttäytyminen

Kun vierailet verkkokauppasi sivulla, saatat huomata, että kuvat näyttävät aluksi hieman sumeilta ja terävöityvät hetken kuluttua. Tämä on odotettua toimintaa, joka parantaa kauppasi latausnopeutta ja käyttäjäkokemusta.

Shopify-teemat käyttävät hidastetun latauksen tekniikkaa, jossa kuvasta ladataan ensin pienempi versio samalla, kun täysikokoinen kuva latautuu taustalla. Tämän ansiosta asiakkaat voivat tarkastella sisältöä heti sen sijaan, että heidän täytyisi odottaa suurten kuvien latautumista kokonaan. Prosessi kestää yleensä alle sekunnin, mutta se luo vaikutelman, että kauppasi latautuu nopeammin.

Tämä tekniikka on erityisen hyödyllinen kaupoissa, joissa on paljon kuvia, sillä se parantaa merkittävästi sivun alkuperäistä latausaikaa ja antaa asiakkaille välitöntä visuaalista palautetta.

Kuvien vianmääritys