¿Cómo arreglar los bordes claros en PNG redimensionados de Illustrator?

¿Cómo se evita que una imagen PNG-24 transparente tenga bordes claros cuando se cambia el tamaño sin tener que forzarlos usando la regla CSS de Webkit Optimize Contrast?

Aclaración : cambiar el tamaño de la imagen en Chrome da como resultado líneas de colores más claros dentro de las letras y formas cerca de los bordes. Esos bordes claros hacen que la imagen sea irregular en lugar de nítida cuando se reduce a 200 px x 50 px desde su tamaño original de 350 px x 90 px.

Aquí hay una mejor captura de pantalla del problema:

Captura de pantalla de

(La imagen original se hizo usando Guardar para Web en Illustrator)

@Dominic: Las partes cortadas fueron mías capturando el error PNG.
¿Puedes proporcionar un poco más de información? ¿Qué aspecto tiene cuando no se redimensiona? ¿A qué puntos blancos te refieres (una captura de pantalla ampliada con algunas flechas apuntando funcionaría)?

Respuestas (2)

Esto también me estaba volviendo loco, tuve que registrarme para responderlo para que nadie más sintiera esa frustración...

Parece depender de la representación de la imagen que usa el navegador para cambiar el tamaño de esos PNG transparentes que le agregan un borde claro.

Descubrí que agregar las siguientes propiedades css al elemento de la imagen (o si es una imagen de fondo, el elemento en sí) soluciona el problema para mí en Chrome y Firefox:

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality
}

Puede leer sobre más opciones de representación de imágenes aquí .

La imagen que publicaste está recortada porque tu mesa de trabajo era más pequeña que la obra de arte en Illustrator.

Debe asegurarse de no haber Clip to Artboardmarcado la ventana Igual para Web. O debe asegurarse de que todas las ilustraciones caigan en la mesa de trabajo.

Actualizar después de editar la pregunta

Suponiendo que esas manchas blancas no sean parte de la imagen original, sospecho que esas partes blancas son el resultado directo de un error de renderizado de Chrome y no hay una forma específica de corregir solo el renderizado de Chrome.

Aclaré toda la pregunta y cambié la imagen.
¿Al votante negativo le importa explicar?
¿Cómo arreglar los bordes claros en PNG redimensionados de Illustrator?
RespuestasAquíPolítica de privacidad1y, 0v