Imágenes web optimizadas sin perder calidad editorial
Prepara imágenes web con menos peso y conserva el detalle que necesita el lector. Compara compresión, tamaño y estabilidad en móvil y computadora.
Comprimir una imagen sirve si el lector todavía puede ver lo que necesita. Una foto de producto no requiere la misma revisión que una captura con texto. Compara el detalle y la carga en el tamaño donde aparecerá la imagen antes de decidir qué archivo publicar.
Google evalúa la carga, la interactividad y la estabilidad de la página. web.dev documenta LCP, INP y CLS, mientras Google Search Central explica cómo presentar contenido para personas y buscadores. Usa esas referencias para revisar la publicación de las imágenes y comprueba también su calidad en pantalla. Reducir el archivo no debe volver ilegible la información que aporta.
Conserva el detalle que justifica usar la imagen
Revisa la imagen dentro de la página. El visitante debe poder leer el contenido, verla sin una espera innecesaria y continuar sin que su aparición desplace lo que estaba usando. Una compresión aceptable fuera del sitio puede resultar insuficiente en móvil.
Describe qué debe mostrar cada imagen antes de prepararla. Diseño y contenido necesitan acordar qué detalle conservará desarrollo al servirla en distintos tamaños.
Las imágenes forman parte de las páginas web que convierten cuando ayudan a entender la oferta. Desde contacto puedes contarnos qué imágenes o capturas necesitas publicar y qué problemas observas al cargarlas.
Compara el archivo original y su versión comprimida en la misma zona de la foto. Esta captura de Squoosh usa una imagen de muestra y WebP con calidad 75. El ahorro que muestra pertenece a ese ejemplo; revisa el detalle de tus propias imágenes antes de exportarlas.
Qué revisar antes de cambiar todas las imágenes
Comprueba la imagen como parte de la tarea del visitante:
- Identifica qué explica la imagen y si ayuda al objetivo de la página.
- Colócala donde responde una pregunta del lector.
- Revisa legibilidad, carga, accesibilidad y los controles que aparecen cerca.
- Observa la página publicada antes de rediseñar el componente completo.
Asigna quién revisará la calidad editorial y quién comprobará la carga. Fija una fecha para comparar el archivo publicado con el original, en móvil y computadora, antes de aplicar la misma configuración a otras imágenes.
Revisa el efecto en el uso de la página
Además de comprobar la carga y la estabilidad, observa estas señales del recorrido:
- Tasa de conversión de la página con las imágenes publicadas
- Scroll en esa página
- Clics en el CTA de la página
- Errores de formulario durante el recorrido
Las cuatro cifras describen el uso de la página, no el peso de una imagen. Léelas por separado y contrástalas con la carga observada. Un cambio de conversión o un error de formulario requiere investigar su causa antes de atribuirlo a la compresión.
También conviene comprobar si la imagen mueve el contenido al aparecer. En este ejemplo de la documentación de Google, DevTools señala imágenes sin tamaño como causa de desplazamientos. Define ancho y alto para que el navegador reserve su espacio durante la carga.
Problemas que la compresión no resuelve
Comprueba también lo que la página explica y cómo funciona en móvil:
- Usar imágenes cuidadas en una página que deja dudas sobre la oferta.
- Pedir datos sin explicar antes por qué hacen falta.
- Revisar las imágenes solo en computadora cuando el cliente usa móvil.
Prueba primero una imagen que presente un problema visible y compara la página antes y después. Conserva el original y evita cambiar al mismo tiempo todo el diseño, el contenido y la medición.
Compara el original y la versión publicada
Escoge una imagen de una página de servicio y guarda su archivo original. Prepara una versión, compárala en la misma zona y comprueba la carga en la página. Anota qué detalle necesitas conservar, quién aprobará el resultado y cuándo revisarás la versión móvil.
Consulta Core Web Vitals de Google y web.dev Web Vitals para revisar carga y estabilidad. Google Search Central aporta criterios de publicación. Contrasta esas comprobaciones con la legibilidad de tus propias imágenes.
Preguntas frecuentes sobre imágenes web optimizadas
¿Qué imagen conviene revisar primero?
Elige una que ayude a explicar la oferta o la tarea principal de la página. Guarda su versión actual y comprueba si el detalle que aporta se entiende en pantalla antes de cambiar la configuración del resto.
¿Quién decide si la imagen conserva suficiente calidad?
Diseño y contenido deben revisar lo que el lector necesita distinguir; desarrollo comprueba cómo se sirve y carga. Asigna quién aprueba el archivo publicado y una fecha para comprobarlo dentro de la página.
¿La tasa de conversión prueba que la imagen mejoró?
Úsala como una señal del recorrido, con la misma definición antes y después. Compárala con la revisión de carga y legibilidad. La cifra por sí sola no permite atribuir el cambio a una imagen.
¿Qué parte del proceso puedo automatizar?
Las pruebas repetibles y la recolección de datos pueden automatizarse. Una persona debe comprobar si una foto o captura mantiene la información que necesita el lector y si ayuda a completar la tarea.
Qué estrategia de imágenes equilibra calidad y velocidad
Compara formatos modernos responsivos con exportación manual tradicional y optimización automática sin dirección editorial.
Desliza la tabla hacia los lados para comparar las tres opciones.
| Criterio de evaluación | Opción sugeridaAVIF/WebP responsivoVariantes por ancho, formato moderno, dimensiones reservadas y fallback según necesidad. | JPEG/PNG manualUna o pocas exportaciones preparadas a mano para cada uso editorial. | Optimización automática únicaUn CDN transforma el original sin variantes ni criterio editorial específico por contexto. |
|---|---|---|---|
| Peso transferidoReduce bytes sin degradar el propósito visual de la imagen. | 5 de 5 para este casoFormatos modernos y tamaños ajustados evitan enviar píxeles innecesarios. | 2 de 5 para este casoJPEG puede ser razonable en fotografía, pero PNG pesado es frecuente en usos equivocados. | 4 de 5 para este casoEl CDN comprime bien, aunque una sola dirección puede servir tamaños inadecuados. |
| Calidad editorialConserva detalle, composición y legibilidad relevantes para cada ubicación. | 5 de 5 para este casoPermite ajustar recorte, calidad y densidad para hero, tarjeta y móvil. | 4 de 5 para este casoLa revisión manual ofrece control directo sobre cada exportación. | 3 de 5 para este casoLa conversión automática puede conservar calidad técnica sin cuidar lo que muestra el recorte. |
| Estabilidad visualReserva espacio y evita desplazamientos al cargar. | 5 de 5 para este casoDimensiones o aspect-ratio conocidos permiten reservar el área antes de descargar. | 4 de 5 para este casoTambién es estable si cada archivo declara ancho y alto correctamente. | 4 de 5 para este casoEl CDN no evita CLS por sí solo; la plantilla aún debe reservar dimensiones. |
| CompatibilidadEntrega una imagen soportada sin sacrificar mejoras modernas. | 5 de 5 para este casopicture o negociación de contenido puede ofrecer formatos y fallback apropiados. | 5 de 5 para este casoJPEG y PNG tienen soporte universal, con menor eficiencia en varios escenarios. | 4 de 5 para este casoDepende de la detección y configuración correctas del proveedor. |
| MantenimientoEsfuerzo para producir, almacenar y actualizar variantes. | 3 de 5 para este casoLa automatización de builds o CDN reduce trabajo después de definir la política. | 2 de 5 para este casoCada cambio exige nuevas exportaciones y control manual de nombres y tamaños. | 5 de 5 para este casoSubir un original es simple, pero ofrece menos control sobre resultados por contexto. |
Lo más reciente
¿Rediseñar tu sitio web o mejorarlo por etapas? Guía para decidir
Cómo elegir una agencia de desarrollo web: 15 preguntas clave
Roadmap de crecimiento digital para 90 días
Casos de estudio que convierten confianza en ventas
Pricing y paquetes de servicios en la web