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

Nu am avut probleme cu claritatea imaginii în primii ani ai internetului, deoarece nu a fost nevoie să afișăm site-uri web pe dispozitive mobile.

Astăzi, observăm o creștere extraordinară în navigarea pe web mobil. Atât de mult încât, anul acesta, a depășit chiar și traficul pe desktop.

Majoritatea clienților încearcă să creeze interfețe responsive pentru site-urile lor web, astfel încât acestea să fie ușor accesibile din orice tip de dispozitiv. Și nu pare ciudat că mulți dezvoltatori de machete au început să folosească

img {
    latime: 100%;
    inaltime: auto;
}

pentru imaginile lor. Așadar, ele funcționează perfect pe orice rezoluție a ferestrei browserului, reducând spațiul disponibil.

Conceptual, totul arată bine. Designerii creează imagini mari frumoase, iar dezvoltatorii folosesc acele imagini pentru fiecare dispozitiv. În unele cazuri, dezvoltatorii creează mai multe versiuni ale aceleiași imagini, astfel încât o imagine mai mică este descărcată pentru ecranele mobile și o imagine mai mare pentru desktop.

Din păcate, Chrome nu dorește să redimensioneze imaginile așa cum fac editorii de imagine bune. În schimb, scoate în evidență imaginea cu aceeași claritate, sau similară cu imaginea inițială.

Motivul principal pentru aceasta poate fi performanța. Când o pagină web conține multe imagini și procesorul de dispozitiv nu este foarte productiv, procesarea suplimentară a imaginilor ar putea duce la întârzieri mai mari în redarea paginilor, astfel încât Chrome omite acest proces ca nefiind crucial pentru utilizatorii finali.

Vă voi arăta câteva exemple folosind browserul Chrome, apoi folosind alte browsere. Iată o imagine redusă la 1000 px în Photoshop:

Aceeași imagine încărcată în dimensiunea originală și redusă la scară de către browser. Comparați claritatea ochilor câinelui.

Photoshop:

Browser:

Lucrurile se agravează și atunci când adăugați claritate în Photoshop după reducerea dimensiunii. Dar, în acest caz, fotografiile sunt mai iertătoare, deoarece de obicei nu au multe margini ascuțite. Problemele cu ilustrații vectoriale salvate ca imagini .png sunt mult mai vizibile. Caz frecvent - logo-urile site-ului web.

Logo-ul Asana, fișierul inițial:

Redimensionat în Photoshop:

Redat în browser:

Logo-ul lui Wecan, fișierul inițial:

Redimensionat în Photoshop:

Redat în browser:

Și câteva sigle suplimentare prestate de browser:

Am găsit cele mai amuzante comparații de imagini încețoșate pe site-urile legate de UX. Secțiunea Joburi Smashingmagazine, în browser:

În Photoshop:

Nielsen Norman Group, articolul de cartografiere Empathy, grafic redat:

Utilizarea redimensionării Photoshop:

Trebuie să recunosc că această problemă este doar pentru Chrome. IE redă mult mai bine; se observă faptul că unele linii subțiri sunt pixelate, ceea ce este bine pentru text:

Firefox are și o redare bună; netezirea face ca textul să fie puțin mai ușor de citit decât în ​​IE, dar este mai bun pentru logo-uri:

Ceea ce ar trebui să facă dezvoltatorii chiar acum este să activați proprietatea de tăiere automată a webkit-ului:

img {
    redarea de imagini: -webkit-optimize-contrast;
}

Aceasta este ceea ce am primi dacă ar fi pornit:

Așadar, înainte ca cel mai popular browser din lume să implementeze un algoritm bun de eșantionare a imaginilor, putem folosi proprietatea webkit-optimize-contrast, care permite vizitatorilor site-urilor noastre să se bucure de fotografiile noastre, să discerne detaliile articolului în magazinul nostru online și să aprecieze lizibilitatea capturilor de ecran și diagramelor noastre. Dar fiți atenți, în unele cazuri poate duce la rezultate pixelate.