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

No tuvimos ningún problema con la nitidez de la imagen en los primeros años de Internet, porque no necesitábamos mostrar sitios web en dispositivos móviles.

Hoy vemos un tremendo crecimiento en la navegación web móvil. Tanto es así que, este año, incluso ha superado el tráfico en las computadoras de escritorio.

La mayoría de los clientes intentan crear interfaces receptivas para sus sitios web para que sean fácilmente accesibles desde cualquier tipo de dispositivo. Y no parece extraño que muchos desarrolladores de diseño hayan comenzado a usar

img {
    ancho: 100%;
    altura: auto;
}

por sus imágenes Por lo tanto, funcionan a la perfección en cualquier resolución de ventana del navegador, escalando al espacio disponible.

Conceptualmente, todo se ve bien. Los diseñadores crean grandes imágenes agradables, y los desarrolladores usan esas imágenes para cada dispositivo. En algunos casos, los desarrolladores crean múltiples versiones de la misma imagen, por lo que se descarga una imagen más pequeña para pantallas móviles y una imagen más grande para computadoras de escritorio.

Desafortunadamente, Chrome no quiere cambiar el tamaño de las imágenes de la misma manera que los buenos editores de imágenes. En cambio, supera la imagen con una nitidez no igual o similar a la imagen inicial.

La razón principal de esto puede ser el rendimiento. Cuando una página web tiene muchas imágenes, y el procesador del dispositivo no es muy productivo, el procesamiento adicional de imágenes podría generar retrasos mayores en el procesamiento de la página, por lo que Chrome omite este proceso como no crucial para los usuarios finales.

Le mostraré algunos ejemplos con el navegador Chrome y luego con otros navegadores. Aquí hay una imagen, reducida a 1000 px en Photoshop:

La misma imagen cargada en tamaño original y reducida por el navegador. Compara la agudeza de los ojos del perro.

Photoshop:

Navegador:

Las cosas empeoran aún más cuando agrega nitidez en Photoshop después de reducir el tamaño. Pero las fotos son más indulgentes en este caso, ya que generalmente no tienen muchos bordes afilados. Los problemas con las ilustraciones vectoriales guardadas como imágenes .png son mucho más notables. Caso frecuente: logotipos del sitio web.

Logotipo de Asana, archivo inicial:

Redimensionado en Photoshop:

Representado en el navegador:

Logotipo de Wecan, archivo inicial:

Redimensionado en Photoshop:

Representado en el navegador:

Y un par de logotipos adicionales representados por el navegador:

Encontré las comparaciones más divertidas de imágenes borrosas en sitios web relacionados con UX. Sección de trabajos de Smashingmagazine, en el navegador:

En Photoshop:

Nielsen Norman Group, artículo de Empathy Mapping, gráfico presentado:

Usando el cambio de tamaño de Photoshop:

Debo admitir que este problema es solo de Chrome. IE hace mucho mejor; Es notable que algunas líneas finas están pixeladas, lo cual está bien para el texto:

Firefox también tiene buena representación; el suavizado hace que el texto sea un poco menos legible que en IE, pero es mejor para los logotipos:

Lo que los desarrolladores deberían hacer ahora es activar la propiedad de auto-sharping de webkit:

img {
    renderizado de imágenes: -webkit-optimizar-contraste;
}

Esto es lo que obtendríamos si estuviera encendido:

Por lo tanto, antes de que el navegador más popular del mundo implemente un buen algoritmo de muestreo de imágenes, podemos usar la propiedad webkit-Optimize-contrast, que permite a los visitantes de nuestros sitios disfrutar de nuestras fotos, discernir los detalles de los artículos en nuestra tienda en línea y apreciar legibilidad de nuestras capturas de pantalla y diagramas. Pero tenga cuidado, en algunos casos puede conducir a resultados pixelados.