Cómo preparar imágenes para la web sin perder calidad

Un archivo de imagen más pequeño no tiene por qué verse borroso o apagado. Los mejores resultados empiezan con unas decisiones precisas antes de comprimir.

Empieza por el tamaño de visualización

Exportar una imagen de 5000 píxeles para un espacio de solo 1200 píxeles de ancho desperdicia ancho de banda. Redimensiona la fuente cerca del tamaño máximo que ocupará, pero conserva suficiente resolución para las pantallas de alta densidad.

Para una imagen que se muestra a 1200 píxeles, una fuente de entre 1600 y 2400 píxeles de ancho suele ser un buen punto de partida. El valor exacto depende del recorte y de la cantidad de detalle fino de la fotografía.

Elige el formato según el contenido

Cada imagen necesita un formato diferente. Elige según el material visual en vez de aplicar el mismo ajuste a todos los archivos.

• Usa AVIF o WebP para fotografías y escenas complejas cuando su compatibilidad se adapte a tu público.
• Usa PNG cuando necesites detalle sin pérdida o transparencia y el archivo siga teniendo un tamaño razonable.
• Usa SVG para ilustraciones vectoriales sencillas, iconos y diagramas.
• Mantén JPEG como alternativa fiable para contenido fotográfico.

Comprime y revisa a tamaño completo

Los porcentajes de calidad no son universales. Un ajuste de 75 puede verse diferente según el formato y el codificador. Compara la imagen comprimida con la fuente al 100 %, sobre todo alrededor de texto, cabello, vegetación y transiciones de color marcadas.

Reduce la calidad poco a poco hasta que aparezcan defectos y vuelve al paso anterior. Así obtendrás un equilibrio práctico entre claridad y peso del archivo.

Conserva el original

Guarda una fuente con calidad completa fuera de la carpeta de publicación. Las exportaciones web son resultados reemplazables. Un original limpio permite crear más adelante otro recorte, formato o tamaño sin acumular daños de compresión.

Usa variantes adaptables

Una sola imagen grande obliga a las pantallas pequeñas a descargar datos innecesarios. Genera varias anchuras y deja que el navegador seleccione la más cercana. Esto mejora la velocidad de carga y conserva la misma composición y color en todos los dispositivos.

La comprobación final es sencilla: revisa la imagen en los tamaños que verá la gente y después verifica su peso. Una buena imagen web debe parecer nítida antes de que alguien note los pocos datos que utiliza.