Abres una página y el texto aparece enseguida, pero la fotografía de portada se toma su tiempo. La señal móvil no siempre tiene la culpa: muchas veces el problema está en la imagen que alguien subió sin prepararla.
Una foto enorme puede verse igual de grande que otra más ligera, pero no cuesta lo mismo descargarla. Si además se convierte en el elemento visual principal de una página, su tamaño influye en cuánto tarda el visitante en sentir que el contenido ya está disponible.
JPG, PNG o WebP: la respuesta depende de la imagen
JPG suele funcionar bien en fotografías cuando aceptas compresión con pérdida. PNG es práctico cuando necesitas preservar detalles exactos o transparencia sin ese tipo de pérdida, aunque puede producir archivos mayores. WebP permite compresión con o sin pérdida y admite transparencia, por lo que suele ser una alternativa eficiente para publicar imágenes en navegadores modernos.
Pero no existe un formato ganador para todos los casos. La guía de formatos de web.dev recomienda considerar el contenido, la transparencia, la calidad y el peso del archivo. Una ilustración con bordes finos no se evalúa igual que una fotografía llena de texturas.
Reducir dimensiones puede ser tan importante como comprimir
Supón que una imagen mide 4.000 píxeles de ancho y ocupará una columna de 800 píxeles en la pantalla. Publicar el original puede obligar al visitante a transferir y decodificar más información de la necesaria. Preparar tamaños acordes a los usos reales ayuda a evitar ese desperdicio.
En Redimensionar imágenes puedes ajustar anchura y altura; después, Convertir imágenes permite comparar formatos JPG, PNG y WebP. Haz una copia de prueba y examina detalles finos, transparencias y texto pequeño antes de reemplazar el original.
Calidad visual no equivale a porcentaje de compresión
No hay una regla seria que diga “elige siempre 80% y ahorrarás exactamente la mitad”. Las mejoras dependen de la imagen original, sus detalles y la configuración elegida. La pregunta útil es doble: ¿cuánto pesa ahora? ¿sigue viéndose suficientemente bien?
Comprimir imágenes permite experimentar con opciones de calidad y revisar el resultado. Si la nueva versión pesa más o introduce artefactos visibles, descártala. Optimizar no consiste en degradar indiscriminadamente una fotografía.
El detalle que afecta la experiencia: la imagen principal
Google explica que la imagen más importante de una página puede influir en el indicador Largest Contentful Paint (LCP). Por eso no basta con optimizar minucias mientras la portada sigue siendo un archivo gigantesco. Prioriza la imagen principal, sus dimensiones y el modo en que el navegador la descubre. web.dev desarrolla estas recomendaciones.
Los atributos width y height también ayudan a reservar espacio y reducir saltos del diseño mientras carga la imagen, como documenta MDN. Son decisiones de implementación distintas de la simple conversión de formato.
Un punto olvidado: la privacidad de las fotos
Algunas fotografías contienen metadatos como información de cámara, fecha o coordenadas de ubicación, según el formato y el dispositivo. Antes de compartir una imagen que lo amerite, utiliza un lector de metadatos para revisar los campos compatibles. No presupongas que convertir o comprimir garantiza borrar todos los metadatos: debes inspeccionar el archivo final.
Una rutina que sí funciona
- Decide el tamaño real que necesita la web.
- Redimensiona una copia, preservando proporciones.
- Prueba JPG y WebP, o PNG cuando requieras detalles y transparencia.
- Compara peso y apariencia a tamaño real.
- Revisa metadatos si la privacidad importa.
- Sustituye el archivo y mide el sitio de nuevo.
El objetivo no es obtener el archivo más pequeño del mundo. Es cargar más rápido sin sacrificar lo que la imagen necesita comunicar.