Ohita pääsisältöön

Kuvien kokoluokat

Tämä dokumentti määrittelee suositellut kuvien kokoluokat ja tekniset vaatimukset eri käyttökohteisiin Willba-verkkokaupassa ja CMS-järjestelmässä.

Muoto: PNG

Koko: 600×215 px

huom

Dokumenttipohjissa ei voi käyttää SVG-kuvia, joten turvallisinta on käyttää PNG-muotoa kaikille logoille.

Favicon​

Muoto: favicon.ico

Sisältö: Vähintään 32×32 px (mieluiten myös 48×48 px)

Favicon näkyy selaimen välilehdessä ja kirjanmerkeissä.

Huoneen ominaisuudet (Facilities)​

Muoto: SVG tai PNG

Koko: 64×64 px

Tiedostokoko: Alle 5 kB

Näitä kuvakkeita käytetään huoneiden ominaisuuksien esittämiseen.

Taustakuvat ja kategoriakuvat​

Käyttö: Filter Banner Background ja Category Images

Muoto: WebP

Koko: 2560×1440 px

Laatu: 80%

WebP-muoto

WebP-tiedostomuoto on mahdollisimman kompaktiin muotoon pakattu tiedostotyyppi, jonka ansiosta sivu latautuu nopeammin. Kuvan resoluutio pitää olla iso, koska näitä kuvia näytetään koko näytön leveydellä.

Tapahtuma- ja huonekortit​

Käyttö: Cover Image ja myyntilinkin teeman kuva (PreviewCard)

Muoto: WebP

Koko: 1200×900 px (kuvasuhde 4:3)

Laatu: ~75%

Tavoitetiedostokoko: Alle 80 kB

Nämä kuvat näkyvät tapahtuma- ja huonekorteissa listauksissa.

Tapahtuma- ja huonesivun kuvat​

Käyttö: Galleria ja yksityiskohtasivut (detail page)

Muoto: WebP

Koko: 1920×1280 px (kuvasuhde 3:2)

Laatu: 80%

Käytetään tapahtuma- ja huonesivujen kuvagallerioissa.

Kiitossivun kuva​

Käyttö: Thank You Page

Muoto: WebP

Koko: 2400×1000 px (kuvasuhde 2.4:1)

Laatu: 80%

Kiitos-kuva näkyy kiitossivulla tilauksen tai ilmoittautumisen jälkeen.

Parhaat käytännöt​

  • Optimoi kuvat ennen latausta: Käytä kuvanpakkaustyökaluja tiedostokoon pienentämiseen laadusta tinkimättä
  • Käytä WebP-muotoa: Modernit selaimet tukevat WebP-muotoa, joka tarjoaa parhaan laatu-koko-suhteen
  • Tarkista kuvasuhde: Varmista, että kuvat ovat oikeassa kuvasuhteessa välttääksesi leikkaantumista
  • Testaa eri laitteilla: Tarkista kuvien näkyvyys sekä mobiililaitteilla että työpöytäselaimilla
  • Nimeä tiedostot kuvaavasti: Käytä selkeitä tiedostonimiä sisällönhallinnan helpottamiseksi