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

Non abbiamo avuto problemi con la nitidezza delle immagini nei primi anni di Internet, perché non avevamo bisogno di mostrare siti Web su dispositivi mobili.

Oggi assistiamo a una straordinaria crescita della navigazione web mobile. Tanto che, quest'anno, ha persino superato il traffico sui desktop.

La maggior parte dei clienti tenta di creare interfacce reattive per i propri siti Web in modo che siano facilmente accessibili da qualsiasi tipo di dispositivo. E non sembra strano che molti sviluppatori di layout abbiano iniziato a utilizzare

img {
    larghezza: 100%;
    altezza: auto;
}

per le loro immagini. Quindi funzionano perfettamente su qualsiasi risoluzione della finestra del browser, adattandosi allo spazio disponibile.

Concettualmente, tutto sembra a posto. I designer creano belle immagini di grandi dimensioni e gli sviluppatori usano quelle immagini per ogni dispositivo. In alcuni casi, gli sviluppatori creano più versioni della stessa immagine, quindi un'immagine più piccola viene scaricata per gli schermi mobili e un'immagine più grande per i desktop.

Sfortunatamente, Chrome non vuole ridimensionare le immagini come fanno i bravi editor di immagini. Invece, mette in ombra l'immagine con la stessa nitidezza, o simile, dell'immagine iniziale.

Il motivo principale di ciò potrebbe essere la prestazione. Quando una pagina web ha molte immagini e il processore del dispositivo non è altamente produttivo, un'ulteriore elaborazione delle immagini potrebbe comportare ritardi maggiori nel rendering della pagina, quindi Chrome omette questo processo perché non è cruciale per gli utenti finali.

Ti mostrerò alcuni esempi utilizzando il browser Chrome e quindi utilizzando altri browser. Ecco un'immagine, ridotta a 1000 px in Photoshop:

La stessa immagine caricata nelle dimensioni originali e ridimensionata dal browser. Confronta la nitidezza degli occhi del cane.

Photoshop:

Browser:

Le cose peggiorano ulteriormente quando aggiungi nitidezza in Photoshop dopo il ridimensionamento. Ma le foto perdonano di più in questo caso, poiché in genere non hanno molti spigoli vivi. I problemi con le illustrazioni vettoriali salvate come immagini .png sono molto più evidenti. Caso frequente: loghi di siti Web.

Logo di Asana, file iniziale:

Ridimensionato in Photoshop:

Resi nel browser:

Logo di Wecan, file iniziale:

Ridimensionato in Photoshop:

Resi nel browser:

E un paio di loghi aggiuntivi resi dal browser:

Ho trovato i confronti più divertenti di immagini sfocate su siti Web correlati a UX. Smashingmagazine Jobs sezione, nel browser:

In Photoshop:

Nielsen Norman Group, articolo di Empathy Mapping, grafico reso:

Utilizzando il ridimensionamento di Photoshop:

Devo ammettere che questo problema è solo per Chrome. IE rende molto meglio; si nota che alcune linee sottili sono pixelate, il che va bene per il testo:

Anche Firefox ha un buon rendering; la levigatura rende il testo un po 'meno leggibile rispetto a IE, ma è meglio per i loghi:

Quello che gli sviluppatori dovrebbero fare ora è attivare la proprietà di auto-sharping di webkit:

img {
    rendering delle immagini: -webkit-optimise-contrast;
}

Questo è ciò che otterremmo se fosse acceso:

Quindi, prima che il browser più popolare al mondo implementi un buon algoritmo di down-sampling delle immagini, possiamo usare la proprietà webkit-ottimizzare-contrasto, che consente ai visitatori dei nostri siti di godere delle nostre foto, discernere i dettagli degli articoli nel nostro negozio online e apprezzare leggibilità dei nostri screenshot e diagrammi. Ma fai attenzione, in alcuni casi può portare a risultati pixelati.