¿Por qué Chrome distorsiona mi PNG transparente (agregando un área sutil "débil")?

Me está costando describir el problema con palabras, así que no he tenido suerte con la búsqueda. Tengo un patrón repetitivo simple (aunque he tenido el mismo problema con otras imágenes; no parece estar relacionado con la complejidad o la profundidad del color), y cuando lo guardo como un PNG transparente, al usarlo en Chrome se muestra una especie de artefacto fantasma.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

La imagen debe tener líneas sólidas.

Lo que he probado:

  • Guardarlo como PNG de 8 bits con transparencia alfa en Fireworks CS6
  • Guardarlo como PNG de 32 bits con transparencia alfa en Fireworks CS6
  • Guardarlo como PNG de 24 bits con transparencia alfa en Photoshop CS6

El problema aparece en cada una de estas versiones, pero no en Firefox o Safari (todos los navegadores son sus respectivas versiones más recientes en Mac OS X 10.9.1), por lo que asumo que se trata de alguna interacción entre Chrome y el PNG transparente. Estoy mirando solo la imagen directamente, no en una página web.

Guardar la imagen en un fondo (sin transparencia) hace que el problema desaparezca, pero no es una opción viable (y tampoco lo es guardar con Index Transparency), porque va en una página web con un fondo variable.

Mi pregunta es doble:

  1. ¿Ves este problema? (Es decir, ¿es solo una configuración extraña en mi computadora en alguna parte?)
  2. ¿Alguna idea de qué lo está causando?
Un ejemplo de la imagen guardada en un fondo blanco plano, que no tiene problemas en Chrome: i.imgur.com/AP0ZYHw.png
Para aclarar: no estoy preguntando por qué está borroso en Retina (también lo optimizaré, pero este es un problema aparte). Eche un vistazo a esta captura de pantalla de la misma imagen tomada en Safari: dropbox.com/s/mgfgtmba2s9uq7p/… Tenga en cuenta que no tiene el mismo desvanecimiento en el interior de las líneas doradas que la tomada en Chrome. Eso es lo que me pregunto.
Me alegro de haber encontrado esta pregunta porque estoy experimentando lo mismo. Es solo Chrome y solo en Retina. En mi se le dio una imagen cuyo borde completo es una línea de un píxel de píxeles transparentes. En el interior hay un campo gris de varios píxeles de espesor. En Chrome, veo una fila de píxeles grises, luego una fila blanca y luego el resto de los grises. Esto no es un desenfoque de la retina, sino que aparentemente Chrome intenta ser inteligente sobre cómo mejora los bordes para la visualización de la retina. En este caso: mal.
alguna vez solucionaste este problema? Me está pasando lo mismo, y es tan frustrante que no parece haber ninguna pregunta al respecto en línea.

Respuestas (2)

Si entiendo su pregunta correctamente, está preguntando por qué su imagen, en una pantalla Retina, se ve un poco borrosa.

Si esa es la pregunta, la respuesta se debe a que la pantalla retina tiene que escalar su imagen 2x. La solución para esto sería:

o

  • use un formato vectorial (SVG), que puede escalar sin pérdida de resolución. Esto funciona muy bien en los nuevos navegadores webkit y similares. Es posible que no funcione en navegadores más antiguos ( tos , es decir , tos )
No creo que sea eso lo que estoy preguntando, pero, francamente, no tengo idea de por qué veo lo que veo, por lo que podría ser un efecto secundario de Chrome + mi pantalla Retina. Agregué un comentario a la pregunta que muestra una captura de pantalla de Safari para demostrar la diferencia en las capturas de pantalla.
@SarahLewis, ¿ya ha creado imágenes separadas para pantallas Retina? Si no, esa es la razón por la que estás viendo lo que estás viendo. Una pantalla de retina tiene que aumentar la escala de todas las imágenes, lo que generalmente provoca cierta cantidad de desenfoque. Mi conjetura es que Safari y Chrome tienen técnicas de renderizado ligeramente diferentes para escalar imágenes, de ahí las ligeras diferencias visuales. Dicho esto, hacer versiones de retina adecuadas de las imágenes debería arreglar las cosas.
Gracias por aclararlo. Esperaba una borrosidad general, ¡pero no conecté eso con lo que estaba sucediendo en absoluto!
@SarahLewis también tenga en cuenta que su navegador puede tener una escala adicional. Es muy fácil cambiar la escala de las páginas accidentalmente en los nuevos navegadores... especialmente en una Macbook con el zoom de pellizco. Asegúrese de que sus navegadores estén configurados al 100 % de zoom al mirar sus páginas.
@DA01: ¡muy buen recordatorio! Gracias y debidamente anotado!

Respuesta tardía pero esto funciona:

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

Aquí hay otro enlace también que habla sobre el soporte del navegador:

https://css-tricks.com/almanac/properties/i/image-rendering/

¿Por qué Chrome distorsiona mi PNG transparente (agregando un área sutil "débil")?
RespuestasAquíPolítica de privacidad1y, 0v