MacBook Pro (Retina) - Kuvien laatu!?

[Koomax]

Ostin juuri uuden MacBook Pro 15" Retina-näytöllä, sen tehokkaamman eli 2.6 GHz. Halusin nopeimman, tarkimman ja tehokkaimman koneen mitä markkinoilta irtoaa.

Mutta: Jokaisella nettsiviulla KAIKKI kuvat näyttävät epätarkoilta, paitsi Applen omilla sivuilla, hah. Grafiikka esim. teksti on tosi tarkkaa, mutta epätarkkuus ilmenee muuten kaikessa. Kun raahaan kuvan työpöydälle ja klikkaan sen auki, kuva avautuu tarkkana, mutta 5 kertaa pienempänä. Koneessa omat kuvakkeet ja muut ovat kyllä tietty tarkkoja, mutta netissä mikään ei enää ole. Suunnittelen itse nettisivuja, minulla on uusi iMac ja muita Applen tuotteita, joten kyllä tiedän mitä kuvat vähintään pitäisi olla.

Soitin Applen tukeen 2 kertaa ja olemme puineet asiaa jo monta tuntia. Tulee varmaan kiva lasku, kun ohjasivat minut jonnekkin jorpakon toiselle puolelle.. Noh, testasimme erilaisia säätöjä, mutta ei mitään muutosta. Sitten tämä kaveri vaan toteaa lopuksi, että näin niiden kuvien kuulukin olla, epätarkkoja. Että tämä on sinun käyttöösi vain väärä laite. Siis WTF? Ai Apple tekee suunnittelee ja valmistaa uudet koneet, joissa sitten kaikki kuvat ovat epätarkkoja ja suhrusia?

Tietääkö kukaan mistä ihmeestä on kyse? Onko vika tässä koneessa, vai omassa ajattelussa?

Menen kohta johonkin Applen myymälään katsomaan, miltä Retina-koneet siellä näyttää tai nimenomaan nettimaailma.

[Anniel]

Laitas linkkiä sivuihin joilla kuvat ovat suttuisia. Itse olen huomannut samaa vain sivuilla, joilla on käytetty onnettoman pieniä ja huonolaatuisia kuvia.

[Toby One]

Retinan ei pitäisi huonontaa kuvia, sillä neljä pikseliä vain näyttää saman, kuin mitä yksi pikseli vanhemmalla näytöllä. Neljän pikselin yhteiskoko on myös sama kuin yhden vanhemman näytön pikselin koko.

Edit,

Siis jos näyttöä ei ole skaalattu vakiosta poikkeavaan kokoon.

[Hunssi]

Ongelma voi hyvinkin olla nettisivussa tai selaimessa, jota käytät testiisi. Testaatko Safarilla vai jollain muulla? Esimerkiksi jos laitat OS X:n näyttöasetuksissa käyttöön "Paras Retina-näytölle" ja menet vaikka sivulle http://www.whatismyscreenresolution.com niin huomaat, että selain ilmoittaa näyttösi resoluutioksi 1440x900, vaikka todellisuudessa se on 2880x1800. Tuolla asetuksella siis työpöydän kohteet näyttää samankokoisilta kuin 1440x900 tarkkuudella, mutta kaikki on piirretty suuremmalla tarkkuudella. Riippuu selaimesta ja nettisivusta, että osaako se hyödyntää tätä suurempaa "DPI":tä.

[L_A_G]

Itse sanoisin että tässä kyllä taitaa nettiselaimen kuvien skaalaus kusta ja pahasti jolloin vika ei ole itse koneessa koneessa, vaan sen pyörittämässä softassa (ihan kuten tuo kuvien ongelmattomuus koneelle ladattuna ja preview:ssa katsottuna antaisi ymmärtää). Itse en yhtään ihmettelisi jos tässä olisi kyse juuri tästä sillä aika monilla ohjelmilla on ollut ongelmia koska retina-Pro:iden näytöt ovat tuoneet esille sen että kyseiset ohjelmat eivät skaalaudu hyvin korkeille resoluutioille.

Esimerkiksi Opera-verkkoselain, joka on jo aiemminkin saanut kilpailevien verkkoselainten faneilta paskaa niskaansa huonon kuvien skaalauksen takia, on todella huono tässä suhteessa.

[atheos]

Normaalilla tietokoneella 1000x1000 pikselin kuvalle on näytöllä 1000x1000 fyysistä pikseliä eli jokaista kuvan pikseliä kohden on yksi fyysinen pikseli. Retina-näytöllä pikseleitä onkin 2000x2000, mutta koska se kuva on edelleen 1000x1000 pikseliä, on se skaalattava tuplasti isommaksi, jotta se silti täyttää sille määritellyn tilan, sillä ymmärettävästi sivujen rakenne hajoaa täysin jos kuva näytettäisiin pienempänä.

Nettisivu täytyy siis erikseen koodata uusiksi ymmärtämään, että koneessa on retina-näyttö ja siten esittämään 1000x1000 pikselin kuvan sijasta se 2000x2000 pikselin kuva. Koko retina-näytön konsepti isossa koossahan on tullut vasta keväällä ja PC-puolella loistaa vielä poissaolollaan, joten siitä voi päätellä moniko nettisivu on koodattu ymmärtämään retina-näyttöjä.

[L_A_G]

Ei tuossa kyllä tarvita verkkosivujen uusimista, siinä tarvitaan verkkoselain joka osaa sakalata sisällön kunnolla... Yksi hiukan kömpelö metodi olisi ensiksi renderöidä (piirtää) sivu jollain resoluutiolla jonka kanssa ei tule tuollaisia ongelmia, vaikka 1920x1200 (joka on siis 1080p 16:10 aspektilla), ja sitten skaalata kuva retina-Pro:n näytölle.

[Koomax]

Mä en ihan hiffannut, että koneen pitäis näyttää sama näkymä paljon tarkempana ja kestää katsoa vielä paljon isompana, jos pikseleitä on tuplat. Niinkö..? Miten mä voin lisätä tänne kuvat, jotta voin antaa esimerkit näkymistä?

[Koomax]

Okei, tässä vertailussa kuvat: iMac 21", MacBook Pro vanha 15", ja MacBook Pro Retina 15". Nämä on Safarilla, mut sama näkymä Chromella.

Nimenomaan nuo logot ylhäällä + navigaatio on ihan erilaisia laadultaan. Retinalla ihan shaissee.

http://imageshack.us/f/844/kuvaimac.png/
http://imageshack.us/f/441/kuvamacbookvanha.png/
http://imageshack.us/f/443/kuvamacbookretina.png/

Kuvat ei vissiin näy heti, pitää klikata tota suurennuslasia.

[Toby One]

Mulle kuvat näyttää samanlaiselta ja fontit paremmalta retinalla. Kuvien osalta ymmärrettävää, koska kuvien resoluutio ei riitä retinalle, jotta ne näyttäisivät paremmalle retinalla.

Näetkö eroa noiden linkitettyjen kuvien välillä kaikilla koneilla katsoessasi?

Edit:
Nyt kun tarkemmin noita kuvia katsoin ja photarissa pyörittelin, niin näyttäisi tuo retinakuva pehmeämmältä (juurikin logojen osalta). Onkohan safarissa jokin ominaisuus, joka pehmentää pienen resoluution kuvia itsestään retinanäyttöä varten?

[Hunssi]

Tietääkö kukaan mistä ihmeestä on kyse? Onko vika tässä koneessa, vai omassa ajattelussa?

Minusta tuntuu, että vika taitaa olla tuossa sinun ajattelussa ja odotuksissa.

Jos nettisivulla on elementtinä 100x100 pikselin kuva, niin eihän siihen tule lisää tarkkuutta tai informaatiota sillä, että sinulla on korkearesoluutioinen näyttö. Jos kuva esitetään 1:1 koossa näytölläsi, kuva on pieni koska näytön pikselit on pieniä, ja jos se esitetään skaalattuna suuremmaksi, siihen tulee jonkinverran skaalauksesta johtuvia "virheitä".

Se, että Applen sivulla grafiikka näyttää hyvältä johtuu siitä, että sivusto tarjoaa kuvista eri versiot riippuen käyttämästäsi näyttöresoluutiosta.

Esim. tällä hetkellä Applen etusivulla on kuva valkoisesta iPad Ministä. Kun tallennan tuon kuvan levylle Macbook Airilla, kuvan nimi on hero.png ja sen resoluutio on 828x809 pikseliä. Kun avaan sivun Macbook Pro Retinalla, ja tallennan kuvan levylle, kuvan nimi on hero_2x.png ja sen koko on 1656x1618 pikseliä.

[Toby One]

...eihän siihen tule lisää tarkkuutta tai informaatiota sillä, että sinulla on korkearesoluutioinen näyttö...

Muttei sen kuvan silti pitäisi näyttää pehmeämmältä kuin vanhemmassa macbookissa; vaan tasan yhtä tarkalta.

[Hunssi]

...eihän siihen tule lisää tarkkuutta tai informaatiota sillä, että sinulla on korkearesoluutioinen näyttö...

Muttei sen kuvan silti pitäisi näyttää pehmeämmältä kuin vanhemmassa macbookissa; vaan tasan yhtä tarkalta.

Käytännössä se ei koskaan näytä tasan yhtä tarkalta. Jos ylöspäinskaalaus tehdään kokonaislukusuhteella, vaikka 2x, niin skaalauksen voi periatteessa tehdä yksinkertaisesti kopioimalla pikseliarvoja. Silloin kuva ei periaatteessa muutu, mutta ei myöskään aina näytä hyvältä. Käytännössä skaalaimet käyttävät aina jonkinlaista interpolointia, jossa pikseleiden väleihin lisättävät uudet pikselit lasketaan ympäröivien pikseleiden perusteella. Nopein ja yksinkertaisin tapa on lineaarinen interpolointi ja sillä on reunoja pehmentävä vaikutus.

Edit:

Siis se näyttäisi tasan yhtä tarkalta jos käytössä olisi retina-näytön natiivi resoluutio. Näin ei kuitenkaan oletuksena ole, vaan työpöytä käyttää tuplasti korkeampaa DPI:tä. Sen vuoksi kuvat joudutaan skaalaamaan ylöspäin.

[Toby One]

Nopein ja yksinkertaisin tapa on lineaarinen interpolointi ja sillä on reunoja pehmentävä vaikutus.

Edit:

Siis se näyttäisi tasan yhtä tarkalta jos käytössä olisi retina-näytön natiivi resoluutio. Näin ei kuitenkaan oletuksena ole, vaan työpöytä käyttää tuplasti korkeampaa DPI:tä. Sen vuoksi kuvat joudutaan skaalaamaan ylöspäin.

Ja käyttääkö myös safari lineaarista interpolointia kuvien pehmentelyyn? Luulisi että pikseliarvojen kopiointi olisi kuvien kannalta parempi.

[Hunssi]

Nopein ja yksinkertaisin tapa on lineaarinen interpolointi ja sillä on reunoja pehmentävä vaikutus.

Edit:

Siis se näyttäisi tasan yhtä tarkalta jos käytössä olisi retina-näytön natiivi resoluutio. Näin ei kuitenkaan oletuksena ole, vaan työpöytä käyttää tuplasti korkeampaa DPI:tä. Sen vuoksi kuvat joudutaan skaalaamaan ylöspäin.

Ja käyttääkö myös safari lineaarista interpolointia kuvien pehmentelyyn? Luulisi että pikseliarvojen kopiointi olisi kuvien kannalta parempi.

Arvelen että käyttää mutta en ole tutkinut asiaa sen tarkemmin.

Pikseliarvojen kopiointi voi tuntua äkkiseltään hyvältä idealta, mutta jos kuvassa on esimerkiksi diagonaalisia reunoja, jotka on muutenkin hankala esittää "pistematriisilla", niin niiden piirtäminen yhden pikselin kokoisten portaiden sijaan kahden pikselin kokoisilla portailla ei myöskään näytä hyvältä. Toinen asia on se, että minulla on käytössä skaalaus, jossa työpöytä vastaa kooltaan 1680x1050 työpöytää, jolloin skaalaus ei ole enää kokonaislukuskaalaus. Todennäköistä kuitenkin on, että käytetty algoritmi on sama skaalaussuhteesta riippumatta.

[Toby One]

Eli jos prioriteettina on valokuvien katselu selaimen kautta, voi olla fiksumpaa käyttää jotain muuta selainta kuin safaria? Vai skaalaavatko muutkin selaimet kuvia ylöspäin, vaikkeivat ymmärrä retinaa?

[Hunssi]

Eli jos prioriteettina on valokuvien katselu selaimen kautta, voi olla fiksumpaa käyttää jotain muuta selainta kuin safaria? Vai skaalaavatko muutkin selaimet kuvia ylöspäin, vaikkeivat ymmärrä retinaa?

Kyllä ja ei, riippuu miten nettisivu on tehty.

Yleensä jos html-koodissa on määritelty, että tähän kohtaan sivua tulee x*y pikselin kuva, niin img-urlin perästä löytyvä kuva on yleensä tuossa samassa x*y resoluutiossa, jotta selaimen ei tarvitse skaalata kuvaa. Skaalaamisen lisäksi se säästää palvelun käyttämää verkkokapasiteettia kun kuva ei ole tarpeettoman suuri.

Mutta jos kyseessä on kuvagalleria, jossa ladattava kuva on resoluutioltaan suurempi, kun sen näyttämiseen käytettävä alue, niin kuva näyttää retinassa todennäköisesti paremmalta. Tämä sen vuoksi, että kuvaa tarvitsee skaalata retinassa vähemmän alaspäin.

Edit: typo.

[atheos]

Niin, jos esim. kuva on oikeasti 2000x2000 pikseliä ja se pakotetaan skaalautumaan selaimessa pienemmäksi esim. img-tagin määreellä size="50%" niin retina-tietoinen selain vissiin tajuaa tämän ja osaa näyttää sen kuvan skaalaamatta mihinkään jolloin laatukin on paljon parempi.

Apple itse käyttää sivuillaan skriptiä joka tunnistaa koneen retina-statuksen ja sen mukaan lataa joko pienet tai isot kuvat koska aina isojen kuvien lataaminen yllä esittämälläni tavalla hidastaisi sivuston latautumista ei-retina-koneilla ja aiheuttaisi turhaa kuormitusta ja verkkoliikennettä.

Odotellaan... Tällä hetkellä ei nimittäin edes ole mitään standardia tapaa tehdä nettisivusta retina-tietoinen. Nämä jutut tulevat aina jäljessä kehitystä, koko isot retina-näytötkin (eli tablet-kokoiset ja isommat) ovat olleet pihalla vasta keväästä asti.