Näin yhdistät kuvia verkkosivulle

Yhdistätkö kuvat vai pidätkö ne erillään?

Kollaasi kokoaa useita kuvia yhteen kuvatiedostoon. Se voi antaa projektisivulla tiiviin yleiskuvan tai näyttää kohteen ja siihen liittyvän yksityiskohdan rinnakkain. Kuvien kannattaa vastata yhteiseen kysymykseen: miltä valmis keittiö näyttää ja miten sen säilytysratkaisut toimivat?

Pidä kuvat erillään, jos jokainen tarvitsee oman selityksen, linkin tai tarkemman tarkastelun. Tuotekuvagalleriassa kävijä voi tutkia eri näkymiä yksitellen pienen ruudukon sijaan.

Kollaasin asettelu säilyy, vaikka kuva näytetään pienempänä. Sivuston editoriin erikseen lisätyt kuvat voivat asettua puhelimella allekkain, mutta yhdeksi tiedostoksi yhdistetyt kuvat pysyvät paikoillaan. Kollaasin ulkoasu on siten ennakoitava, mutta sivu ei voi mukauttaa yksittäisten kuvien kokoa yhtä vapaasti.

Valitse kuvia, jotka kertovat eri asioita

Kahdesta neljään kuvaa on käytännöllinen lähtökohta projektin esittelyyn. Anna jokaiselle tehtävä: yleiskuva näyttää kokonaisuuden ja lähikuva tuo esiin ominaisuuden, jota muuten olisi vaikea nähdä. Kaksi lähes samanlaista yleiskuvaa kertoo yleensä vähemmän kuin yleiskuva ja hyödyllinen yksityiskohta.

Valitse kuvia, joiden valaistus ja värit sopivat yhteen. Ennen–jälkeen-vertailussa samankaltainen kuvakulma, rajaus ja mittakaava helpottavat muutoksen arviointia. Vältä rajauksia, jotka peittävät olennaisen eron. Verkkosivun kuvien valintaoppaassa käsitellään sitä, mitä kunkin kuvan pitäisi kertoa.

Valitse kuville sopiva asettelu

Pixilon kolmen kuvan asettelussa ensimmäinen kuva näkyy suurena vasemmalla ja kaksi muuta allekkain oikealla. Vaihda järjestystä sen mukaan, mille kuvalle haluat eniten tilaa. Tavallinen ruudukko täyttyy vasemmalta oikealle ja sitten ylhäältä alas. Jos kuvia ei riitä jokaiseen ruutuun, tyhjäksi jäävässä tilassa näkyy valitsemasi tausta.

Sovita kollaasin muoto kuvien ruutuihin

Kollaasin leveys ja korkeus määräävät myös sen sisällä olevien kuvaruutujen muodon. Neliönmuotoinen kollaasi ei siis aina tarkoita neliönmuotoisia ruutuja: kaksi vierekkäistä kuvaa saa kumpikin pystysuuntaisen ruudun. Ruudukossa, jossa on kaksi riviä ja kaksi saraketta, ruudut ovat suunnilleen neliöitä, kun kuvavälit ja reunukset ovat pienet.

Jos yhdistät kaksi pystykuvaa vierekkäin, kokeile korkeampaa kollaasia, jotta myös kuvaruudut pysyvät pystysuuntaisina. Leveässä ja matalassa kollaasissa ruudut täyttävistä kuvista rajautuu enemmän pois ylä- ja alareunasta. Kahdelle vierekkäiselle vaakakuvalle leveämpi kollaasi voi puolestaan jättää enemmän näkymää näkyviin.

Lähde sivulla käytettävissä olevasta tilasta ja kokeile kuville sopivaa asettelua ja kokonaismuotoa. Jos sivusto edellyttää tiettyä kuvasuhdetta, säilytä se ja muuta sen sijaan asettelua tai kuvavalintaa. Poista Pixilossa kuvasuhteen lukitus, kun haluat muuttaa muotoa. Lukitse kuvasuhde uudelleen, kun haluat muuttaa kokoa säilyttäen samat mittasuhteet.

Näytätkö koko kuvan vai täytätkö ruudun?

Näytä koko kuva säilyttää kuvan kaikki reunat, mutta kuvan ympärille voi jäädä tyhjää tilaa. Tämä sopii logoille, kaavioille ja tuotekuville, joissa aiheen rajaaminen poistaisi tärkeää tietoa.

Täytä ruutu rajaa kuvan sille varattuun tilaan venyttämättä sitä. Ruudukon kuvista tulee näin tasareunaisia, mutta tarkista, mitä rajauksessa jää pois. Valitse kukin pikkukuva ja säädä rajauksen paikkaa niin, että tärkeä aihe pysyy näkyvissä.

Jos sekä kasvot että niiden vieressä tapahtuva toiminta eivät mahdu samaan ruutuun, kokeile toista kollaasin muotoa tai asettelua, näytä koko kuva tai valitse toinen valokuva. Rajauksen siirtäminen ei saa leveän näkymän kaikkia osia mahtumaan kapeaan ruutuun. Käytä ensin rajaustyökalua, jos haluat rajata alkuperäistä tarkemmin, ja tarkista sitten rajatun kuvan sopivuus kollaasiin.

Erota kuvat toisistaan kuvaväleillä

Pieni väli auttaa lukijaa erottamaan vierekkäiset kuvat. Ulkoreunus kehystää kollaasin, mutta vähentää samalla kuville jäävää tilaa. Pidä molemmat maltillisina, jos kollaasi tulee kapeaan palstaan. Välit ja reunus pienenevät kuvan mukana, kun se näytetään pienempänä.

Valitse tausta, joka sopii kuviin ja sivuun. Se näkyy kuvaväleissä, reunuksissa ja tilassa, joka jää ruutuun sovitetun kuvan ympärille. Taustavärin vaihtaminen tai läpinäkyvyyden valitseminen ei poista valokuvassa jo olevaa taustaa.

Yhdistä kuvat Pixilolla

1. Avaa Kuvien yhdistäminen ja valitse JPG-, PNG- tai WebP-tiedostot.
2. Valitse asettelu ja muuta järjestystä pikkukuvien alla olevilla nuolilla.
3. Aseta koko kollaasin leveys ja korkeus. Mitat sisältävät myös kuvavälit ja ulkoreunuksen.
4. Näytä kuvat kokonaan tai täytä niiden ruudut. Jos käytät rajausta, valitse kukin pikkukuva ja säädä rajauksen paikkaa. Liukusäätimet toimivat vain niihin suuntiin, joissa kuvaa rajataan.
5. Aseta kuvavälit, ulkoreunus ja taustaväri tai läpinäkyvyys.
6. Lataa PNG, tarkista laatu ja valmistele julkaistava versio.

Voit lisätä kuvia Lisää kuvia -painikkeella menettämättä nykyistä järjestystä, rajauksia tai asetuksia. Vaihda kuvat korvaa valitut kuvat. Yhden suuren ja kahden pienen kuvan asettelu vaatii täsmälleen kolme kuvaa. Neljännen lisääminen vaihtaa asettelun ruudukoksi.

Esimerkki: neljä kuvaa valmiista keittiöstä

Remonttiyritys haluaa projektisivulle tiiviin esittelyn. Se valitsee keittiön yleiskuvan, kuvan säilytyskaapin sisältä, työtason yksityiskohdan ja työtason yläpuoliset valaisimet. Jokainen kuva näyttää eri puolen samasta valmistuneesta työstä.

Yritys aloittaa 2 × 2 -ruudukosta, koska se haluaa kävijän näkevän kaikki neljä osa-aluetta. Jos yleiskuva olisi esittelyn tärkein kuva, kolmen kuvan asettelu antaisi sille enemmän tilaa. Kaksi yksityiskohtaa voisi näkyä sen vieressä ja neljäs kuva muualla sivulla.

Sivulla kollaasi näkyy enintään 600 pikselin levyisenä. Vie se tässä esimerkissä koossa 1200 × 800 pikseliä, käytä 16 pikselin kuvavälejä, 24 pikselin ulkoreunusta ja valkoista taustaa. Tiedoston leveys on kaksinkertainen näyttökokoon nähden, jotta myös suuren pikselitiheyden näytöille riittää yksityiskohtia. Nämä ovat esimerkkiasetuksia, eivät kaikkia sivustoja koskeva kokosuositus. Verkkosivun kuvakoko-oppaassa kerrotaan, miten valitset mitat oman sivusi mukaan.

Täytä ruudut ja aseta yleiskuva ensin, sitten kaappi, työtaso ja valaisimet. Säädä jokaista rajausta niin, että kuvan esittelemä ominaisuus erottuu.

Kun kollaasi näkyy puhelimella 360 pikselin levyisenä, kukin kuva on tässä asettelussa vain noin 170 pikseliä leveä. Kaappi ja valaisimet erottuvat edelleen, mutta oletetaan, että työtason sauma jää liian pieneksi arvioitavaksi. Siirrä työtasokuva pois kollaasista ja näytä se erikseen suurempana. Asettele sitten jäljelle jäävät kolme kuvaa niin, että yleiskuva saa eniten tilaa. Pelkkä vientikoon kasvattaminen ei antaisi saumalle lisää tilaa sivulla.

Tarkista kollaasi sivun mobiilinäkymässä

Esikatsele sivua tietokoneen ja puhelimen levyisenä ilman zoomausta. Tarkista, mitä kävijä todella pystyy päättelemään: voiko hän verrata kahta pintamateriaalia, nähdä säilytysratkaisun tai seurata tapahtumaketjua? Pelkkä aiheen tunnistaminen ei riitä, jos olennainen yksityiskohta on kadonnut.

Tarkista kuva osana sivua, älä pelkästään ladattuna tiedostona. Sivuston teema voi rajata sitä lisää sovittaakseen sen tietynmuotoiseen kuva-alueeseen. Muuta aluetta tai kuvan näyttöasetuksia, jos ne leikkaavat osan kollaasista pois.

Jos asettelu tuntuu ahtaalta, yksinkertaista sitä tai pidä kuvat erillään. Jos sivuston rakennustyökalu tukee erillistä mobiilikuvaa, tee versio, jossa on vähemmän kuvia tai kuvat ovat allekkain. Responsiivisten kuvien oppaassa selitetään tämä toteutustapa.

Pidä otsikot ja olennaiset merkinnät sivun tekstinä. Kuvaan sisältyvä teksti pienenee kuvan mukana ja on hankalampi päivittää. Lisää selittävät kuvatekstit sivuston editorissa.

Lisää kuvateksti ja hyödyllinen vaihtoehtoinen teksti

Kuvateksti voi kertoa, mistä projektista on kyse ja missä järjestyksessä kuvat ovat. Neljän keittiökuvan ruudukossa se voisi olla: ”Valmis keittiöremontti. Ylhäältä vasemmalta myötäpäivään: yleiskuva, ulosvedettävä säilytyskaappi, työtason valaisimet ja työtason yksityiskohta.” Päivitä kuvaus vastaamaan lopullista asettelua, jos siirrät tai poistat kuvan.

Yhtenä tiedostona tallennettu, tietoa välittävä kollaasi tarvitsee vaihtoehtoisen tekstin koko kuvalle. Keittiöesimerkissä se voisi olla: ”Remontoitu keittiö, jossa on ulosvedettävä säilytyskaappi, tasainen työtason sauma ja valaisimet työtason yläpuolella.” Kuvaile olennaista sen sijaan, että kirjoittaisit vain ”Neljän kuvan kollaasi”.

Jos kuvilla selitetään yksityiskohtaista vertailua, kerro keskeiset erot kuvan vieressä olevassa sivutekstissä sen sijaan, että yrittäisit mahduttaa kaiken vaihtoehtoiseen tekstiin. W3C:n ohje monimutkaisista kuvista käsittelee lyhyen vaihtoehtoisen tekstin ja laajemman kuvauksen yhdistämistä. Vaihtoehtoisten tekstien ja tiedostonimien oppaassa kerrotaan, miten kirjoitat sivun tarkoitukseen sopivan kuvauksen.

Valmistele kuvatiedosto verkkosivulle

Pixilo tallentaa kollaasin PNG-muodossa, joka säilyttää läpinäkyvyyden eikä lisää vientivaiheessa häviöllistä pakkausta. Tämä ei palauta lähdekuvista puuttuvia yksityiskohtia. Pieni kuva voi näyttää pehmeältä, kun sitä suurennetaan täyttämään ruutu, etenkin tiukan rajauksen jälkeen. Tarkista jokainen kuva ladatussa kollaasissa. Jos yksi näyttää selvästi muita epäterävämmältä, käytä suurempaa alkuperäistä tai anna sille pienempi ruutu.

Valokuvista koostuvasta kollaasista voi tulla suuri PNG-tiedosto. Tee verkkosivulle sopiva kopio PNG–WebP-muuntimella tai, jos et tarvitse läpinäkyvyyttä, PNG–JPG-muuntimella. Vertaa tiedostokokoa ja näkyvää laatua PNG-versioon. Tarkkaile pieniä yksityiskohtia ja reunoja laatuasetusta säätäessäsi. Pienimmästä tiedostosta ei ole hyötyä, jos esiteltävä ominaisuus ei enää erotu.

Jos sivun taustan pitää näkyä kuvan läpi, säilytä läpinäkyvyyttä tukeva versio. JPG ei tue sitä. Verkkosivun kuvamuotojen oppaassa käsitellään vaihtoehtoja tarkemmin.

Lisää valitsemasi versio sivulle ja varmista, että sivu käyttää oikeaa tiedostoa ja kuvamittoja. Säilytä alkuperäiset valokuvat tulevia muutoksia varten: ladatun PNG:n sisällä olevia kuvia ei voi enää järjestellä uudelleen.