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

Interneti algusaastatel ei olnud meil pildi teravusega probleeme, sest me ei pidanud mobiilsideseadmetes veebisaite näitama.

Täna näeme mobiilse veebis surfamise tohutut kasvu. Nii palju, et sel aastal on see isegi lauaarvutite liikluse ületanud.

Enamik kliente proovib oma veebisaitidele reageerivaid liideseid luua, et neile oleks hõlpsasti juurde pääseda mis tahes seadmest. Ja ei tundu kummaline, et paljud küljenduse arendajad on hakanud seda kasutama

img {
    laius: 100%;
    kõrgus: auto;
}

nende piltide jaoks. Nii töötavad need sujuvalt kõigi brauseriakna eraldusvõimete piires, laiendades olemasolevat ruumi.

Kontseptuaalselt näeb kõik hea välja. Disainerid loovad toredaid suuri pilte ja arendajad kasutavad neid pilte iga seadme jaoks. Mõnel juhul loovad arendajad samast pildist mitu versiooni, nii et mobiiliekraanide jaoks laaditakse alla väiksem pilt ja lauaarvutite jaoks suurem pilt.

Kahjuks ei soovi Chrome piltide suurust muuta nii, nagu teevad head pildiredaktorid. Selle asemel paneb see pildi välja mitte sama või sarnase teravusega kui algne pilt.

Selle peamiseks põhjuseks võib olla jõudlus. Kui veebilehel on palju pilte ja seadme protsessor pole eriti produktiivne, võib täiendav pilditöötlus põhjustada suuremat viivitust lehe renderdamisel, nii et Chrome jätab selle protsessi tegemata, kuna see pole lõppkasutajate jaoks ülitähtis.

Ma näitan teile mõnda näidet, kasutades Chrome'i brauserit ja seejärel teisi brausereid. Siin on pilt, mille suuruseks on Photoshopis vähendatud 1000 pikslit:

Sama pilt laaditi üles originaalsuuruses ja brauseri poolt vähendatud. Võrrelge koera silmade teravust.

Photoshop:

Brauser:

Asjad muutuvad veelgi hullemaks, kui lisate Photoshobis teravuse pärast vähendamist. Kuid fotod on sel juhul andestavamad, kuna tavaliselt pole neil palju teravaid servi. .Png-piltidena salvestatud vektor illustratsioonide probleemid on palju märgatavamad. Sage juhtum - veebisaidi logod.

Asana logo, algfail:

Photoshopis on muudetud suurust:

Renderdatud brauseris:

Wecani logo, algfail:

Photoshopis on muudetud suurust:

Renderdatud brauseris:

Ja veel paar brauseriga muudetud logot:

Leidsin UX-iga seotud veebisaitidelt kõige lõbusamad uduste piltide võrdlused. Jaotis Smashingmagazine Jobs, brauseris:

Photoshopis:

Nielsen Norman Group, empaatia kaardistamise artikkel, muudetud graafik:

Photoshopi suuruse muutmine

Pean tunnistama, et see probleem on ainult Chrome'i jaoks. IE muudab palju paremaks; on märgatav, et mõned õhukesed jooned on pikseldatud, mis sobib tekstiga:

Ka Firefoxil on hea renderdus; silumine muudab teksti pisut vähem loetavaks kui IE, kuid on parem logode puhul:

Mida peaksid arendajad kohe tegema, on sisse lülitada veebikomplekti automaatne teravdamine:

img {
    pildi renderdamine: -webkit-optimeeri-kontrastsus;
}

Selle saaksime sisse lülitades:

Niisiis, enne kui maailma populaarseim brauser rakendab hea pildi allapoole võtmise algoritmi, saame kasutada veebikomplekti optimeerimise ja kontrasti omadust, mis võimaldab meie saitide külastajatel meie fotodest rõõmu tunda, meie e-poes kaubaartikli detaile märgata ja hinnata meie ekraanipiltide ja diagrammide loetavus. Kuid ole ettevaatlik, mõnel juhul võib see põhjustada pikslitega tulemusi.