La imagen en el navegador al 100 % está pixelada, cree una imagen al 200 % y la escala a la mitad del tamaño es nítida

Según los comentarios, parece que el problema es que los está viendo en una pantalla de retina.

Las pantallas retina de Apple han desacoplado los píxeles reales de la pantalla de las dimensiones de píxeles de la imagen.

Antes de las pantallas retina, una imagen cargada en un navegador web de 100 px x 100 px ocupaba exactamente 100 x 100 píxeles de pantalla.

Las pantallas Retina (que es solo el término de Apple para pantallas de súper alta resolución) tenían el problema de que, si mostraban imágenes y texto en "tamaño de píxel real", todo sería demasiado pequeño para ser legible. Como tal, las pantallas de retina intentan representar el contenido al mismo tamaño que las pantallas que no son de retina, pero usan más píxeles para hacerlo.

Entonces, para simplificar las matemáticas, digamos que una pantalla retina tiene el doble de resolución que una pantalla estándar.

Si crea una imagen de 100x100 y la ve en una pantalla normal, se verá nítida ya que cada píxel de la imagen usa un píxel de pantalla.

Sin embargo, en una pantalla retina, esa imagen de 100x100 ocupará 200x200 píxeles de pantalla. El navegador traduce los 100 píxeles virtuales en 200 píxeles reales. Para hacerlo, tiene que compensar todos los píxeles que faltan a través de la interpolación que causa el desenfoque que ves.

La solución (en este ejemplo) es hacer que sus imágenes tengan 200x200 píxeles reales, luego dimensionarlas en su HTML o código para representarlas en 100x100 píxeles.

En una pantalla normal, se verá igual. Los píxeles adicionales simplemente se tiran. Pero en una pantalla de retina, ahora se verá nítido ya que cada píxel de imagen ahora usa un píxel de pantalla.

Tengo el mismo problema y descubrí que la causa es que configuré mi pantalla con una escala del 125%.

En Windows 10, arriba de "Resolución de pantalla", hay un cuadro desplegable para "Cambiar el tamaño del texto, las aplicaciones y otros elementos". Si lo configuro al 125%, el png se ve bien en Photo Viewer, pero se ve borroso en el navegador, incluso el png NO está escalado en html.

Si vuelvo a cambiar la escala de visualización al 100%, el mismo png se verá bien en el mismo documento html en el navegador.

Puede aplicar una regla CSS que hace que el 100% de las imágenes sean aún más nítidas cuando se cambia el tamaño. Por ejemplo, si tiene una imagen con un ancho natural de 1000 píxeles y su tamaño se redimensiona a 800 píxeles, el navegador puede mostrar la imagen con un ligero efecto de desenfoque/anti-aliasing.

CSS

.sharpen {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

En este ejemplo de código, agarré tu imagen al 100 % y la redimensioné con la nueva regla CSS: https://codepen.io/doppl3r/pen/YLdQxx?editors=1100

El texto de la imagen derecha debería aparecer más nítido. Para probar esto, cambie el max-widthde 400pxa150px