𝔹𝕝𝕦𝕣𝕣𝕖𝕕 𝕀𝕞𝕒𝕘𝕖𝕤 𝔸𝕣𝕖 𝔼𝕧𝕖𝕣𝕪𝕨𝕙𝕖𝕣𝕖

Kuvien terävyydessä ei ollut Internetin alkuvuosina ongelmia, koska meidän ei tarvinnut näyttää verkkosivustoja mobiililaitteilla.

Nykyään mobiiliverkkosurffaus kasvaa valtavasti. Niin paljon, että tänä vuonna se on jopa ohittanut työasemien liikenteen.

Useimmat asiakkaat yrittävät luoda reagoivia rajapintoja verkkosivustoilleen, jotta niihin pääsee helposti mistä tahansa laitteesta. Eikä tunnu oudolta, että monet asettelukehittäjät ovat alkaneet käyttää

img {
    leveys: 100%;
    korkeus: auto;
}

heidän kuvilleen. Joten ne toimivat saumattomasti kaikkien selainikkunoiden tarkkuuksien suhteen, skaalaamalla vapaata tilaa.

Konseptuaalisesti kaikki näyttää hyvältä. Suunnittelijat luovat hienoja suuria kuvia, ja kehittäjät käyttävät niitä kuhunkin laitteeseen. Joissain tapauksissa kehittäjät luovat useita versioita samasta kuvasta, joten pienempi kuva ladataan mobiililaitteille ja isompi kuva työasemille.

Valitettavasti Chrome ei halua muuttaa kuvien kokoa samalla tavalla kuin hyvät kuvankäsittelyohjelmat tekevät. Sen sijaan se tuottaa kuvan niin, että terävyys ei ole sama tai samanlainen kuin alkuperäisessä kuvassa.

Pääsyy tähän voi olla suorituskyky. Kun verkkosivulla on paljon kuvia ja laiteprosessori ei ole kovin tuottava, lisäkuvankäsittely voi johtaa suurempiin viiveisiin sivujen renderoinnissa, joten Chrome jättää tämän prosessin olematta tärkeä asia loppukäyttäjille.

Esitän sinulle joitain esimerkkejä käyttämällä Chrome-selainta ja sitten muita selaimia. Tässä on kuva, jonka koko on pienennetty 1000 pikseliin Photoshopissa:

Sama kuva ladattu alkuperäisessä koossa ja selaimen pienentämä. Vertaa koiran silmien terävyyttä.

Photoshop:

selain:

Asiat pahenevat vieläkin, kun lisäät terävyyttä Photoshopissa pienentämisen jälkeen. Valokuvat ovat kuitenkin tässä tapauksessa anteeksiantavia, koska niissä ei yleensä ole paljon teräviä reunoja. .Png-kuvina tallennettujen vektorikuvien ongelmat ovat huomattavasti havaittavissa. Usein tapaus - verkkosivustojen logot.

Asanan logo, alkuperäinen tiedosto:

Koko muutettu Photoshopissa:

Renderoitu selaimessa:

Wecanin logo, alkuperäinen tiedosto:

Koko muutettu Photoshopissa:

Renderoitu selaimessa:

Ja pari muuta selaimen tarjoamaa logoa:

Löysin hauskeimmat epäselvyysvedokset UX-liittyviltä verkkosivustoilta. Smashingmagazine Jobs -osa, selaimessa:

Photoshopissa:

Nielsen Norman Group, Empathy Mapping -artikkeli, renderoitu kuvaaja:

Photoshop-koon muuttaminen:

Minun on myönnettävä, että tämä ongelma on vain Chrome. IE tekee paljon paremmaksi; on huomattava, että jotkut ohuet viivat pisteytetään, mikä sopii tekstille:

Firefoxilla on myös hyvä renderointi; tasoittaminen tekee tekstistä hieman vähemmän luettavissa kuin IE, mutta on parempi logoille:

Se, mitä kehittäjien pitäisi tehdä nyt, on ottaa webkit-automaattiterävä ominaisuus käyttöön:

img {
    kuvanmuodostus: -webkit-optimoi-kontrasti;
}

Tämän voimme saada, jos se otetaan käyttöön:

Joten ennen kuin maailman suosituin selain toteuttaa hyvän kuvan ottoalgoritmin, voimme käyttää webkit-optimoi-kontrasti -ominaisuutta, jonka avulla sivustomme vierailijat voivat nauttia valokuvistamme, havaita esineiden yksityiskohdat verkkokaupassamme ja arvostaa näyttökuvien ja kaavioiden luettavuus. Mutta ole varovainen, joissain tapauksissa se voi johtaa pikselöityihin tuloksiin.