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

Vi havde ikke problemer med billedskarphed i de første år af internettet, fordi vi ikke havde brug for at vise websteder på mobile enheder.

I dag ser vi en enorm vækst i mobile websurfing. Så meget, at det i år endda har overhalet trafikken på desktops.

De fleste kunder forsøger at oprette lydhøre grænseflader til deres websteder, så de er let tilgængelige fra alle slags enheder. Og det ser ikke ud til, at mange layoutudviklere er begyndt at bruge

img {
    bredde: 100%;
    højde: auto;
}

for deres billeder. Så de fungerer problemfrit på tværs af enhver browservindueopløsning og skalerer til det ledige rum.

Konceptuelt ser alt godt ud. Designere opretter dejlige store billeder, og udviklere bruger disse billeder til enhver enhed. I nogle tilfælde opretter udviklere flere versioner af det samme billede, så et mindre billede downloades til mobilskærme og et større billede til desktops.

Desværre ønsker Chrome ikke at ændre størrelsen på billederne, som de gode billedredaktører gør. I stedet for udsætter det billedet med ikke den samme eller lignende skarphed som det oprindelige billede.

Hovedårsagen til dette kan være ydelse. Når en webside har mange billeder, og enhedsprocessoren ikke er meget produktiv, kan yderligere billedbehandling føre til større forsinkelser i gengivelse af sider, så Chrome udelader denne proces som ikke af afgørende betydning for slutbrugerne.

Jeg vil vise dig nogle eksempler ved hjælp af Chrome-browser og derefter ved hjælp af andre browsere. Her er et billede, nedskåret til 1000 px i Photoshop:

Det samme billede uploadet i original størrelse og nedskaleret af browseren. Sammenlign skarpheden i hundens øjne.

Photoshop:

Browser:

Ting bliver endnu værre, når du tilføjer skarphed i Photoshop efter reduktion. Men fotos er mere tilgivende i dette tilfælde, da de typisk ikke har mange skarpe kanter. Problemer med alle vektorillustrationer, der er gemt som .png-billeder, er meget mere synlige. Hyppige tilfælde - webstedets logoer.

Asanas logo, startfil:

Ændret størrelse i Photoshop:

Gengivet i browser:

Wecans logo, startfil:

Ændret størrelse i Photoshop:

Gengivet i browser:

Og et par ekstra browser-gengivne logoer:

Jeg fandt den mest morsomme sammenligning af uskarpe billeder på UX-relaterede websteder. Smashingmagazine Jobs sektion i browser:

I Photoshop:

Nielsen Norman Group, Empathy Mapping-artikel, gengivet graf:

Brug af Photoshop-størrelse

Jeg må indrømme, at dette problem kun er Chrome. IE gør meget bedre; det bemærkes, at nogle tynde linier er pixelerede, hvilket er fint til tekst:

Firefox har også god gengivelse; udjævning gør tekst lidt mindre læsbar end i IE, men er bedre til logoer:

Hvad udviklere skal gøre lige nu, er at aktivere websit auto-skærpningsejendom:

img {
    billede-gengivelse: -webkit-optimer-kontrast;
}

Dette er, hvad vi ville få, hvis det blev tændt:

Så før den mest populære browser i verden implementerer en god billedned-sampling-algoritme, kan vi bruge webkit-optimize-contrast-egenskab, som giver besøgende på vores websteder mulighed for at nyde vores fotos, se genstandsdetaljer i vores online shop og sætte pris på læsbarhed af vores skærmbilleder og diagrammer. Men vær forsigtig, i nogle tilfælde kan det føre til pixelerede resultater.