La imagen se muestra borrosa en el navegador al 100 %, ¡pero no en Photoshop!

Encontré este sitio y vi que tenía un par de imágenes borrosas. Revisé el zoom de mi navegador en Firefox y Chrome y ambos estaban al 100%. Copié las imágenes para mirarlas en Photoshop y Paint, y ambas eran nítidas y se mostraban más pequeñas.

Lo primero que pensé fue que era el zoom del navegador, pero no lo es. Por lo que puedo decir, no hay codificación CSS para hacer que las imágenes sean más grandes en el navegador. Es agradable y nítido con un zoom del 75 % en Chrome. ¿De qué trata eso? ¿Resolución de la pantalla?

Captura del navegador

Captura de Photoshop

Captura del navegador

Captura de Photoshop

resolución de la pantalla

es posible que el HTML esté agrandando las imágenes... realmente no hay forma de saberlo sin examinar el código o las imágenes originales .
Tienes razón Scott, podría ser. Está claro en algunas de las páginas del sitio, pero no en su página principal... nib.com.au Además, ¿estás diciendo que si guardo la imagen, no me muestra la imagen original?
Según el sitio y las imágenes adjuntas, parece que el zoom de su navegador está configurado en más del 100%.
Parece haber sido un problema de resolución que afecta a mis navegadores en Windows 8.1. Configuré mi pantalla en Medio - 125% y eso arregló Chrome. Para Firefox, hice una solución y obtuve el complemento Nivel de zoom predeterminado e hice el zoom predeterminado del 80% para que coincida con Chrome. Al menos ahora sé que es la pantalla y no el código o las imágenes... Safari en la Mac mostró las imágenes en el tamaño adecuado.
Sí, hay muchos problemas con algunos navegadores de Windows que tienen niveles de zoom predeterminados extraños en algunos dispositivos de alta densidad de píxeles. Firefox es el peor porque finge que no está ampliado cuando en realidad lo está. Hay algo de discusión y posibles soluciones aquí: ¿cómo maneja el zoom del navegador del cliente? tldr; considere duplicar las dimensiones del archivo de imagen mientras mantiene el tamaño de la imagen con CSS, o usando SVG

Respuestas (3)

Copié las imágenes para mirarlas en Photoshop y Paint, y ambas eran nítidas y se mostraban más pequeñas .

Ahí está la clave de tu problema. Si acaba de copiar y pegar las imágenes en PS, y son más pequeñas allí que en el navegador, su navegador las está escalando, agrandando así los píxeles y brindándole una vista borrosa.

Revisa tu CSS nuevamente. En algún lugar, le estás diciendo al navegador que muestre las imágenes más grandes que el tamaño real. Según las imágenes que incluyeste en tu publicación, el original mide aproximadamente 250 x 290 px, mientras que el navegador lo muestra a 435 x 380 px. (si sus imágenes incluidas son 100%)

Gracias por las sugerencias chicos. Si fuera el código lo que hace que se acerque, entonces se acercaría en otro dispositivo y no lo es (lo verifiqué en una Mac). Es mi Windows 8.1 combinado con una pantalla de alta resolución que hace zoom en los navegadores independientemente de los controles de zoom habituales en el navegador, ya que verifiqué que el zoom en el navegador estaba al 100 %.

Eso significa que las imágenes no tienen problemas. El código HTML/CSS amplía la imagen desde su tamaño real.

Compruebe el tamaño definido por el código fuente utilizando el elemento de inspección del navegador. El ancho y la altura pueden diferir del tamaño real de la imagen.

La imagen se muestra borrosa en el navegador al 100 %, ¡pero no en Photoshop!
RespuestasAquíPolítica de privacidad1y, 0v