Näin viet valokuvat verkkoportfolioon

Valokuvausportfolion pitää latautua sujuvasti ja näyttää, miksi työ ansaitsee huomiota. Kankaan rakenne, lehdet, tasainen taivas ja ihon sävyt voivat olla tärkeämpiä kuin palvelusivun pienessä kuvituksessa. Pikkukuvana kelvollinen vienti voi näyttää heikolta suurena.

Tavoitteena on tiedostosarja, joka säilyttää olennaiset yksityiskohdat kävijän käyttämissä näyttökoissa. Opas auttaa valitsemaan ja testaamaan viennit sekä selvittämään, mitä julkaisualustan jatkokäsittely muuttaa.

Suunnittele vienti myös suurta näkymää varten

Listaa kuvan käyttöpaikat: ruudukko, projektisivu, avattava suurkuva tai koko sivun levyinen aloituskuva. Sama kuva voi näkyä ruudukossa neliörajauksena ja avattuna kokonaisena. Pikkukuvan pikselimäärä ei riitä suuremman näkymän lisäyksityiskohtiin.

Lue alustan kuvaohje ennen esiasetusten tekemistä. Osa alustoista tuottaa lähteestä useita kokoja, osa näyttää ladatun tiedoston sellaisenaan. Esimerkiksi Adobe Portfolio säilyttää täysikokoisen lähteen ja luo pienempiä versioita. Selvitä siis erikseen palveluun ladattu lähde ja kävijälle toimitettu tiedosto.

Tarkista myös, voiko sivustolta ladata alkuperäiskokoisen tiedoston. Älä lisää painoon tarkoitettua korkealaatuista tiedostoa vain siksi, että galleria tavallisesti näyttää pienemmän version. Verkkoviennin pitää olla kopio, jonka olet valmis jakamaan sivuston toimintojen kautta.

Selvitä avatun näkymän todellinen koko

1. Aloita sivuston rakennustyökalusta. Tarkista gallerian ohjeet ja valitun asettelun asetukset. Etsi näytettävän kuvan suurin leveys tai korkeus. Ladattavan tiedoston enimmäiskoko on eri raja.
2. Avaa julkaistu testigalleria. Käytä leveintä selainikkunaa, jota aiot tukea. Avaa kuva kävijän tavoin, myös suurkuvanäkymään. Toista testi pystykuvalla, jonka kokoa ikkunan korkeus voi rajoittaa.
3. Mittaa vain, jos alusta ei kerro hyödyllisiä mittoja. Napsauta kuvaa tietokoneen selaimessa oikealla painikkeella ja valitse Tarkista. Elementin korostus tai asettelutiedot näyttävät leveyden ja korkeuden CSS-pikseleinä. Mittaa itse kuva, älä gallerian kehystä. Lähdetiedoston avaaminen uuteen välilehteen näyttää sen sijaan tiedoston pikselimitat.

Jos näyttökokoa on vaikea selvittää, aloita alustan ajantasaisesta kokosuosituksesta ja testaa avattu kuva ennen yhteisen esiasetuksen tekemistä. Kameran tarkkuuden sijaan tarvitset perustellun lähtökohdan.

Valitse pikselimitat asettelun mukaan

Aloita suurimmista näyttömitoista ja päätä sitten, kuinka paljon lisäpikseleitä tarvitaan. Leveydeltään 1 200 CSS-pikselin kuva voi käyttää 2 400 pikselin lähdettä kaksinkertaiseen tarkkuuteen, jos sivusto todella toimittaa sen siinä koossa. Esimerkki ei tarkoita, että jokaisen portfoliokuvan pitäisi olla 2 400 pikseliä leveä.

Kun 6 000 × 4 000 alkuperäinen pienennetään suhteessa 2 400 pikselin leveyteen, tulos on 2 400 × 1 600. Näyttökoossa 1 200 × 800 CSS-pikseliä kumpaankin suuntaan on kaksi kuvapikseliä yhtä CSS-pikseliä kohti. Pystykuva 4 000 × 6 000 taas muuttuu pitkän sivun 2 400 asetuksella kokoon 1 600 × 2 400. Sama pitkä sivu ei siis takaa samaa leveyttä.

Molempien mittojen kaksinkertaistaminen nelinkertaistaa pikselimäärän: 1 200 × 800 on 960 000 pikseliä, 2 400 × 1 600 taas 3 840 000. Tiedostokoko ei välttämättä nelinkertaistu, mutta siirto ja purkaminen vaativat enemmän. Vertaa pienempää ja kaksinkertaista versiota oikeassa galleriassa. Säilytä lisäpikselit, jos näkyvä hyöty perustelee ne, ja tarjoa pieniin näkymiin pienemmät versiot.

Tee pienempiä kopioita valmiista verkkokuvasta koonmuutostyökalulla kuvasuhde lukittuna. Jos asettelu vaatii toisen sommittelun, rajaa ensin. Älä venytä pystykuvaa vaakakuvalle varattuun tilaan.

Responsiivisella sivulla puhelimen ei pitäisi ladata jokaiselle pikkukuvalle suurinta tiedostoa. Sivustotyökalu voi hoitaa tämän, mutta omassa toteutuksessa voidaan tarvita responsiivista kuvamerkintää. Responsiivisten kuvien opas selittää näyttökoon ja lähdevalinnan yhteyden.

Tavallisessa näyttökäytössä pikselimitat ovat PPI-merkintää tärkeämmät. Leveydeltään 2 400 pikselin tiedosto säilyy yhtä leveänä, jos muutat vain sen resoluutiotietoa. Tulostuksessa pikselien ja fyysisen koon suhde on erilainen; lue DPI-, PPI- ja pikseliopas.

Valitse tiedostomuoto ja värinkäsittely harkiten

Aloita alustan hyväksymästä muodosta

JPG on käytännöllinen lähtökohta tavallisille valokuville. PNG sopii esimerkiksi läpinäkyvyyteen ja grafiikkaan, mutta tuottaa valokuvista usein tarpeettoman suuria tiedostoja. Myös WebP ja AVIF voivat sopia, jos julkaisualusta tukee niitä tai päätät itse, missä muodossa sivusto toimittaa kuvat kävijöille. MDN:n tiedostomuotojen ohje kertoo niiden ominaisuuksista ja yhteensopivuudesta.

Älä muunna koko sarjaa ennen julkaisutavan tarkistamista. Alusta voi hylätä muodon tai pakata kuvan uudelleen toiseen muotoon. Vertaa valmiin gallerian toimittamaa kuvaa, älä vain lisäämääsi tiedostoa.

Käytä värihallittua vientiä

Tavallisessa SDR-portfoliossa sRGB on käytännöllinen lähtökohta. Vie kuva värinhallintaa tukevasta editorista ja sisällytä väriprofiili, jos ohjelma tarjoaa sen vaihtoehdon. Värien muuntaminen sRGB:hen on eri asia kuin pelkän sRGB-profiilin määrittäminen toisessa väriavaruudessa oleville väriarvoille. Adoben väriä käsittelevät kysymykset ja vastaukset selittävät Lightroomin värinhallintaa.

Laaja väriavaruus ja HDR vaativat yhteensopivan viennin ja julkaisuketjun. Käytä niitä harkiten alustan tuen mukaan. Editorin esikatselu ei yksin kerro, mitä kävijä näkee.

Vertaa julkaistua kuvaa vientitiedostoon samalla laitteella. Käytä kuvaa, jossa on tuttuja värivertailukohtia, kuten ihoa tai neutraali pinta. Näytöt voivat silti erota toisistaan. Jos julkaisu muuttaa värejä samalla laitteella, tutki alustan käsittely ja profiilit ennen luovan muokkauksen muuttamista. Kuvien väriopas auttaa tarkistuksissa.

Etsi sopiva pakkaus pienellä testisarjalla

Sama laatuprosentti ei vaikuta samalla tavalla kaikissa ohjelmissa. Luku ohjaa kyseisen ohjelman pakkausta. Se ei mittaa valokuvan taiteellista tai teknistä laatua prosentteina.

Valitse testiin kuvia, joissa mahdolliset virheet erottuvat eri tavoin. Tasainen taivas paljastaa sävyportaat, hiukset, ruoho ja kangas taas hienon rakenteen katoamisen. Tummissa kohdissa voi näkyä pakkauslohkoja tai suttaantunutta kohinaa. Arkkitehtuurikuvat näyttävät muutokset ohuissa, selkeissä reunoissa. Valitse mukaan sellaisia kuvia, joita itse julkaiset.

1. Käytä kussakin vertailussa samaa muokattua lähdettä. Pidä mitat ja väriasetukset samoina, jotta testaat juuri pakkausta.
2. Tee kaksi tai kolme laatuversiota. Jos editorin JPG-asteikko on 0–100, voit verrata esimerkiksi arvoja 75, 85 ja 95. Ne ovat testipisteitä, eivät yleissuosituksia.
3. Tarkista kuva kahdessa näkymässä. Arvioi ensin kuva siinä koossa, jossa kävijä näkee sen. Tarkista sen jälkeen yksityiskohdat 100 %:n eli 1:1-pikselinäkymässä: onko rakenne kadonnut tai syntynyt lohkoja tai vaaleita reunuksia? 100 % ei tarkoita ikkunaan sovittamista eikä välttämättä kuvan suurentamista. Adobe kuvaa Lightroomin 1:1-näkymää kuvan todellisten pikselien näkymäksi.
4. Vertaa tiedostokokoja ulkoasun jälkeen. Hyväksy pienempi versio vain tärkeiden yksityiskohtien säilyessä. Suuri laatuhaitta pienen säästön vuoksi on harvoin järkevä.
5. Julkaise testi ja vertaa uudelleen. Alustan käsittely voi muuttaa tulosta. Tarkista ruudukko, avattu kuva ja mobiilinäkymä ennen koko sarjan vientiä.

Portfoliokuvalle ei ole yleispätevää kilotavutavoitetta. Yksityiskohtainen metsäkuva voi tarvita enemmän dataa kuin pelkistetty studiokuva, vaikka pikselimitat olisivat samat. Valitse pienin tiedosto, jonka ulkoasun hyväksyt, ja arvioi sen jälkeen koko sivun latautumista.

Mitattu esimerkki: yksi kuva, kolme JPG-vientiä

Testasimme NASA:n Earth Observatoryn kuvaa Alpeista ja Välimerestä. Lähde: NASA/JSC, ISS Crew Earth Observations Facility, kuva ISS073-E-3320. Ladattu lähde oli jo JPG. Pienensimme sen kerran kokoon 2 400 × 1 348 ja tallensimme PNG-työkopion, jotta jokainen vienti lähti samoista pikseleistä. PNG ei palauta ennen testiä menetettyä tietoa.

Muunsimme saman PNG:n Pixilon PNG–JPG-työkalulla asetuksilla 75, 85 ja 95 Microsoft Edge 155.0.4283.45 -selaimessa 17.10.2026. Pikselimitat säilyivät. Luvut kuvaavat tämän selaimen JPG-pakkausta. Ne eivät vastaa suoraan Lightroomin asetuksia eivätkä takaa samaa tulosta muille kuville.

Jokainen yksityiskohtakuva esittää samaa 240 × 160 pikselin aluetta ilman lisäkoonmuutosta. Sivu voi skaalata esikatselut näyttöön sopiviksi. Avaa ladatut täysikokoiset tiedostot 100 %:n näkymään pikselivertailua varten. Katso vuorenharjanteita ja pintarakennetta: alempi asetus säästää tavuja mutta voi tasoittaa niitä. Asetuksen 95 tiedosto on lähes kaksinkertainen asetukseen 85 verrattuna, mutta kokoero ei yksin kerro parannuksen merkitystä galleriallesi.

Voit myös ladata PNG-työkopion (6 464 084 tavua) ja toistaa vertailun. Yksi ilmakuva ei määritä muotokuvien, taiteen tai kaikkien maisemien sopivaa asetusta. Testaa menetelmällä omaa työtäsi edustavia kuvia.

Esimerkki: vientiesiasetus Lightroom Classiciin

Oletetaan, että suurin rajaamaton näkymä on 1 200 × 800 CSS-pikseliä ja muokattu alkuperäinen 6 000 × 4 000. Vertaat 2 400 × 1 600 JPG:tä pienempään versioon. Valitse Lightroom Classicissa kuva ja avaa File → Export. Adoben vientiohje selittää paneelit; nimet ja valinnat voivat vaihdella version mukaan.

• File Settings: valitse JPEG ja tähän SDR-esimerkkiin sRGB. Vertaa laatuja Lightroomissa, älä kopioi yllä olevan selaintestin lukua.
• Image Sizing: ota Resize to Fit käyttöön ja valitse Width & Height. Anna vaakakuvalle rajat 2 400 × 1 600 pikseliä. Kuva sovitetaan rajojen sisään venyttämättä; pystykuvaa ei pakoteta samoihin mittoihin. Pidä Don't Enlarge valittuna, jos esiasetusta käytetään myös pienemmille lähteille.
• Output Sharpening: vertaa terävöittämätöntä versiota asetuksiin Sharpen For: Screen ja Amount: Standard. Katso hienoja reunoja ja rakennetta lopullisessa näyttökoossa. Jätä terävöitys pois tai vähennä sitä, jos syntyy haloja tai kovia reunoja.
• Metadata: säilytä tarvittavat kuvaus- ja tekijänoikeuskentät. Tarkista sijainti- ja henkilötietojen poistovalinnat.
• Export Location: tallenna erilliseen verkkovientikansioon. Nimeä testiversiot erottuvasti, jotta julkaiset tarkistamasi tiedoston.

Lisää testiversio sivustolle, tarkista avattu galleria ja puhelinnäkymä. Tallenna esiasetus vasta testin jälkeen. Pystykuvat tai pikkukuvat voivat tarvita eri rajat. Tarkista suunnitelma uudelleen asettelun vaihtuessa.

Käytä Pixiloa tarvittavaan lisäkäsittelyyn

Jos editorisi tuottaa oikeat mitat, muodon ja laadun yhdellä viennillä, aloita siitä. Pixilo auttaa, kun valmiiksi muodostettu kuva tarvitsee pienemmät mitat, uuden rajauksen tai pakkausvertailun.

Kuvanpakkaaja tekee kevyemmän kopion ja koonmuutostyökalu vähentää turhia pikseleitä. Koonmuutos hyväksyy JPG-, PNG- ja WebP-tiedostot, enintään 25 Mt kukin. Jos raja ylittyy, tee pienempi työkopio editorissa. RAW-käsittely, väriprofiilin muunnos ja vientiterävöitys kuuluvat niitä tukevaan ohjelmaan.

Vältä toistuvia JPG-vientejä. Useat muutokset on yleensä helpompi hallita ennen yhtä lopullista vientiä. Tee vertailut samasta valmistellusta lähteestä, älä pakkaa edellistä latausta uudelleen.

Tarkista metatiedot, nimet ja vesileimat

Tarkista GPS- ja henkilötiedot erikseen pakkauksesta; metatieto-opas auttaa. Jos lisäät näkyvän merkin vesileimatyökalulla, tarkista sijainti ruudukossa ja suurkuvassa. Älä anna sen viedä huomiota työstä. Vesileima ei estä kopiointia.

Selvitä, missä vaiheessa laatu muuttui

1. Tarkista muokattu lähde. Jos yksityiskohta puuttuu jo siitä, verkkoviennin asetukset eivät palauta sitä.
2. Tarkista vientitiedosto paikallisesti. Jos rakenne häviää tai syntyy haloja, käy mitat, pakkaus ja terävöitys läpi erikseen.
3. Tarkista gallerian toimittama tiedosto. Jos vienti on hyvä mutta sivu heikko, tutki valittu kuvaversio, rajaus ja näyttökoko. Suurkuvaksi venytetty pikkukuva vaatii eri korjauksen kuin liikaa pakattu vienti.

Muuta yhtä vaihetta kerrallaan. Galleria voi hidastua myös liian monesta yhtä aikaa ladattavasta suuresta tiedostosta. Testaa tuore sivulataus ja ensimmäinen avattu kuva, älä vain jo ladattujen kuvien välillä liikkumista.

Tarkista julkaistu galleria

• Pikkukuvien rajaukset ja avatut kuvat näyttävät tarkoitetun sommittelun.
• Tärkeä pintarakenne säilyy, eikä taivaassa tai tummissa kohdissa ole häiritseviä pakkausjälkiä.
• Näytetty tiedosto ei ole suurkuvaksi venytetty liian pieni pikkukuva.
• Värit ovat johdonmukaiset verrattaessa vientiä ja julkaisua samalla laitteella.
• Mobiilisivu latautuu sujuvasti ilman suurinta tiedostoa joka pikkukuvalle.
• Julkisissa tiedostoissa ja latauslinkeissä on vain jaettavaksi tarkoitetut versiot ja metatiedot.

Usein kysyttyä

Kannattaako käyttää aina parasta JPG-laatua?

Ei. Tiedosto voi kasvaa paljon ilman hyödyllistä eroa tarkoitetussa näyttökoossa. Testaa eri vientiasetuksia vaativilla kuvilla ja arvioi sekä ulkoasua että säästynyttä kokoa.

Pitääkö kaikkien kuvien olla samankokoisia?

Ei välttämättä. Yhtenäinen esitystapa ei vaadi kaikkien kuvien venyttämistä samaan muotoon. Päätä asettelun perusteella, missä yhtenäistä rajausta tarvitaan ja mitkä kuvat säilyttävät omat mittasuhteensa.

Voiko verkkoviennin toimittaa myös painoon?

Älä oleta niin. Paino- tai asiakastoimitus voi vaatia eri mitat, terävöityksen, värinkäsittelyn ja metatiedot. Tee toimitustiedosto muokkausalkuperäisestä toimitusvaatimusten mukaan.