Miksi kuva näyttää sumealta verkkosivulla?

Selvitä, missä vaiheessa kuva muuttuu sumeaksi

Verkkokuva kulkee usean vaiheen läpi: kuvaus tai suunnittelu, vienti, lataus palveluun, automaattinen käsittely ja näyttäminen. Selvitä, missä vaiheessa yksityiskohdat ensimmäisen kerran katoavat. Kaikkien asetusten muuttaminen kerralla vaikeuttaa syyn löytämistä.

Avaa alkuperäinen laitteellasi ja tarkastele sitä 100 prosentin zoomauksella. Avaa sitten täsmälleen se tiedosto, jonka latasit sivustolle. Tarkista lopuksi julkaistun sivun lataama kuva. Vertaa samaa yksityiskohtaa kaikissa kolmessa: silmää, tuote-etikettiä, ohutta viivaa tai sanaa. Pieni esikatselu voi peittää erot, kun taas voimakas suurennus näyttää pikselit hyvässäkin valokuvassa.

Jos alkuperäinen on epätarkka tai liikkeen sumentama, koon muuttaminen ja pakkaus eivät palauta kuvattua näkymää. Etsi terävämpi alkuperäinen tai ota kuva uudelleen. Jos vain ladattu kuvatiedosto on huono, korjaa tallennusasetukset ennen verkkosivun tutkimista.

Valitse tarkistus oireen perusteella

Tarkista sivun oikeasti lataama tiedosto

Suuren valokuvan lataaminen sivustolle ei takaa, että sivu näyttää sen. Sisällönhallintajärjestelmä voi luoda pikkukuvia ja useita välikokoja. Sivulohko tai teema voi pyytää yhtä pienistä kopioista, vaikka alkuperäinen olisi yhä mediakirjastossa.

Tutki julkaistua kuvaa selaimen kehittäjätyökaluilla. Etsi kuvan pyyntö Network- eli verkkopaneelista ja avaa tiedosto. Kirjaa sen pikselimitat ja vertaa niitä kuvan täyttämään tilaan sivulla. Pelkät alkuperäisen latauksen mitat eivät riitä tämän vaiheen selvittämiseen.

Esimerkiksi 300 pikseliä leveää pikkukuvaa suurennetaan, jos se täyttää 900 pikselin artikkelipalstan. Täysikokoisen alkuperäisen valitseminen voisi korjata sumeuden mutta toimittaa tarpeettoman suuren tiedoston. Sopiva välikoko on parempi vertailukohta. Tarkista valittu kuvakoko editorista tai sivupohjasta pikkukuvan uudelleenpakkaamisen sijaan.

Jos sivu tarjoaa useita kuvalähteitä, valittu osoite voi vaihtua näyttötilan mukaan. Tarkista puhelin ja tietokone. Responsiivisten kuvien opas käsittelee toteutusta; MDN:n responsiivisten kuvien ohje selittää lähteen valintaa ja näyttöjen pikselitiheyttä.

Valitse riittävästi pikseleitä todelliseen käyttöpaikkaan

Kuvan pikselit ja sivun näyttöleveys ovat eri mittauksia. Voit kokeilla 600 CSS-pikselin levyisessä paikassa 600 ja 1200 pikselin levyisiä valokuvakopioita. Vertaa niitä sivustollesi tärkeillä näytöillä, myös tiheäpikselisellä puhelimella. Suurempi versio voi näyttää enemmän yksityiskohtia, mutta tarkista senkin tiedostokoko. Nämä ovat kokeiltavia vaihtoehtoja, eivät yleispätevä tarkkuusvaatimus.

Tee kopio riittävän suuresta alkuperäisestä koonmuutostyökalulla. Pidä mittasuhteet lukittuina. 300 pikselin lähtökuvan suurentaminen 1200 pikseliin kasvattaa pikseliruudukkoa, mutta ei luo puuttuvaa valokuvan yksityiskohtaa. Käyttöpaikkakohtaisia esimerkkejä on oppaassa verkkosivujen sopivat kuvakoot.

Myös rajaus vähentää käytettävissä olevia pikseleitä. Jos kasvot ovat vain pieni osa laajaa valokuvaa, tiukka rajaus niiden ympärille voi jättää liian vähän yksityiskohtia suureen muotokuvaan. Tarkista rajatun tiedoston mitat ennen lopullisen vientikoon valintaa.

Tarkista pakkaus ja pieni teksti erikseen

Palikoituneet liukuvärit, suttaantunut pintakuvio ja kirjainten ympärillä näkyvät häiriöt voivat kertoa liian voimakkaasta häviöllisestä pakkauksesta. Palaa parhaaseen lähtökuvaan ja vertaa kevyemmin pakattua kopiota samoilla mitoilla. Vaurioituneen JPG:n tallentaminen PNG:ksi säilyttää vauriot eikä kumoa aiemman pakkauksen aiheuttamia muutoksia.

Lue kuvakaappauksen tai kaavion pienin tärkeä teksti aiotussa näyttökoossa. Vertaa PNG-versiota nykyiseen tallennettuun kuvaan sen sijaan, että käyttäisit automaattisesti valokuvalle sopivaa kuvamuotoa. JPG–PNG-opas auttaa valinnassa. Liian pieni teksti voi vaatia grafiikan uudelleensuunnittelua korkeamman laatuasetuksen sijaan.

Älä syötä häviöllistä ladattua kopiota jatkuvasti seuraavaan muuntimeen kokeilujen aikana. Säilytä alkuperäisestä tehdyt vaihtoehdot erillisinä ja nimeä ne mittojen ja kuvamuodon mukaan. Näin vertaat vaihtoehtoja etkä kertyneiden muutosten ketjua.

100 %:n katselukoko tarkoittaa tässä kuvan todellista pikselikokoa kuvankatseluohjelmassa: yksi kuvan pikseli näkyy yhtenä näytön pikselinä. Selaimen sivun zoomaus on eri asetus.

Esimerkki: terävä tiedosto näkyy artikkelissa sumeana

Oletetaan, että 2400 × 1600 valokuvasi on terävä paikallisesti mutta sumea 600 pikselin artikkelilohkossa. Julkaistu sivu lataa 300 × 200 pikkukuvan. Tämä on havainnollistava vianetsintäesimerkki, ei tietyn sivuston mitattu tulos.

1. Säilytä alkuperäinen ja varmista, että sivu todella käyttää pikkukuvaa.
2. Muuta lohkon kuvavalintaa tai sivupohjaa pyytämään sopivaa suurempaa versiota.
3. Vertaa 600 × 400 ja 1200 × 800 vaihtoehtoja samalla näyttöleveydellä.
4. Tarkista tulos puhelimella ja tietokoneella sekä vertaa selaimen lataamien tiedostojen kokoja.
5. Säilytä pienin vaihtoehto, joka näyttää lukijoille tärkeät yksityiskohdat.

Ratkaiseva korjaus on sopivan kuvaversion valinta. 300 pikselin pikkukuvan pakkaaminen ei tuota puuttuvia yksityiskohtia. Jos sivu näyttää yhä aiemman version, tarkista pyydetty osoite ja päivitä tarvittava välimuisti ennen uutta vientiä.

Usein kysytyt kysymykset

Terävöittääkö DPI-arvon muuttaminen verkkokuvaa?

Pelkkä tarkkuusmerkinnän muutos ei lisää pikseleitä. Tarkista pikselimitat, näyttökoko ja selaimen lataama kuvaversio. DPI-, PPI- ja pikseliopas selittää eron.

Korjaako WebP:hen vaihtaminen sumeuden?

Formaatin vaihto ei palauta lähtökuvasta kadonneita yksityiskohtia. Aloita terävästä alkuperäisestä ja vertaa vientien selkeyttä ja tiedostokokoa.

Miksi kuva näyttää hyvältä mediakirjastossa?

Kirjasto ja sivu voivat näyttää eri versiot eri kokoisina. Vertaa julkaistun sivun pyytämää tiedostoa tarkistamaasi esikatseluun.