Internetissä julkaistavan kuvan koko

Internetissä julkaistavan kuvan koko

kategoriassa Julkaiseminen, Kuvankäsittely | 0
Digitaalisen kuvan koko internetsivulla

Digitaalinen valokuva koostuu neliömäisistä kuvapisteistä eli pikseleistä (eng. pixels). Kun valokuvaa lähentää näytöllä suurennuslasityökalun avulla, pikselit tulevat näkyviin, koska niiden koko kasvaa riittävän suureksi. Näytöllä  tai painetussa julkaisussa pikseleiden määrä valitaan niin suureksi, että kuvan värisävyt vaihtuvat tasaisesti. Digitaalisessa muodossa olevan kuvan koko riippuu julkaisumediasta. Tietokoneen näytöt, älypuhelimien ja tablettien näytöt pystyvät näyttämään tietyn lukumäärän pikseleitä vaaka- ja pystysuunnassa. Ylimääräisistä pikseleistä koonmuutoskahvat_kuvan_koko_internetissaei ole mitään hyötyä. Artikkelin lopussa olevan koirakuvan koko on määritetty Photoshopissa 800 px levyiseksi. Koska tämä internet-sivusto on tehty WordPress-alustalla, sivusto on ns. responsiivinen eli sivuston sisältö, mukaan lukien kuvat, skaalautuu eli pienenee käytettävän laitteen näytölle sopivaksi. Sivuston responsiivisuutta voi testata helposti myös tietokoneella pienentämällä selainikkunan kokoa – kuvan leveys seuraa ikkuna leveyttä.

 

Havannoi responsiivisuus tietokoneella näin:

  1. Valitse ikkunan hallintapainikkeista keskimmäinen: Palauta pieneksi.
  2. Vedä hiirellä ikkunan reunasta kohdasta, jossa hiiren koonmuutososoitin tulee näkyviin.
  3. Mitä kapeammaksi vedät ikkunan kokoa, sitä kapeammaksi skaalautuu myös kuvan leveys.

 

Tietokoneen näytön resoluutio ja kuvan koko

Seilataan siis hyvillä vesillä, jos verkkosivusto on valmistettu responsiiviseksi eri laitteilla. Oman tietokoneen näytön resoluution voi tarkistaa hiiren kakkospainikkeella avautuvasta valikosta:

  1. Klikkaa hiiren kakkospainikkeella näyttökuvan päällä.
  2. Valitse valikosta hiiren ykköspainikkeella Näytön asetukset
  3. Kohdassa Tarkkuus näkyy oman tietokonenäyttösi nykyinen käytössä oleva resoluutio: esim. minulla se on 1920  x 1080 px.

Internetsivun sisältöalueen koko ei yleensä ole määritetty 100 %, koska sivustosta tulisi huonosti luettava rivien leveyden kasvaessa suhteettoman suureksi. Sivuston sisällön leveys määritetään lähdekoodissa tai tyylitiedostoissa, jotka ovat usein valmiiksi tehtyissä WordPress-teemoissa tiedostojen syövereissä hankalasti selvitettävissä. Käyttämäni teeman sisältöalueen leveys on n. 900 px eikä tätä suuremmat kuvat näy 900 px leveämpinä sisältöalueella isollakaan tietokonenäytöllä. Sen sijaan suurikokoiset kuvatiedostot lisäävät sivuston latautumisaikaa. Katso Ohjeita-sivulta, miten kuvan koko säädetään käytännössä kuvankäsittelyohjelmassa internetsivustolle sopivaksi.

 

Yleisimpien mobiililaitteiden näytön resoluutiot

iPad: 1024 x 768 (kuvasuhde 4:3)
iPad Retina: 2048 x 1536
iPhone 6: 1334 x 750 (kuvasuhde 16:9)
Samsung Galaxy S6: 1440 x 2560

 

Kuvan koko internetsivuilla