Alla oleva taulukko listaa kauppapaikan tärkeimmät kuvavaihtoehdot, ja sen minkä kokoisina ne rajautuvat esille eri leveyksisillä selainnäkymillä. Kuvat rajataan ja muunnetaan automaattisesti listan mukaisiin muotoihin pääsääntöisesti yhdestä lähdekuvasta. Silloin kun tuotteen kuvaa käytetään koko sivun pääkuvaroolissa, käytetään mobiilikokoisten kuvien lähteenä tuotteen mobiilipääkuvaa normaalin pääkuvan sijaan.
Tuotesivu — pääkuva
Suuri pääkuva tuotesivun yläosassa (oletusasettelu).
| Näkymä | Leveys × korkeus | Formaatti | Kuvan lähde |
|---|---|---|---|
| 300–699 px | 412 × 733 | WebP / JPEG | Mobiilin pääkuva |
| 700–1199 px | 800 × 400 | WebP / JPEG | Normaali kuva |
| ≥ 1200 px | 1920 × 910 | WebP / JPEG | Normaali kuva |
Tuotesivu — sivupalkin pääkuva
Käytetään, kun tuotteen pääkuva näytetään sivupalkin asettelussa eikä koko leveyden hero-kuvana.
| Näkymä | Leveys × korkeus | Formaatti |
|---|---|---|
| 300–767 px | 737 × autom. | WebP / JPEG |
| 767–991 px | 218 × autom. | WebP / JPEG |
| 992–1199 px | 292 × autom. | WebP / JPEG |
| ≥ 1200 px | 358 × autom. | WebP / JPEG |
Huom: Kuvan korkeutta ei rajata, kun sitä käytetään sivupalkissa.
Tuoteruudukon kortti
Pikkukuva tuotelistoissa.
| Näkymä | Leveys × korkeus | Formaatti |
|---|---|---|
| ≤ 639 px | 607 × 404 | WebP (+ HiDPI) / JPEG |
| 640–991 px | 353 × 236 | WebP (+ HiDPI) / JPEG |
| ≥ 992 px | 563 × 376 | WebP (+ HiDPI) / JPEG |
Käyttö kauppapaikalla
| Sivu / alue |
|---|
| Kategoriasivun tuoteruudukko |
| Tapahtuma- / näytöslistaukset (elokuvalista) |
Kokoelmalistan kuva
Pieni kuva kokoelman nimen vieressä kirjautuneen käyttäjän modaalissa, jos käyttäjällä on pääsy kokoelmiin.
| Näkymä | Leveys × korkeus | Formaatti |
|---|---|---|
| ≤ 767 px | 356 × 200 | WebP (+ HiDPI) / JPEG |
| ≥ 768 px | 279 × 157 | WebP (+ HiDPI) / JPEG |
Ostoskorin tuote
Tuotteen pikkukuva ostoskorissa ja kassalla.
| Koko | Leveys × korkeus | Formaatti | Huomiot |
|---|---|---|---|
| Ensisijainen | 600 × 400 | WebP | Ensimmäinen lähde |
| Varmuuskopio | 300 × 200 | WebP / JPEG | Käytetään, kun pienempi versio tarvitaan |
Huom: Ei näkymän mediaquery-ehtoja — selain valitsee listatuista lähteistä.
Hakuehdotus
Pikkukuva reaaliaikaisissa hakutuloksissa, kun asiakas kirjoittaa hakukenttään.
| Koko | Leveys × korkeus | Formaatti |
|---|---|---|
| Ensisijainen | 600 × 400 | WebP |
| Varmuuskopio | 300 × 200 | WebP / JPEG |
Tilin yhteenvedon pikkukuva
Pieni neliönmuotoinen pikkukuva tilauksille ja varauksille kirjautuneen käyttäjän tilillä.
| Näkymä | Leveys × korkeus | Formaatti |
|---|---|---|
| ≤ 639 px | 300 × 300 | WebP (+ HiDPI) / JPEG |
| 640–991 px | 200 × 200 | WebP (+ HiDPI) / JPEG |
| ≥ 992 px | 300 × 300 | WebP (+ HiDPI) / JPEG |
Etusivu — esittelykategorian banneri
Bannerikuva etusivulla esitellyille kategorioille.
| Näkymä | Leveys × korkeus | Formaatti |
|---|---|---|
| ≤ 767 px | 412 × 733 | WebP (+ HiDPI) |
| 600–799 px | 800 × 500 | WebP (+ HiDPI) |
| 800–1199 px | 1000 × 300 | WebP (+ HiDPI) |
| ≥ 1200 px | 1920 × 580 | WebP (+ HiDPI) |
| ≤ 767 px (JPEG) | 540 × 960 | JPEG |
| 768–1199 px (JPEG) | 1000 × 300 | JPEG |
| ≥ 1200 px (JPEG) | 1920 × 580 | JPEG |
Etusivun ja kategoriasivun kuvakaruselli
Pääkuvalista, kun kategoria näytetään etusivun tai kategoriasivun karusellissa.
| Näkymä | Leveys × korkeus | Formaatti |
|---|---|---|
| ≤ 699 px | 412 × 733 | WebP (+ HiDPI) / JPEG |
| 700–1199 px | 800 × 400 | WebP (+ HiDPI) / JPEG |
| ≥ 1200 px | 1920 × 900 | WebP (+ HiDPI) / JPEG |
Yhteenveto
| Sijoitus | Suurin näytetty koko | Kuvasuhde |
|---|---|---|
| Tuotesivun pääkuva (työpöytä) | 1920 × 910 px | ~2,1 : 1 |
| Tuotesivun pääkuva (mobiili) | 824 × 1466 px (412 × 733 @ 2×) | ~9 : 16 |
| Tuoteruudukon kortti | 1214 × 808 px (607 × 404 @ 2×) | 3 : 2 |
| Etusivun / kategoriasivun karuselli (työpöytä) | 3840 × 1800 px (1920 × 900 @ 2×) | ~2,1 : 1 |
| Etusivun esittelykategorian banneri (työpöytä) | 3840 × 1160 px (1920 × 580 @ 2×) | ~3,3 : 1 |
| Kokoelmalista | 712 × 400 px (356 × 200 @ 2×) | 16 : 9 |
| Ostoskori / hakupikkukuva | 1200 × 800 px (600 × 400 @ 2×) | 3 : 2 |
| Tilin yhteenveto | 600 × 600 px (300 × 300 @ 2×) | 1 : 1 |