Cómo exportar imágenes nítidas y claras desde Figma y Photoshop

El problema: Diseño nítido, exportación borrosa

Has pasado horas perfeccionando un diseño hermoso en Figma o Photoshop. En tu lienzo, todo parece perfecto a nivel de píxel. Pero al exportarlo como JPG o PNG y verlo en el navegador, se ve suave, borroso o simplemente… no está bien.

Esta es una frustración común entre los diseñadores. La borrosidad suele deberse a una de dos causas: exportar con la resolución incorrecta o usar configuraciones de exportación inadecuadas. Esta guía te proporcionará un flujo de trabajo infalible tanto en Figma como en Photoshop para garantizar nitidez en cada exportación.

La regla de oro: Exporta al doble de tamaño, muestra al tamaño real

La clave para obtener imágenes nítidas en pantallas modernas de alta resolución (como las pantallas Retina de Apple) es exportar las imágenes al doble del tamaño con el que planeas mostrarlas realmente.

Por ejemplo, si tu sitio web tiene un banner principal que se mostrará con un ancho de 1200px, debes exportarlo desde tu herramienta de diseño con un ancho de 2400px. Luego, en tu HTML o CSS, limita su visualización a 1200px.

<!-- El archivo de imagen es de 2400px de ancho, pero le decimos al navegador que lo muestre con 1200px -->
<img src="mi-banner-2400px.jpg" alt="Un texto alternativo descriptivo" width="1200">

Esta técnica proporciona al navegador el doble de densidad de píxeles, resultando en imágenes más nítidas en pantallas de alta resolución.

Exportar desde Figma

Figma es una herramienta basada en vectores, lo que facilita la exportación de recursos nítidos.

Guía paso a paso:

1. Selecciona el marco o recurso: Haz clic en el elemento que deseas exportar. Puede ser un ícono, un componente o un marco completo.
2. Abre el panel de exportación: En la barra lateral derecha, busca la sección “Exportar” y haz clic en el icono +.
3. Elige el tamaño de exportación: Este es el paso más crucial. En la configuración de “Exportar”, cambia 1x a 2x. Esto indica a Figma que renderice el recurso al doble de su tamaño en lienzo. Para gráficos muy importantes como logotipos, incluso puedes seleccionar 3x.
4. Selecciona el formato:
   • JPG: Ideal para fotografías e imágenes complejas. Establece la calidad en aproximadamente 80-90%.
   • PNG: Perfecto para gráficos con líneas definidas, texto o transparencia (como logotipos e íconos).
   • SVG: La mejor opción para logotipos e íconos simples. Como SVG es un formato vectorial, se verá perfecto a cualquier tamaño.
5. Haz clic en “Exportar”: Guarda el archivo. Recuerda comprimir la imagen final antes de subirla a tu sitio web, usando una herramienta como nuestro compresor de imágenes.

Exportar desde Photoshop

Photoshop es una herramienta basada en píxeles (raster), por lo que es fundamental trabajar desde el principio con documentos de alta resolución.

Método moderno: “Exportar como”

Este es el flujo de trabajo recomendado para gráficos web. Ve a Archivo > Exportar > Exportar como....

1. Configura el tamaño: En la sección “Tamaño de imagen” a la derecha, asegúrate de que el ancho y alto sean correctos. Si aplicas la regla del doble, tu documento ya debería tener el doble del tamaño de visualización esperado.
2. Elige el formato:
   • JPG: Usa el control deslizante de “Calidad”. Valores entre 70-85 son un buen punto de inicio para balancear calidad y tamaño de archivo.
   • PNG: Para imágenes que requieren transparencia. Si tu paleta de colores es limitada (como un logotipo simple), normalmente puedes marcar “Archivo más pequeño (8 bits)” para ahorrar significativamente en tamaño.
3. Asegúrate del espacio de color sRGB: En la parte inferior del cuadro de diálogo, bajo “Espacio de color”, verifica que “Convertir a sRGB” esté marcado. Este es el perfil de color estándar para web y evita que tus colores luzcan apagados en el navegador.
4. Haz clic en “Exportar todo”: Guarda tus imágenes.

Método tradicional: “Guardar para Web”

En versiones anteriores de Photoshop, Archivo > Exportar > Guardar para Web (heredado) sigue siendo una opción potente.

1. Selecciona una preconfiguración: En la esquina superior derecha, elige una preconfiguración como “JPEG Alto” o “PNG-24” como punto de partida.
2. Ajusta la calidad: Para JPEG, usa el control deslizante de “Calidad”. Un valor de 70-80 suele ser perfecto. Para PNG, puedes elegir entre PNG-8 (archivo más pequeño, colores limitados) y PNG-24 (mayor calidad, color completo).
3. Verifica el tamaño de imagen: Confirma las dimensiones finales en la esquina inferior derecha.
4. Confirma sRGB: Asegúrate de que la opción “Convertir a sRGB” esté marcada.
5. Haz clic en “Guardar”.

Al exportar siempre al doble de tamaño y garantizar que tus recursos estén correctamente comprimidos en el espacio de color sRGB, finalmente podrás despedirte de las imágenes borrosas y asegurar que tus diseños se vean en la web tan nítidos como en tu lienzo.