¿Por qué se ve borroso mi logotipo PNG y cómo lo soluciono?

Identifica dónde aparece por primera vez la falta de nitidez

Exportar un PNG más grande ayuda cuando el diseño original contiene suficiente detalle. Ampliar un archivo rasterizado pequeño no permite recuperar las curvas y las formas de las letras exactas del logotipo vectorial original.

Abre el propio PNG antes de modificar el sitio web o volver a exportar. Revísalo al tamaño de uso previsto y con una vista a nivel de píxel. Después, compáralo con el original aprobado y con la versión cargada.

Utiliza las siguientes comprobaciones para identificar la etapa que necesita atención. No parten de la idea de que todos los bordes poco nítidos tengan la misma causa.

• Falta de nitidez en el diseño original: busca un archivo de origen mejor o revisa la versión del diseño para tamaños pequeños.
• Original nítido, PNG descargado poco nítido: comprueba las dimensiones de exportación, los límites y los ajustes de rasterización.
• Descarga nítida, resultado poco nítido en el sitio web o el correo electrónico: comprueba qué imagen se está sirviendo y cómo se escala.
• Símbolo nítido, letras pequeñas ilegibles: revisa el tamaño mínimo del logotipo o utiliza una versión simplificada aprobada.

Comprueba qué contiene realmente el archivo de origen

Un original verdaderamente vectorial contiene formas que pueden renderizarse a un nuevo tamaño. Un SVG también puede contener imágenes de mapa de bits incrustadas, por lo que la extensión SVG por sí sola no demuestra que el logotipo sea un diseño vectorial.

Si el archivo de origen es un PNG pequeño copiado de un sitio web antiguo, pide el archivo de trabajo original o una exportación vectorial verificada. Volver a exportar ese PNG pequeño a un tamaño mayor añade píxeles estimados. Adobe describe el aumento de resolución mediante remuestreo como un proceso que puede introducir artefactos y que no puede añadir detalles ausentes en el original.

Si no se dispone del archivo maestro, reconstruir o vectorizar el símbolo es una tarea de diseño independiente. Compara las letras y las formas reconstruidas con una referencia aprobada antes de utilizarlas como nuevo original.

Más información: MDN: formatos de imagen · Adobe: tamaño de imagen y remuestreo

Compara los píxeles del archivo con los píxeles de visualización

Utiliza el tamaño de visualización real en lugar del ancho que esperabas que utilizara la maquetación. Las herramientas de desarrollo del navegador pueden ayudarte a comprobar el recuadro de la imagen renderizada. Ten en cuenta los puntos de ruptura del diseño adaptable y cualquier transformación que amplíe el logotipo.

Redimensionar el PNG existente de 200 × 50 a 400 × 100 no crea un equivalente a una exportación desde un diseño vectorial. Ambos archivos pueden tener las mismas dimensiones y contener distintos niveles de detalle en los bordes. La relación de píxeles del dispositivo es la relación entre los píxeles físicos de la pantalla y los píxeles CSS.

Para consultar el cálculo completo y ejemplos de entrega, ve a tamaños de logotipos PNG para sitios web y correo electrónico.

Este es un ejemplo ilustrativo con el logotipo ficticio de Morrow Quay, no una prueba de un cliente real:

• La cabecera muestra el logotipo a 200 × 50 píxeles CSS.
• El PNG cargado contiene solo 200 × 50 píxeles.
• Un objetivo de 2× requiere 400 × 100 píxeles.
• Vuelve a exportar el diseño vectorial a 400 × 100 y mantén la visualización a 200 × 50.

Continúa con: tamaños de logotipos PNG para sitios web y correo electrónico

Más información: MDN: devicePixelRatio

Comprueba qué imagen sirve realmente el destino

Un original grande no ayuda si la página carga una miniatura generada de menor tamaño. Comprueba el recurso seleccionado y sus dimensiones en píxeles. En las imágenes adaptables, la propiedad currentSrc del navegador identifica la URL de la imagen elegida. Compara ese recurso con el archivo original cargado.

Si el archivo servido es más pequeño, revisa los ajustes de imágenes del CMS o pide a quien desarrolla el sitio que utilice el recurso adecuado. Si sus dimensiones son correctas, compara visualmente los archivos antes de atribuir el problema a la optimización. Un servicio puede redimensionar, convertir o procesar de otro modo un archivo cargado, pero debes determinar qué cambio se ha producido realmente.

PNG utiliza compresión sin pérdida. Reducir su tamaño de almacenamiento mediante un proceso verdaderamente sin pérdida no difumina por sí mismo los píxeles. Convertir a PNG un JPEG previamente deteriorado también conserva el deterioro existente. Comprueba toda la cadena de procesamiento, incluidos el redimensionamiento y la conversión con pérdida, en lugar de tratar la «compresión» como una única operación.

Más información: MDN: currentSrc · MDN: formatos de imagen y compresión

Revisa los márgenes y los ajustes de bordes

Los márgenes transparentes ocupan parte de las dimensiones de la imagen. Un lienzo de 400 píxeles de ancho con un símbolo de 200 píxeles de ancho solo tiene 200 píxeles horizontales que describen el logotipo visible. Si muestras toda la imagen a un tamaño mayor para que el símbolo parezca más grande, también amplías esos píxeles. Corrige los límites accidentales en el archivo de origen y conserva el área de protección aprobada.

Cierto suavizado en las curvas es normal y se debe al antialiasing. Evalúa el recurso tanto a su tamaño real de uso como ampliado. Las letras muy pequeñas o los trazos finos pueden necesitar una alternativa aprobada para tamaños pequeños, incluso cuando las dimensiones de exportación sean técnicamente suficientes.

Figma ofrece opciones de remuestreo de imágenes PNG: Detailed es la opción predeterminada y Basic utiliza el muestreo por vecino más próximo. Compara los ajustes con tu diseño real; un borde de aspecto más duro no es automáticamente un resultado más fiel. Figma también admite un ancho de exportación fijo, como 400w.

Illustrator ofrece de forma nativa Export for Screens para generar archivos rasterizados en las escalas elegidas. Sus opciones de exportación PNG incluyen controles de suavizado. Comprueba una exportación nueva del diseño original en lugar de redimensionar repetidamente el PNG anterior.

Más información: Figma: ajustes de exportación · Adobe: Export for Screens · Adobe: opciones de exportación PNG

Vuelve a exportar y verifica la solución

Crea un archivo de reemplazo con las dimensiones necesarias antes de volver a generar todo el paquete. Colócalo en la misma ubicación y compáralo con la versión anterior. Vuelve a comprobar el archivo servido para que una miniatura antigua o un recurso en caché no confundan el resultado.

Si partes de un SVG aprobado, los tamaños PNG personalizados de logopack.app Pro pueden ayudarte a crear archivos específicos para cada destino como parte de un paquete de logotipos. Se trata de un flujo de exportación, no de un servicio de vectorización ni de reparación de logotipos de baja resolución.

Si el destino admite SVG, una versión vectorial verificada puede ser la opción más adecuada. Nuestra guía de formatos de archivo explica esa elección y nuestra guía de exportación desde Figma aborda la preparación del archivo de origen.

Da el problema por resuelto cuando el archivo correcto tenga suficiente nitidez al tamaño previsto, funcione con el fondo y el sistema de destino conserve las proporciones deseadas. Guarda el original verificado y los ajustes de exportación para la próxima entrega.

Continúa con: guía de formatos de archivo · guía de exportación desde Figma

Más información: Prepara exportaciones con logopack.app