Cómo comprimir imágenes para una página web

Por qué optimizar imágenes mejora una web

Las imágenes suelen representar una parte importante de los datos descargados por una página. Un archivo grande retrasa la aparición del contenido, consume más datos móviles y puede empeorar la experiencia del visitante. La optimización combina tres decisiones: dimensiones, formato y nivel de compresión.

No existe un límite perfecto para todas las imágenes. Una miniatura debería pesar mucho menos que una fotografía que ocupa toda la pantalla. El objetivo es entregar suficientes píxeles y calidad para el espacio real, sin obligar al navegador a descargar información que no utilizará.

Flujo recomendado paso a paso

1. Identifica el ancho máximo con el que la imagen aparecerá en el diseño.
2. Recorta el encuadre antes de comprimir para no conservar zonas que serán eliminadas.
3. Elige el formato según el contenido y la necesidad de transparencia.
4. Abre el archivo en el compresor de imágenes y prueba una calidad media-alta.
5. Compara el peso y examina texto, bordes, rostros y degradados.
6. Publica el resultado y comprueba la página en móvil y escritorio.

Dimensiones: evita subir más píxeles de los necesarios

Si una tarjeta muestra una imagen a 600 píxeles de ancho, cargar una foto de 5000 píxeles suele ser un desperdicio. El navegador la reducirá visualmente, pero antes habrá tenido que descargar el archivo completo. Prepara una versión cercana al tamaño máximo requerido por el diseño.

Para pantallas de alta densidad puede ser útil proporcionar una versión aproximadamente dos veces mayor, pero lo ideal es que el sitio use imágenes responsivas con srcset y sizes. Así cada dispositivo descarga una variante apropiada en vez del mismo archivo gigante.

Qué formato elegir

• JPG: buena compatibilidad y tamaño razonable para fotografías sin transparencia.
• WebP: útil para fotos y gráficos web; puede conservar transparencia y ofrecer archivos compactos.
• PNG: apropiado para transparencia, capturas con texto nítido y gráficos simples; puede pesar mucho en fotografías.
• SVG: ideal para logotipos e iconos vectoriales cuando el archivo es seguro y el diseño se creó como vector.

Convertir de formato no garantiza un archivo menor. Compara siempre el resultado y conserva el formato original cuando ya sea la opción más eficiente. Consulta la comparación entre JPG, PNG y WebP si no sabes cuál elegir.

Cómo elegir la calidad de compresión

Empieza con un ajuste que priorice la apariencia y baja poco a poco. Las fotos toleran mejor la compresión que las capturas de interfaz, los diagramas y el texto pequeño. Si aparecen halos, bloques o bordes borrosos, aumenta la calidad o prueba otro formato.

Evalúa el archivo dentro de la página, no únicamente en una vista ampliada. Una pequeña diferencia que resulta visible al 300 % quizá no se note a tamaño normal; en cambio, una letra ilegible en una tarjeta sí es un problema real.

La compresión no sustituye una buena implementación

Además de optimizar el archivo, reserva el espacio con atributos width y height para evitar saltos de contenido. Usa carga diferida en imágenes que están fuera del primer bloque visible, pero no retrases la imagen principal si es necesaria para entender la página.

También conviene definir un caché largo para archivos con nombre versionado y evitar cargar la misma imagen en varias resoluciones mediante CSS. Estas decisiones requieren cambios en el sitio, pero complementan el ahorro conseguido durante la compresión.

Errores comunes

Comprimir antes de decidir el tamaño

Redimensionar después obliga a procesar dos veces el archivo y puede acumular pérdida. Decide primero el encuadre y las dimensiones; comprime al final.

Convertir capturas de pantalla a JPG con calidad baja

Las letras y líneas finas pueden producir manchas. Prueba PNG o WebP con una calidad mayor y compara el peso.

Usar una imagen pequeña como cabecera

Ampliarla no recupera detalle. Parte de una fuente suficientemente grande y genera variantes más pequeñas desde esa versión.

Preguntas frecuentes

¿Cuánto debe pesar una imagen web?

Depende de sus dimensiones, importancia y complejidad. Usa como criterio el menor peso que mantenga una calidad aceptable en su tamaño final, en vez de perseguir una cifra universal.

¿Debo convertir todas las imágenes a WebP?

No necesariamente. WebP es útil, pero un PNG simple o un archivo ya optimizado puede no mejorar. Convierte una muestra, mide y conserva los originales.

¿Comprimir imágenes mejora por sí solo el posicionamiento?

Ayuda a la experiencia y al rendimiento, pero el posicionamiento también depende de contenido útil, rastreo, enlaces, intención de búsqueda y muchas otras señales. La compresión es una parte de una web bien preparada.