You are browsing the archive for Kuvankäsittely.

Retina-näytöt ja valokuvat webissä

25.1.2014 in Web-suunnittelu ja julkaisu by Panu Korpela

Parasta mahdollista palvelua käyttäjälle!

Jo nyt ja erityisesti lähitulevaisuudessa tämä tarkoittaa supertarkkojen retina-näyttöjen huomioimista valokuvien osalta. Miksi?

Mitä retina tarkoittikaan? CSS-pikseli?

Nykynäyttöjen fyysiset pikselit ovat aiempia näyttöjä paljon pienempiä, tyypillisesti luokkaa 300 pikseliä tuumalla (pixels per inch, PPI). Tällaisista näytöistä käytetty sana ”retina” on varsinaisesti Applen markkinointitermi, mutta vakiintuneempi puhekieleen kuin oikeampi termi ”high-PPI”.

Jos web-sivu näytettäisiin esimerkiksi Lumia 925 -älypuhelimella sen fyysisellä resoluutiolla 1280 &#x2715 768, olisi sisältö lukukelvottoman pientä. Tämän vuoksi laitteiden selaimet valehtelevat itselleen sivua näyttäessä ja toimivat kuin niissä olisi vähemmän pikseleitä. Tyypillistä on jakaa pikselilukumäärä puolellatoista tai kahdella; Lumian tapauksessa jakaja on 5/3 ja se ilmoittaa pikselikooksi 768 &#x2715 461. Näistä käytetään termiä ”CSS-pikseli”.

Ja ongelma oli?

Valokuvat näytetään oletusarvoisesti CSS-pikselikoon mukaisesti. Niiden käyttäjälle näkyvä fyysinen koko säilyy järkevänä, mutta näytön suurta tarkkuutta ei päästä hyödyntämään.

  1. Kuvat näyttäisivät siis tarkemmilta, jos retina-tarkkuus huomioidaan
  2. Retina-näytöllisen käyttäjän olisi mahdollista skaalata retina-kuvaa suuremmaksi kohtalainen tarkkuus säilyttäen; tämä on erityisen tärkeää mikäli kuva sisältää esimerkiksi tekstiä, graafisia käyriä tai muuta vastaavaa tietoa

Tarkempien kuvien käyttäminen vaatii suurta tarkkuutta ☺: toteuttajan tulee varmistua että päätelaite ei lataa sekä normaali- että retina-tarkkuuden kuvaa.

Ratkaisuvaihtoehtoja valokuville

A) Taustakuvat

Retina-taustakuvat on tuettu suoraan CSS-määrityksissä paremmin kuin tavalliset kuvat. Alla on esimerkki, joka osaa ottaa huomioon kaikki yleisimmät selaimet (esimerkissä kuvan X-siipi-korkea.jpg oikea koko on 1200 &#x2715 800 pikseliä):

@media only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 144dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2) {
  #retinaKuva {
    background-image: url('X-siipi-1200.jpg');
    width: 600px;
    height: 400px;
  }
}

Näillä näkymin CSS4 tuo mukanaan helpomman syntaksin image-set-attribuutin muodossa, mutta tukea tälle on vasta WebKit-selaimissa (-webkit-image-set), joten en käsittele aihetta tarkemmin.

Hankaluutena yllä olevassa taustakuvaratkaisuissa on kuvan staattinen koko, eli se ei osaa pienentyä selainikkunaa pienennettäessä. Tämä voidaan onneksi korjata CSS3:n background-size: contain; -säännöllä.

B) Tavalliset kuvat (img)

Kirjastoratkaisut

Sekä erilaisilla JavaScript-kirjastoilla (suuri määrä) että palvelinratkaisuilla on mahdollista vaihtaa kuvia lennosta. Näitä en käsittele artikkelissa tarkemmin.

srcset, src-n ja picture

HTML5-spesifikaatio on tuomassa ongelmaan omia ratkaisujaan, mutta kirjoitushetkellä tilanne on vielä vakiintumaton. WebKit-selainten nightly build tukee ehdotettua srcset-attribuuttia, eli eri tarkkuuden kuvia voidaan esittää seuraavasti:

<img alt="X-siipinen" src="X-siipi-640.jpg" srcset="X-siipi-1200.jpg 2x">

Sekä srcset-attribuutin että picture-elementin muutaman ilmaisuvoimaongelman vuoksi on tehty myös toinen attribuuttiehdotus, src-n. Tukea selaimissa ei toistaiseksi vielä ole.

Jos kuva ei ole valokuva?

Jos kuva ei ole valokuva, kannattaa ehdottomasti miettiä voisiko käyttää joko vektorimuotoista SVG-kuvaa tai ohjelmallista piirtoa canvas-elementillä.

Adobe Photoshop Elements 12 – uhka vai mahdollisuus?

8.10.2013 in Kuvankäsittely ja digikuvaus by Justus

Adobe julkaisi uuden Photoshop Elements-versionsa ja tällä kertaa on päästy versionumeroon 12. Mielenkiinnolla odotetaan, miten taikauskoisia Adobella ollaan, eli onko ensi vuonna (?) ilmestyvä versio 13, siirrytäänkö esim. vuosilukuversiointiin vai skipataanko suoraan numeroon 14.

Read the rest of this entry →

Creative Cloud on nyt päivittynyt- Uudet versiot ja CC työpöytäapplikaatio ladattavissa

18.6.2013 in Digimarkkinointi, Kuvankäsittely ja digikuvaus, Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Uutiset, Web-suunnittelu ja julkaisu, Yleinen by Juha Laamanen

Eilen suomen aikaa se nyt sitten tapahtui. Uudet CC versiot tutuista sovelluksista tulivat ladattavaksi osoitteessa creative.adobe.com/apps . Melko paljon sovelluksissa kaikkea uutta ja uusia applikaatioitakin erityisesti webbisuunnittelijoille tuli aika lailla. Yhteenvetoa uusista jutuista voi lukea vaikka täältä .

Aikaisemmat versiot (CS6) voi jättää rinnalle mikäli jostain syystä haluaa. CC versiot asennetaan kokonaan erikseen eikä päivityksenä vanhan päälle. Jatkossa ei enää ole versionumeroita vaan ohjelmistot saavat päivityksia sitä mukaa kun ne ovat julkaisukunnossa. Ohjelmiston asennukseen ja päivittämiseen on nyt myös ladattavissa erillinen applikaatio työpöydälle.

Creative Cloud App

Creative Cloud App

Read the rest of this entry →

Metatietojen lisääminen Adobe Bridgellä

27.9.2012 in Vinkit, Yleinen by Juha Laamanen

Adoben julkaisuohjelmien mukana tuleva Bridge on erittäin käyttökelpoinen työkalu tiedostojen metatietojen hallitsemiseen ja lukemiseen. Erityisen hyödyllistä metatietojen hallinta on kuvatiedostoja käsitteleville, mutta samoja periaatteita voidaan soveltaa muidenkin tiedostotyyppien yhteydessä.

Metatietoja voidaan hyödyntää tiedostonhallinnassa esimerkiksi hakujen tekemisessä ja Bridgen tiedostonäkymän suodattamisessa. Osa metatiedoista muodostuu käyttäjän kannalta automaattisesti kuten kameroiden kuvatiedostoihin tuottama EXIF -tieto (valotusarvot, optiikka ja kameratiedot, päivämäärä jne.). Osa tiedoista taas tuotetaan tiedostoihin käsin kuten hakusanat (keywords) ja IPTC-ydin (IPTC Core) tiedot. Hakusanat ovat tärkeä apuväline tiedostonhallinnassa esim. kuvapankeissa , IPTC tiedoissa taas tallennetaan tietoa tekijästä, projektista, kopiointi ja käyttöoikeuksista ja niiden haltijasta jne.

Read the rest of this entry →

Vinjetti Photoshopissa

26.8.2012 in Kuvankäsittely ja digikuvaus, Vinkit by Juha Laamanen

Jäsenemme Anna-Maija kyseli kiltamestareilta kuinka tehdään vinjetti Photoshopissa. Tapoja on toki useita mutta tässä nyt yksi, (versiolla CS5):

Read the rest of this entry →