Optimizar imágenes web consiste en servir el archivo adecuado, con dimensiones y compresión ajustadas, sin perder información visual necesaria. También implica describir su función, reservar espacio en la página y decidir cuándo debe cargarse. No existe un peso máximo universal que sirva para todas las imágenes.
Empieza por las imágenes que más afectan a la carga y a la comprensión: la principal de la página, fotografías de productos y archivos grandes. Después revisa el conjunto en móvil y comprueba que la mejora no ha introducido desenfoque, recortes o saltos de contenido.
1. Ajusta las dimensiones al espacio real
Una fotografía de cámara puede tener muchos más píxeles de los necesarios para una tarjeta pequeña. Averigua el tamaño al que se muestra y prepara versiones adecuadas para los distintos dispositivos. Evita ampliar un archivo pequeño hasta que pierda definición.
Los atributos srcset y sizes permiten ofrecer alternativas para que el navegador elija. Revisa el resultado del gestor y la plantilla: disponer de varias versiones no ayuda si la página siempre solicita la más pesada.
Como ejemplo de trabajo, una imagen que se muestra a 800 píxeles de ancho podría necesitar una variante de mayor densidad para algunas pantallas. No significa que debas entregar siempre un original de 5.000 píxeles a todos los visitantes.
2. Elige el formato según el contenido
- WebP o AVIF: opciones que conviene probar para reducir el peso de fotografías y otras imágenes rasterizadas, comprobando calidad y compatibilidad del sistema.
- JPEG: puede seguir siendo adecuado para fotografías según el flujo de publicación.
- PNG: útil cuando necesitas ciertas características como transparencia o una representación sin pérdidas, aunque puede resultar pesado.
- SVG: apropiado para gráficos vectoriales, como algunos iconos y logotipos. Utiliza archivos de origen fiable y un tratamiento seguro.
La extensión no decide por sí sola qué archivo será mejor. Compara versiones equivalentes a tamaño real. Google recoge formatos compatibles y prácticas de presentación en su guía de SEO de imágenes.
3. Comprime y revisa el resultado
Squoosh permite comparar la imagen y ajustar la compresión desde el navegador. Haz pruebas con una copia, conserva el original y comprueba detalles como texto, bordes, pieles o degradados.
Una reducción grande de peso no compensa que una ficha de producto pierda detalles importantes. El objetivo es encontrar un equilibrio adecuado para la función de la imagen, no lograr el archivo más pequeño a cualquier precio.
Registra peso y dimensiones antes y después. Si una imagen apenas cambia, quizá el mayor problema esté en el tamaño servido, en la cantidad de recursos o en otra parte de la página.
4. Escribe el texto alternativo según su función
El atributo alt transmite la información necesaria cuando la imagen no se percibe visualmente. Describe lo relevante en ese contexto, sin convertirlo en una lista de keywords. Si muestra un producto, pueden importar el modelo, color o una característica visible.
La guía de imágenes informativas de W3C explica que la alternativa debe comunicar el significado. Para una imagen puramente decorativa, suele corresponder un alt="", como recoge su guía de imágenes decorativas. No todas las imágenes necesitan una descripción extensa.
Utiliza además nombres de archivo comprensibles y texto cercano relacionado. No renombres masivamente imágenes ya publicadas sin valorar enlaces y referencias existentes.
5. Reserva espacio y revisa la carga diferida
Definir dimensiones o una relación de aspecto ayuda a reservar el espacio de la imagen y evitar que el contenido se desplace cuando llega. Comprueba que la proporción corresponde al archivo y que el diseño sigue adaptándose a móvil.
La carga diferida puede retrasar imágenes que están fuera de la vista inicial. No debe aplicarse indiscriminadamente a la imagen principal que el usuario necesita ver al entrar. La documentación de web.dev sobre lazy loading explica esta distinción.
Cómo aplicarlo en WordPress
- Conserva una copia de los originales antes de cambios masivos.
- Redimensiona y comprime las nuevas imágenes antes de subirlas.
- Revisa qué tamaños genera WordPress y cuál utiliza la plantilla.
- Comprueba si el alojamiento o un plugin ya realiza conversión o compresión.
- Evita superponer sistemas que transformen los mismos archivos sin control.
- Prueba varias páginas antes de extender la configuración al sitio completo.
No instales un plugin solo por una puntuación. Define qué problema debe resolver y verifica compatibilidad, recuperación de originales y coste antes de activarlo.
Cómo comprobar si la optimización funciona
Compara la misma página antes y después con condiciones similares. Revisa qué archivo descarga realmente el navegador, su peso, el tiempo de carga y la estabilidad visual. Una captura aparentemente correcta no confirma que se esté sirviendo la versión optimizada.
Combina herramientas de rendimiento con una revisión manual en móvil. Las mediciones pueden variar por conexión, servidor y otros recursos; no atribuyas toda diferencia a una sola imagen.
Preguntas frecuentes
¿Cuánto debe pesar una imagen web?
Depende de dimensiones, contenido y función. Establece un presupuesto de peso para la página y compara opciones, en lugar de aplicar la misma cifra a un icono y a una fotografía principal.
¿Optimizar imágenes garantiza mejores posiciones?
No. Puede mejorar la experiencia y ayudar a interpretar el contenido, pero el posicionamiento depende del conjunto de la página y del sitio.
Si necesitas recursos, consulta nuestros bancos de imágenes gratuitas. Si el problema afecta al conjunto del sitio, una auditoría SEO ayuda a priorizar las correcciones.
