Kuvan tallentaminen nettikäyttöön

Ellis photoshoppaa, osa 6: Kuvan tallentaminen nettikäyttöön

Kuvien koko, kuvien vaatima tila ja kuvien lataus hitaammilla nettiyhteyksillä on herättänyt jonkin verran keskustelua. Kuvien tallennusmuodot ja -tavat vaikuttavat tähän oleellisen paljon, eikä nettikäyttöön tulevia kuvia kannatakaan turhaan pitää kovin suurikokoisina. Vaikka kuvasta haluaisikin suuremman version (esim. askartelutöiden yksityiskohtien tarkastelua varten), ei senkään ole tarpeen olla jättimäinen.



Kuvaan tehtävät säädöt kannattaa tehdä originaalikoossa. Kun kuva on käsitelty, pienennä se vasta tämän jälkeen.

Image > Image size


(Kuva ohjelmasta Adobe Photoshop CS5)

Nettiin tulevien kuvien resoluutioksi riittää 72, joten kuvakokoa on turha kasvattaa tätä suuremmalla resoluutiolla. Kun kuva on pienennetty sopivaan kokoon, se kannattaa vielä pakata tallennettaessa. Kannattaa muistaa myös se, että kuvan fyysiset mitat eivät ole ainoita kuvan tiedostokokoon vaikuttavia asioita. Mitä värikkäämpi ja yksityiskohtaisempi kuva, sitä suurempi tiedostokokokin on.



Tarkista, että kohdat "Constrain Proportions" ja "Resample Image" ovat ruksattuina. Muuta tämän jälkeen resoluutioksi 72 pixels/inch (ei siis pixels/cm!), ellei resoluutio ole tämä jo valmiiksi. Pienennä kuva tämän jälkeen sopivaan kokoon. Oikea koko riippuu monista seikoista, mutta blogikäytössä kuvan kooksi riittää useimmiten n. 300-600 pikselin levyinen kuva. Korkeus muuttuu automaattisesti ja kuvan suhteet säilyvät, mikäli "Constrain Proportions" -kohta on ruksattuna.


Mimimoi tiedostokoko tallennettaessa

Kun kuva on pienennetty, tallenna se "Save for Web" -toiminnolla:

File > Save for Web and Devices



Kun kuvia tallentaa nettiin, ne kannattaa tallentaa aina tällä toiminnolla, ei pelkästään uudella nimellä ja uudeksi versioksi jpeg-kuvasta. Tämä on eri asia kuin jpeg-tallennusten yhteydessä käytettävä kuvien pakkausaste (Photoshopissa maximum-arvo on 12). Tämä tapa säästää tiedostokokoa huomattavasti, eikä kuvagalleriat täytyy turhaan ja kuvien lataaminen hitaammillakin yhteyksillä sujuu paremmin.



Valitse ylhäältä jpeg-muoto (yksinkertaiset kuvat saattavat sopia myös gif-muotoon tallennettaviksi). Säädä tämän jälkeen pakkausastetta joko äskeisen toiminnon alla olevasta liukusäätimestä tai syötä arvo suoraan "Quality" -kenttään.

Näet pakkausasteen vaikutuksen esikatselukuvassa, voit valita ylhäällä näkyvistä välilehdistä "2-Up" -vaihtoehdon ja näet samaan aikaan alkuperäisen ja tallennettavan kuvan. Oma havaintoni on, että joitakin kuvia kärsii pakata jopa arvoilla 50-60, jotkut kuvat vaativat n. 70-80. Harvoin tallennan nettikäyttöön mitään yli 90 arvoilla ja sekin on usein jo liikaa.



Ikkunan alaosassa on mahdollista muuttaa vielä kuvakokoa, mutta esimerkiksi kuvien sharppauksen (terävöittämisen) jälkeen tätä ei kannata enää tässä vaiheessa tehdä. Muussa tapauksessa voit kokeilla oikaista kuvan käsittelyn jälkeen suoraan tähän vaiheeseen käyttämättä "Image size" -toimintoa.

Vertailun vuoksi tiedostokokojen erot oheista kuvaa tallennettaessa 550 x 367 kokoisena.

Ns. perinteinen jpeg-tallennus ja pakkaus:

Pakkausaste maximum (12), tiedostokoko 290 kt.
Pakkausaste high (9), tiedostokoko 107 kt.
Pakkausaste medium (7), tiedostokoko 72 kt.
Pakkausaste low (4), tiedostokoko 55 kt.

Alle high-tason mentäessä kuvanlaatu alkaa kärsiä aika paljon, enkä ainakaan itse tallenna tätä tapaa käyttäessäni juuri koskaan alle 10-11 tason. Mitä värikkäämpi kuva ja mitä enemmän kirkkaita ja yhtenäisiä väripintoja, sitä suuremmalla pakkausasteella kuva on tallennettava.

Jos taas käytetään "Save for Web" -toimintoa, tiedostokoot pienentyvät huomattavasti:

Pakkausaste 100, tiedostokoko 140 kt.
Pakkausaste 90, tiedostokoko 94 kt.
Pakkausaste 70, tiedostokoko 45 kt.
Pakkausaste 50, tiedostokoko 25 kt.

Pakkausasteet eivät ole sellaisenaan vertailukelpoisia. Yleensä jälkimmäisellä pakkaustavalla saa aikaan tiedostokooltaan vähintään puolet pienempiä kuvia, joissakin tapauksissa ero voi olla jopa kolmin- tai nelinkertainen.

Tämä tallennustapa kannattaisi opetella paitsi oman kuvatilan vuoksi, myös helpottamaan blogien selaamista ja kuvien latautumista.

Kaikki "Ellis photoshoppaa" -kirjoitukset löydät kätevästi samasta paikasta.

Nelsson kirjoitti 12.02.2011 - 11:43
Ja jotkut jutut (ei valokuvat) kannattaa tallentaa png-muotoon, mutta harvemmin sitä tulee käytettyä. Etenkin blogin ulkoasua vääntäessä tykkään siitä kun se mahdollistaa läpinäkyvyydet.

Mä niiiin tykkää näistä photarivinkeistä :) Monta asiaa oli jo unohtunut.
Ellis kirjoitti 12.02.2011 - 12:51
Png-kuvat toki mahdollistaa läpinäkyvyyden ja itsekin tykkäisin käyttää niitä enemmän, mutta ne ovat kyllä kaikkea muuta kuin käyttäjäystävällisiä jos ajattelee tiedostokokoa ja hitaampaa latautumista. MUR.

Ja on kyllä kaksi ihan eri asiaa tallentaa kuvia nettiin ja muuhun käyttöön, joten tämä nyt olikin lähinnä sellainen seikka, mitä ehkä (en tiedä?) monet bloggaajat ei ehkä edes ajattele? Siis sitä, että miten sen kuvan tallentaa? Toivottavasti auttaa!

Sellainen on ihan tosi kiva fiilis kun kokee sellaisen "ai niin joo" -tunteen! :)
lehtipollo kirjoitti 12.02.2011 - 14:08
Tosi kiva kun olet laitellut näitä vinkkejä! Onko jokin erityinen syy siihen, miksi pienennät kuvan ennen save for web -toiminnon käyttöä etkä pienennä sitä toiminnossa itsessään?
Ellis kirjoitti 12.02.2011 - 14:18
Tämä oli oikeastaan tosi hyvä kysymys, sillä joku muukin saattoi miettiä miksi ihmeessä ei sitten voisi suoraa oikaista tähän kohtaan. Mutta tässä syy.

Pienennän kuvat oikeaan kokoon ennen tallennusvaihetta siksi, että lähes aina terävöitän niitä hieman ennen tallennusta. Terävöitys on hyvä tehdä vasta kun kuva on oikean kokoinen, jotta siitä olisi jotakin hyötyä ja ettei se huononna lopputulosta.

Itse tallennan kuvat suoraan siihen kokoon missä ne ovat blogissa, joten terävöitys myös näkyy niissä, toisin kuin pikkukuvissa (esim. blogger) jotka sitten aukeavat suuremmiksi. Nelsson taisi jotakin kommentoida bloggerin pakkaamisesta kuvien suhteen, että en tiedä olisiko terävöityksestä edes hyötyä esim. bloggerissa.
Creomi kirjoitti 13.02.2011 - 10:48
Kiitos Ellis kokoamistasi Photoshop vinkeistä ja toivottavasti niitä tulee jatkossa paljon lisää :)
Riikka kirjoitti 14.02.2011 - 09:14
Kokeilempa heti kun tulee uusia kuvia ladattua :) Siis tuota "Save for Web"
Eija kirjoitti 26.04.2011 - 19:32
Tervehdys!
Kerrohan mistä johtuu, että kuvat näkyvät toisilla koneilla tummempina kuin toisilla. Kotikoneellani kuva näyttää sopivan valoisalta, mutta esim. työkoneessani katsottuna se on tosi tumma.
Mitä pitäisi tehdä ja missä kohtaa photoshoppia? Olen siis tietysti aivan aloittelija näissä jutuissa..
Ellis kirjoitti 26.04.2011 - 19:55
Heippa Eija!

Tuohon mainitsemaasi ongelmaan ei auta Photoshop. Syy on näytön asetuksissa, toinen näyttö on todennäköisesti säädetty kirkkaammaksi ja suurempikontrastiseksi, tai vastaavasti toinen tummemmaksi. Toinen näyttö lienee myös vanhempi ja "tehottomampi".

Kannattaa tutustua oman näytön säätöihin ja testailla hieman. Näytön kalibrointi olisi myös hyvä tehdä, vaikkapa jonkun toisen avustamana jos mahdollista. Näin värisävyt näyttävät mahdollisimman oikeilta. Kun tietää oman näytön olevan kunnossa, on värien säätäminen paljon helpompaa. Nythän et oikeastaan tiedä, että onko "vika" omassa vai työkoneessa.

Ensiavuksi suosittelen kirkkauden ja kontrastin säätöä, erillisessä monitorissa säädöt ovat yleensä jossakin monitorin alalaidassa, läppäristä säädöt löytyvät ohjauspaneeli-toiminnon takaa.

Toivottavasti tästä oli edes jotakin apua, vaikka itse säätäminen jääkin sinulle! :)
Nimesi
Sähköpostiosoitteesi (ei näytetä yleisesti)
Kotisivusi osoite
Muista tietoni selaimen evästeessä seuraavia kommentointeja varten
Seuraa tähän kirjoitukseen tulevia kommentteja (mikä tämä on?)
Kommentti
Voit käyttää kommenteissasi seuraavia HTML-elementtejä: a, b, i, u, code