Guía para decidir mejor
Cómo optimizar imágenes sin perder calidad visible
La imagen correcta no es siempre la de menor peso: conserva detalle útil, entrega tamaños adecuados y compara el antes y el después.
Optimizar imágenes sin perder calidad visible no significa aplicar la compresión máxima. Empieza por entregar dimensiones acordes al espacio real, escoger un formato adecuado y comparar el resultado en los dispositivos donde tus clientes verán la web. Guarda siempre los originales antes de procesar por lotes.
Encuentra la imagen que importa
En DevTools o PageSpeed identifica archivos grandes y la imagen principal de la página. Anota dimensiones mostradas, dimensiones descargadas y peso; una foto de 3000 píxeles servida en una tarjeta pequeña es candidata a redimensionar. No optimices todo por igual: en una tienda, las fotografías de producto necesitan detalle para ampliar; un icono y una foto tienen requisitos distintos. La guía de diagnóstico general ayuda a confirmar si las imágenes son realmente el cuello de botella.
Un proceso seguro de cinco pasos
- Conserva originales y prueba una muestra. Elige fotografía, imagen con texto y producto; toma nota de su uso y comprueba que puedes restaurarlas.
- Sirve tamaños apropiados. WordPress genera variantes y puede usar srcset; verifica en el navegador qué archivo descargan móvil y escritorio. web.dev explica las imágenes responsive.
- Elige formato según el contenido. Compara JPEG, WebP o AVIF para fotografía; conserva PNG cuando necesitas transparencia y SVG para gráficos vectoriales seguros y controlados. La compatibilidad de tu flujo de trabajo y las copias de seguridad también cuentan.
- Comprime con inspección visual. Compara a tamaño de uso y ampliado en móvil y escritorio. Revisa bordes, texto, piel, degradados y detalles de producto. Si aparece artefacto visible, sube la calidad; no persigas un porcentaje fijo. Google recomienda evitar la sobrecompresión.
- Verifica publicación. Comprueba que URL y miniaturas siguen cargando, que el formato alternativo tiene respaldo donde haga falta y que las páginas no muestran imágenes borrosas.
Ejemplo: una foto de 2400 píxeles usada a 600 puede tener una variante adecuada en WordPress; entregar la original a cada móvil desperdicia transferencia. Pero si el cliente puede ampliar un producto, conserva también una versión de detalle. La calidad se juzga en el contexto de uso, no solo en el tamaño del archivo.
Accesibilidad y carga inicial
Escribe un alt que describa la información de la imagen, no la palabra clave repetida. Mantén dimensiones declaradas para evitar saltos de diseño y no difieras automáticamente la imagen principal visible al abrir la página. Tras el cambio, revisa la experiencia móvil. El tutorial anterior de Imagify trata una herramienta concreta; esta guía sirve para decidir el método antes de instalarla. Si la lentitud persiste, comparte las URLs y mediciones para valorar el siguiente paso.