Preparar imágenes para la web: lista de control

La mayoría de las imágenes que se ven mal en un sitio web no son malas fotografías. Se exportaron con el tamaño equivocado, en el formato equivocado, se enfocaron en el momento equivocado o se entregaron con un perfil de color que el navegador ignora en silencio. Ninguno de esos problemas es difícil de corregir. Solo hay que comprobarlos en el orden correcto.

Esta guía propone ese orden. Empieza por las dos decisiones que causan más daño —el tamaño de visualización y el formato— y después pasa al color, el enfoque, la compresión y los detalles que hacen que una página se sienta terminada. Al final hay una lista de control reutilizable.

1. Parte del tamaño que necesita el navegador, no del archivo original

Una cámara entrega muchos más píxeles de los que una página web puede aprovechar. Una foto de 6000 px de ancho colocada en una columna de 720 px desperdicia ancho de banda, ralentiza la página y no aporta nada visible. Lo contrario es peor: una imagen de 400 px estirada a todo el ancho de una cabecera se ve blanda por mucho cuidado que hayas puesto en el procesado.

Trabaja desde la maquetación hacia dentro:

• Mide la anchura máxima que ocupará la imagen en píxeles CSS. Para una cabecera a todo el ancho en una página de 1440 px, suele ser la anchura del contenido, ya descontados los márgenes.
• Multiplica por 2 para pantallas de alta densidad si la imagen es importante. Una imagen que se muestra a 720 px puede exportarse a 1440 px para que siga nítida en un móvil o en un portátil con pantalla de alta densidad.
• Pon un techo donde los píxeles extra dejen de notarse. En la mayoría de las imágenes editoriales ese límite llega pronto: por encima de unos 2500 px en el lado largo, un archivo casi siempre pesa más de lo necesario.

Si la misma foto aparece en tres sitios —una tarjeta, una imagen de sección y una cabecera—, exporta tres tamaños. El CSS puede reducir una imagen grande, pero el navegador seguirá descargando la versión más pesada en cada hueco.

2. El DPI es un metadato, no un ajuste web

La idea de los «72 DPI» sobrevive porque es fácil de repetir. No describe cómo muestran las imágenes los navegadores. El navegador lee las dimensiones en píxeles guardadas en el archivo y coloca la imagen en píxeles CSS; el valor DPI de los metadatos no entra en ese cálculo.

Dos consecuencias prácticas:

• Cambiar el DPI de 300 a 72 no hace que un archivo pese menos ni cargue más rápido. Lo que lo consigue es volver a codificarlo con unas dimensiones en píxeles menores.
• El número que importa al exportar desde un editor de fotos es la anchura y la altura en píxeles, no el campo DPI. Si el diálogo de exportación ofrece ambos, ajusta los píxeles.

3. Elige el formato según el contenido

No existe un formato universalmente mejor, solo una buena correspondencia entre el contenido y el códec. La división útil es esta:

Contenido	Formato de partida recomendado	Por qué
Fotografías, escenas con textura, degradados suaves	JPEG, WebP o AVIF	Estos formatos manejan bien las transiciones tonales suaves y comprimen las fotos con eficacia
Gráficos planos, iconos, logotipos, ilustraciones de bordes nítidos	SVG si es vectorial; si no, PNG o WebP	La compresión con pérdida crea flecos y desenfoque visibles junto a los bordes duros
Capturas de pantalla e interfaces	PNG o WebP	El texto y las líneas finas sobreviven a una codificación sin pérdida o de alta calidad
Todo lo que necesite transparencia	PNG, WebP o AVIF	El JPEG no tiene canal alfa: las zonas transparentes se convierten en un bloque sólido
Imágenes que deben funcionar en el mayor número posible de programas antiguos	JPEG o PNG	Ambos se entienden en todas partes

Hay dos errores de formato que conviene señalar. El primero es exportar una captura de pantalla como JPEG de baja calidad: cada letra y cada borde de tabla adquiere un halo, y la imagen deja de ser legible. El segundo es meter una fotografía en un SVG. El SVG es un formato vectorial, así que una foto raster dentro de él no se vuelve más nítida: solo queda envuelta en un archivo más grande.

Los formatos modernos como WebP y AVIF suelen producir un archivo más ligero con una calidad comparable, pero no son automáticamente mejores si tu flujo de trabajo no permite previsualizar el resultado. Exporta, abre el archivo y compáralo al tamaño al que realmente se verá.

4. Corrige y estandariza el color antes de exportar

La suposición razonable para publicar en la web es sRGB. Las pantallas, los navegadores y la mayoría de las plataformas toman sRGB como referencia. Si una imagen lleva un perfil más amplio —Display P3, por ejemplo—, puede mostrarse como si fuera sRGB, lo que convierte colores ricos en colores sobresaturados y degradados sutiles en escalones visibles.

Un flujo sensato sería:

1. Edita en el perfil más amplio que necesites, si tienes un entorno con gestión de color.
2. Convierte el documento a sRGB antes de la exportación final, en lugar de asignarle un perfil sRGB sin convertir. Asignar cambia la etiqueta; convertir cambia los valores para que coincidan con el nuevo destino.
3. Mira una última vez el archivo exportado, en la web, en una pestaña normal del navegador. Esa comprobación final detecta bandas en los cielos, zonas claras recortadas y errores de perfil que un editor con gestión de color oculta.

Si publicas gráficos con colores de marca exactos, toma una muestra del resultado publicado. Algunos colores se desplazan ligeramente al convertir desde una gama amplia, y es mejor saberlo antes de que cien imágenes estén en línea.

5. Enfoca después de redimensionar, nunca antes

Reducir una imagen elimina detalle y la deja ligeramente blanda. La solución habitual es un poco de enfoque de salida aplicado después del redimensionado, en las dimensiones finales. Enfocar antes no es equivalente: el redimensionado promedia después parte de ese enfoque, y los artefactos que eran invisibles a tamaño completo pueden quedar grabados en el archivo pequeño.

Mantén el enfoque de salida moderado. El texto, el trazo fino y los bordes de alto contraste son los primeros lugares donde el exceso de enfoque se ve como un fleco claro u oscuro. Compara el resultado a 100 % antes de subirlo. Una imagen ligeramente blanda parece natural; una sobreenfocada parece dañada.

La misma lógica vale para la reducción de ruido. Una reducción agresiva elimina el grano y la textura fina a la vez, así que aplícala a un tamaño cercano al final y revisa el resultado en esa escala.

6. Comprime para el objetivo y luego revisa

La compresión es donde calidad y peso se intercambian. No hay un ajuste universalmente correcto, pero algunas costumbres mantienen el intercambio honesto:

• Empieza por una calidad que se vea limpia al 100 %, no por el número más bajo que permita un control deslizante.
• Juzga al tamaño de visualización. Una imagen que cabe en una tarjeta de 300 px no necesita soportar el examen píxel a píxel al 300 %.
• Compara el peso del archivo entre intentos de exportación: la misma calidad visual suele estar disponible con bastantes menos bytes.
• Prefiere una imagen algo más pequeña a una imagen mal comprimida. Reducir las dimensiones un 10 % suele costar menos calidad que forzar la compresión hasta alcanzar el mismo peso.

Como punto de partida aproximado, muchas miniaturas editoriales quedan cómodamente por debajo de 100 KB, las imágenes de sección por debajo de 250 KB y las cabeceras a todo el ancho por debajo de 400 KB tras un redimensionado correcto. Son referencias que comprobar, no reglas que cumplir a cualquier precio.

7. Gestiona la transparencia a propósito

Si una imagen necesita fondo transparente, elige un formato que lo admita de verdad —PNG, WebP o AVIF— y comprueba el resultado sobre el color de fondo donde se va a colocar. Los bordes semitransparentes pueden mostrar un halo si la imagen se exportó con un color de fondo que no coincide con el de la página.

Si no necesitas transparencia, quitarla ahorra bytes. Aplanar un logotipo sobre el color exacto del fondo de la página suele permitir un archivo más pequeño y evita que aparezca un rectángulo tenue alrededor del gráfico sobre otro fondo.

8. Deja el texto fuera de las imágenes

Un texto dentro de una imagen raster tiene tres desventajas: se vuelve borroso en cuanto se cambia la escala, no se puede seleccionar ni traducir, y los buscadores no pueden leerlo. Los títulos, pies de foto, etiquetas de interfaz y anotaciones pertenecen al HTML y al CSS. Si un elemento de texto tiene que formar parte de una imagen por razones de diseño, expórtalo al tamaño de visualización y evita reescalarlo después.

La excepción es la captura de una interfaz real, donde el texto es prueba del producto y no contenido de la página. Incluso entonces, captura al tamaño de visualización final siempre que sea posible.

9. Termina con los detalles que hacen que una página funcione

Los detalles pequeños no son decoración; cambian el comportamiento de la página:

• Atributos de anchura y altura. Declarar las dimensiones intrínsecas permite al navegador reservar el espacio antes de que la imagen cargue: la maquetación deja de saltar.
• Carga diferida. Aplaza las imágenes que están por debajo de la primera pantalla para que la parte superior cargue primero. No apliques carga diferida a la imagen principal, que suele determinar el elemento de mayor contenido visible.
• Texto alternativo. Describe qué muestra la imagen y por qué está ahí. Una frase corta y concreta vale más que una lista de palabras clave; una imagen decorativa debe tener un alt vacío.
• Nombre del archivo. hero-photo-2026.jpg envejece mal; equipo-taller-retoque-archivos-raw.jpg sigue describiendo la escena años después.
• Una comprobación visual en una página real. Exporta, publica en una página de revisión y mira la imagen en contexto, en una ventana del tamaño de un móvil. Un archivo puede pasar todas las comprobaciones técnicas y seguir teniendo el tamaño equivocado para la maquetación.

10. Un flujo de trabajo que cabe en el navegador

Nada de esto exige una aplicación de escritorio. Si solo quedan el recorte, el enderezado, la exposición, la conversión de color y una exportación con el tamaño correcto, un editor en el navegador es suficiente, y evita el problema clásico de abrir un editor de fotos y «mejorar» todo lo demás por el camino. El editor de fotos de FreeAIGeneration funciona en el navegador sin cuenta obligatoria, y el editor de fotos RAW se ocupa de los archivos que necesitan revelado antes de esos pasos finales.

Para logotipos y trazos sencillos, exportar a SVG desde el editor vectorial produce un archivo nítido a cualquier tamaño y muy ligero. Guarda el documento original junto al recurso exportado para que la siguiente persona pueda actualizar la imagen en lugar de recrearla.

Si una herramienta promete arreglar una imagen con una función de IA —escalado, reducción de ruido, sustitución de objetos—, lee bien la promesa antes de confiar en ella. Nuestra explicación sobre qué significa realmente «impulsado por IA» describe cómo se presentan esas funciones y qué conviene comprobar.

La lista de control

Antes de que una imagen se publique:

1. Tamaño de visualización medido, tamaño de exportación decidido, variante de alta densidad elegida donde importa.
2. Dimensiones en píxeles ajustadas; DPI ignorado como ajuste web.
3. Formato adaptado al contenido; ningún texto incrustado en una imagen raster salvo que sea una captura.
4. Color convertido a sRGB y comprobado en un navegador.
5. Enfoque de salida y reducción de ruido aplicados después del redimensionado.
6. Compresión juzgada al tamaño de visualización, peso comparado entre intentos.
7. Transparencia gestionada o eliminada a propósito.
8. Anchura, altura, texto alternativo, nombre de archivo y estrategia de carga definidos en la página.
9. Un último vistazo a la página publicada en una ventana del tamaño de un móvil.

Con esas nueve comprobaciones, el problema de calidad suele desaparecer antes de que nadie abra un editor de código.