Kuvat verkkoa varten

jpeg laatu pakkauksen myötä

JPEG-laatu ei ole prosenttiosuus

Usein näkee väitettävän että JPEG-laatu kuvaa tallentaessa on prosenttiosuus. Tämä ei ole totta. Pikemminkin se on liukusäädin jolla määrittelet pakkauslaadun eikä arvojen tarvitse edes olla 1-100. Katso viereinen taulukko paljonko säästät pakkaamalla kuvaa lisää.

Jos olet käyttänyt Photoshopia, niin tiedät että PS käyttää jopa kahta eri asteikkoa: toinen on 1–12 ja toinen on 1–100. Tätä 1-100 asteikkoa käyttävät mm. WordPress (GD:n, Imagickin tai GMagickin kautta) sekä useimmat muut JPG-kompressorit. Lisäksi eri ohjelmistot käyttävät usein erilaisia ​​algoritmeja pakkaamiseen. Tämä tarkoittaa myös sitä, että on mahdotonta tietää JPEG-kuvan laatutasoa, ellet tiedä mikä ohjelmisto sen tallensi.

Tyypillisesti laatu 70–90 (8-9, 12 asteikon skaalassa) on riittävä verkkoa ajatellen, ja arvo 82 jota WordPress käyttää, on reilusti hyväksytyn laadunmenetyksen rajojen sisällä. Tämä perustuu Radwaren vuonna 2014 julkaisemaan tutkimukseen, jossa he määrittelivät, kuinka paljon voit pakata/pienentää kuvaa, jotta käyttäjät/vierailijat edelleen pitäisivät kuvaa hyvänlaatuisena.

Laatu 100 ei ole häviötön

Jos asetat Jpeg-laadun 100 tai Photoshopissa 12 niin se ei estä pakkaamista. Jpeg on aina häviöllinen pakkausmuoto. Png ja WebP sen sijaan voidaan tallentaa menettämättä laatua. Joka kerta kun tallennat JPEG-tiedoston, menetät pikseleitä, vaikka tallennat parhaalla mahdollisella laadulla.

Save for web

Jos tallennat kuvat Photoshopista Save For Web asetuksella, Photoshop riisuu kuvasta kaikki ylimääräinen info kuten exif tiedostot (teksti) ja siten kuvakoko pienenee merkittävästi vaikka laatu silmämääräisesti pysyy.

WordPress ei muokkaa alkuperäistä kuvaa

Jos käytät WordPress 5.3+ -versiota, se muuttaa alkuperäisen koon 2560 pikseliin, ja oletuslaatu on 82 pakkausasteikolla. WordPress ja käytetty teema luovat useita eri kokoja samasta kuvasta valmiiksi.

Katso tästä lisäinfoa verkkokuvien optimointiin >>

Vihjeitä kuinka käyttää kuvia verkossa

  • Tutustu WebP kuvaformaattiin. Se on suhteellisen uusi Google kehittämä kuvan pakkausmuoto, jonka tuloksena kuvat ovat 25–34 prosenttia pienemmät kuin niiden JPEG-vastine.
  • Käytä progressiivista pakkausmuotoa kuviin pienemmän tiedostokoon takia. Lataus jonkin verran nopeampi.
  • Pakkaa kuvia. Saatavana on valtava määrä kuvanpakkaustyökaluja, myös sellaisia, joiden avulla voit pakata kaikki kuvasi samanaikaisesti. Googlehaku auttaa, esim. Image Optimization hakusana.
  • Spriting. Tämä on CSS-tekniikka kuvien yhdistämiseksi yhdeksi tiedostoksi, mikä vähentää palvelinhakujen määrää ja nopeuttaa renderöintiaikaa.
  • Varmista, että kuvat ovat oikeassa muodossa. JPEG-muodossa tallennettu kuva, jonka pitäisi olla GIF- tai PNG-logotiedosto, voi olla useita kertoja suurempi kuin tarpeellista.
  • Varmista, että tarjoat kuviasi sivuilla siinä järjestyksessä kuin niiden tulee näkyä. Aivan liian usein näkee sivuja, joissa pääkuva latautuu viimeisenä eikä niin kuin pitäisi, ensimmäisenä.

Näyttöjen DPI/PPI luku

Lähes kaikki työpöytänäytöt ja uusimmat kannettavien näytöt ovat välillä 95-110 DPI; näille laitteille ei vaadita skaalausta, ja Windows asettaa asteikkokertoimen 100%.

Premium-kannettavien ja tablet-laitteiden markkinoilla on kuitenkin joukko uusia laitteita, joiden näytöt ovat yli 200 DPI.

Kun muutat näyttöjen DPI-skaalaustasoa, se muuttaa tekstin, sovellusten ja muiden kohteiden kokoa suuremmaksi tai pienemmäksi. Korkeammalla DPI-tasolla kaikki näyttää suuremmalta ja matalammalla DPI-tasolla kaikki näyttää pienemmältä.

Windowsin oletus DPI-taso on 100%:na (96 DPI).

Älä koskaan säädä näytön DPI tasoa ellet tiedä tarkkaan mitä teet. Jos haluat zoomata verkkosivuilla tai aukiolevassa dokumentissa olevan tekstin suuremmaksi, käytä Windowsissa Ctrl ja + (plussa), jos haluat palauttaa näytön koon ennalleen paina yhtä monta kertaa Ctrl – (miinus) kun zoomatessa näyttöä.

Mac laitteiden alkuperäinen DPI tarkkuus oli 72, ja siitä on lähtenyt tämä virheellinen käsitys että 72 DPI:llä olis merkitystä kun käytät kuvia verkossa. Verkossa kuvan laatua/kokoa määrää vain pikselileveys x pikselikorkeus. DPI:llä ei siis ole merkitystä. Windowslaitteiden vastaava näytön tarkkuushan on eri, 96 DPI:tä.

Näytöissä on siis omat DPI arvonsa (tarkkuus) ja esim. iPhone ilman Retinaa voi olla esim.320 DPI:tä ja Retina näytöllä esim. 640 DPI:tä. Myös kaikilla nykyisillä pöytäkonenäytöillä on omat DPI arvot.

Periaate on siis se, että et voi vaikuttaa kuvan laatuun säätämällä DPI arvoa verkkokuvissa, ainoastaan painotöissä. Vaikka näytöillä on suuri resoluutio kuva interpoloidaan näytölle sopivaksi, eli lisätään pikseleitä jotta resoluutio täyttyy.

Kaikki oikeudet pidätetään - Valokuvakurssi.fi I Webmaster Svenna Martens
error: Sisältö on suojattu!