Las imágenes pueden mejorar considerablemente una página web: permiten mostrar productos, explicar procesos, presentar proyectos o simplemente hacer que el contenido sea más fácil de comprender.
El problema aparece cuando utilizamos archivos mucho más grandes de lo necesario.
Una fotografía de varios megabytes, una imagen con dimensiones muy superiores al espacio donde será mostrada o decenas de recursos cargándose al mismo tiempo pueden aumentar innecesariamente el peso de una página y afectar su rendimiento.
Por eso, optimizar imágenes para web no significa simplemente comprimirlas.
Una buena optimización combina varios aspectos:
dimensiones → formato → compresión → forma de carga → SEO y accesibilidad.
El objetivo es entregar una imagen con la calidad y dimensiones necesarias utilizando la menor cantidad razonable de recursos.
Veamos cómo hacerlo.
¿Qué significa optimizar imágenes para web?
Optimizar una imagen para web consiste en reducir los recursos necesarios para mostrarla correctamente sin perjudicar innecesariamente su calidad ni su función.
Esto puede implicar:
- reducir sus dimensiones;
- comprimir el archivo;
- elegir un formato adecuado;
- servir diferentes tamaños según el dispositivo;
- decidir cuándo debe cargarse;
- definir correctamente sus dimensiones en la página;
- utilizar nombres y textos alternativos descriptivos.
Por ejemplo, imaginemos una fotografía original de:
4000 × 3000 píxeles
que dentro de nuestra página se muestra aproximadamente a:
800 × 600 píxeles.
Aunque el navegador pueda reducir visualmente la imagen, el usuario podría estar descargando un archivo mucho mayor de lo que realmente necesita.
Optimizarla no consiste únicamente en bajar su calidad.
Podemos empezar utilizando unas dimensiones más apropiadas para su función.
Esta diferencia es importante porque peso y dimensiones no son exactamente lo mismo.
Dos imágenes con las mismas dimensiones pueden tener pesos muy diferentes dependiendo de su contenido, formato y nivel de compresión.
¿Por qué deberías optimizar las imágenes de una página web?
Las imágenes pueden representar una parte importante de los recursos que necesita descargar una página.
Por eso su optimización puede tener efectos sobre diferentes aspectos del sitio.
Reducir el peso de la página
Una página que utiliza varias fotografías de gran tamaño puede terminar transfiriendo varios megabytes de información.
Reducir el peso de esas imágenes puede disminuir la cantidad de datos que necesita descargar el usuario.
Esto resulta especialmente relevante cuando visitamos la web desde una conexión móvil o una red más lenta.
Mejorar los tiempos de carga
Una imagen pesada puede tardar más en descargarse.
Pero no debemos analizar únicamente el peso total.
También importa:
- cuándo se solicita;
- qué prioridad tiene;
- dónde se encuentra;
- qué otros recursos necesita la página;
- qué elemento aparece primero en pantalla.
Por eso la optimización de imágenes debe formar parte de un análisis general de rendimiento.
Mejorar la experiencia en dispositivos móviles
Una imagen diseñada para un monitor grande no necesariamente debe entregarse con las mismas dimensiones a un teléfono.
Las imágenes responsive permiten ofrecer archivos más apropiados según las características del dispositivo y el espacio disponible.
Esto puede evitar que un móvil descargue una imagen mucho más grande de lo necesario.
Reducir el impacto sobre el LCP
Largest Contentful Paint (LCP) mide cuánto tarda en mostrarse el elemento de contenido más grande visible durante la carga inicial.
En muchas páginas ese elemento puede ser:
- una fotografía principal;
- una imagen hero;
- un banner;
- una imagen de producto.
Si ese recurso está mal optimizado, puede contribuir a un LCP deficiente.
Esto no significa que cualquier problema de LCP se resuelva comprimiendo imágenes. También pueden intervenir servidor, CSS, JavaScript, prioridades de carga y otros factores.
Facilitar el SEO de imágenes
La optimización también tiene una dimensión relacionada con buscadores.
Además del rendimiento, podemos ayudar a Google a comprender una imagen mediante elementos como:
- contexto;
- nombre de archivo;
- texto alternativo;
- contenido cercano;
- implementación técnica.
Por eso optimización de imágenes para rendimiento y SEO de imágenes están relacionados, pero no son exactamente lo mismo.
Cómo optimizar imágenes para web paso a paso
Podemos trabajar la optimización siguiendo un orden lógico.
1. Utiliza las dimensiones que realmente necesita la imagen
Antes de pensar en compresión o formatos, revisa las dimensiones.
Supongamos que descargamos una fotografía de un banco de imágenes:
5000 × 3333 px
y la colocamos en un artículo donde nunca supera:
900 px de ancho.
Estamos partiendo de un recurso sobredimensionado.
Podemos generar una versión más adecuada antes de publicarla.
La dimensión correcta dependerá de:
- ubicación de la imagen;
- diseño;
- densidad de pantalla;
- comportamiento responsive;
- tamaño máximo en el que será mostrada.
Por eso tampoco debemos interpretar “redimensionar” como utilizar exactamente el mismo número de píxeles que vemos en pantalla en cualquier situación.
La idea es evitar archivos desproporcionadamente grandes para el uso que tendrán.
2. Elige el formato adecuado
No existe un único formato ideal para todas las imágenes.
Una fotografía, un logo y una ilustración tienen características diferentes.
Entre los formatos habituales encontramos:
- JPEG;
- PNG;
- WebP;
- AVIF;
- SVG.
Por ejemplo, JPEG puede seguir siendo útil para fotografías.
PNG puede ser necesario en determinados gráficos o imágenes donde necesitamos ciertas características, como transparencia.
WebP y AVIF son formatos modernos que pueden ofrecer una compresión eficiente.
SVG resulta especialmente útil para determinados recursos vectoriales, como logos e iconos.
La elección debe responder al contenido y a la implementación, no a la idea de que existe un formato universalmente superior.
3. Comprime la imagen
Después de trabajar dimensiones y formato podemos revisar la compresión.
Existen dos conceptos importantes:
Compresión con pérdida
Reduce información del archivo para conseguir un peso menor. Si aplicamos demasiada, la pérdida de calidad puede hacerse visible.
Compresión sin pérdida
Busca reducir el tamaño conservando la información de la imagen, aunque el ahorro puede ser diferente.
En la práctica, debemos encontrar un equilibrio entre:
calidad visual ↔ peso.
No existe un porcentaje de compresión que funcione igual para todas las imágenes.
Una fotografía llena de detalles puede comportarse de manera diferente a una ilustración sencilla.
Por eso conviene comparar visualmente el resultado.
Si conseguimos reducir considerablemente el peso y la diferencia visual es prácticamente imperceptible para el uso previsto, probablemente hemos encontrado una mejor versión para web.
4. Utiliza imágenes responsive
En una web responsive, el espacio disponible cambia según el dispositivo.
También podemos adaptar las imágenes.
Mediante atributos y elementos como srcset, sizes y <picture>, una web puede ofrecer diferentes versiones y permitir que el navegador seleccione un recurso adecuado según las condiciones.
Conceptualmente podemos tener:
Móvil → imagen pequeña
Tablet → imagen mediana
Escritorio → imagen grande
Esto resulta más eficiente que obligar a todos los dispositivos a descargar siempre el archivo de mayor tamaño.
No es necesario que un responsable de marketing programe esta implementación, pero sí conviene conocer el principio para poder detectarlo durante una auditoría:
una imagen responsive debería intentar entregar un recurso adecuado al espacio donde será utilizada.
5. Utiliza lazy loading cuando corresponda
Lazy loading permite retrasar la carga de determinados recursos hasta que son necesarios o se aproximan al área visible.
Imaginemos un artículo con 20 imágenes.
Cuando el usuario abre la página, quizá solo vea las dos primeras.
No siempre necesitamos descargar inmediatamente las otras 18.
El lazy loading puede ayudar a evitar esa carga inicial innecesaria.
Sin embargo, no deberíamos aplicarlo indiscriminadamente a todas las imágenes.
Una imagen importante que aparece inmediatamente en la parte superior de la página puede necesitar una estrategia diferente, especialmente si interviene en el LCP.
La pregunta no debería ser:
¿Debo utilizar lazy loading?
sino:
¿Qué imágenes pueden esperar y cuáles necesita el usuario inmediatamente?
6. Define correctamente width y height
Reservar las dimensiones que ocupará una imagen ayuda al navegador a conocer cuánto espacio necesita antes de que el archivo termine de cargar.
Esto puede contribuir a evitar desplazamientos inesperados del contenido.
Por ejemplo, sin espacio reservado:
texto → carga imagen → texto baja repentinamente.
Con el espacio previsto:
el diseño reserva el área → carga imagen → la estructura se mantiene.
Esto es relevante para la estabilidad visual y puede relacionarse con Cumulative Layout Shift (CLS).
7. Revisa cómo se sirven las imágenes
En sitios más complejos también debemos considerar cómo llegan los archivos hasta el usuario.
Dependiendo del proyecto pueden intervenir:
- caché;
- CDN;
- transformación automática;
- generación de diferentes tamaños;
- conversión de formatos;
- optimización desde servidor.
No todas las webs necesitan una infraestructura sofisticada.
Un blog pequeño y un ecommerce internacional con miles de imágenes tienen necesidades diferentes.
La solución debe ser proporcional al problema.
¿Qué formato de imagen es mejor para una web?
Cada formato tiene ventajas y limitaciones.
Esta tabla puede servir como punto de partida:
| Formato | Puede ser adecuado para | Consideración |
|---|---|---|
| JPEG | Fotografías | Permite equilibrar calidad y compresión |
| PNG | Gráficos y determinados usos con transparencia | Puede generar archivos pesados según el contenido |
| WebP | Fotografías y gráficos | Formato moderno con buena capacidad de compresión |
| AVIF | Imágenes donde buscamos mayor eficiencia | Conviene revisar el flujo de generación e implementación |
| SVG | Logos, iconos y gráficos vectoriales | No es un sustituto convencional para fotografías |
La elección también puede depender del sistema utilizado para gestionar la web.
Por eso no recomendamos convertir todas las imágenes automáticamente a un formato sin comprobar el resultado.
WebP vs. AVIF: ¿cuál conviene utilizar?
WebP y AVIF son formatos modernos diseñados para ofrecer alternativas eficientes frente a formatos tradicionales en diferentes escenarios.
AVIF puede conseguir archivos muy eficientes en determinados tipos de imágenes, mientras que WebP cuenta con una adopción amplia y puede resultar sencillo de integrar en numerosos flujos de trabajo.
Sin embargo, la decisión no debería basarse únicamente en cuál consigue el archivo más pequeño en una prueba.
También debemos considerar:
- calidad;
- compatibilidad necesaria;
- herramientas disponibles;
- CMS;
- proceso de generación;
- facilidad de mantenimiento.
Incluso podemos utilizar <picture> cuando necesitamos ofrecer diferentes alternativas al navegador.
Para la mayoría de responsables de una web, la pregunta práctica debería ser:
¿Qué formato me permite entregar una buena calidad con un peso razonable y una implementación sostenible?
¿Cuánto debería pesar una imagen para web?
No existe un peso máximo universal que sirva para cualquier imagen.
Una regla como:
“Todas las imágenes deben pesar menos de 100 KB”
puede resultar demasiado simplista.
Consideremos cuatro recursos:
Icono
Puede ser extremadamente ligero.
Miniatura
Probablemente necesita pocas dimensiones.
Fotografía de producto
Necesita suficiente detalle para que el usuario evalúe lo que compra.
Imagen hero
Puede ocupar gran parte de la pantalla y necesitar más resolución.
No tiene sentido exigir exactamente el mismo peso a todos.
El objetivo debería ser:
entregar la menor cantidad razonable de datos manteniendo las dimensiones y calidad necesarias para la función de la imagen.
Si una imagen pesa 2 MB y podemos obtener un resultado visualmente equivalente de 250 KB para el uso que tendrá, existe una oportunidad clara.
Pero perseguir un peso extremadamente bajo deteriorando una imagen fundamental para vender un producto tampoco sería una buena optimización.
¿Cómo comprimir imágenes sin perder demasiada calidad?
La compresión debe evaluarse visualmente.
Un proceso sencillo consiste en comparar:
Archivo original
Peso: 1,5 MB
Versión optimizada A
Peso: 450 KB
Diferencia visual prácticamente imperceptible.
Versión optimizada B
Peso: 150 KB
Aparecen artefactos y pérdida evidente de detalle.
Aunque B sea más ligera, A podría representar un equilibrio más adecuado.
La calidad necesaria también depende de la función.
Una fotografía de producto donde el usuario necesita apreciar materiales requiere un cuidado diferente al de una pequeña imagen decorativa.
Herramientas para comprimir imágenes
Existen diferentes herramientas y procesos para comprimir archivos antes de publicarlos.
Podemos utilizar aplicaciones especializadas, herramientas online o sistemas automáticos integrados en el CMS.
Lo importante no es utilizar una herramienta concreta, sino comprobar:
- peso original;
- peso resultante;
- dimensiones;
- formato;
- calidad visual.
La herramienta es simplemente el medio para conseguir una versión adecuada.
¿Cómo optimizar imágenes para SEO?
Una imagen ligera no está automáticamente optimizada para SEO.
También necesitamos ayudar a buscadores y usuarios a comprender su función.
Utiliza nombres de archivo descriptivos
Un archivo como:
IMG_87492.jpg
no proporciona demasiado contexto.
Podemos utilizar:
zapatillas-running-mujer.webp
cuando describe correctamente la imagen.
Los nombres deberían ser claros y naturales.
No necesitamos convertirlos en una sucesión de keywords.
Por ejemplo:
zapatillas-running-mujer-comprar-zapatillas-running-oferta.webp
no aporta una mejora por repetir términos.
Describe la imagen, no intentes manipular el buscador.
Escribe un alt text útil
El texto alternativo ayuda a describir el contenido o función de una imagen cuando corresponde y tiene un papel importante en accesibilidad.
También puede aportar contexto a los buscadores.
Un buen alt text depende de lo que la imagen representa dentro de la página.
Por ejemplo, para una captura:
Incorrecto
alt="SEO posicionamiento SEO agencia SEO Google SEO"
Mejor
alt="Informe de rendimiento de Google Search Console con clics e impresiones"
La segunda descripción explica qué aparece realmente.
No todas las imágenes necesitan una keyword exacta.
El objetivo principal es describirlas adecuadamente según su contexto.
Coloca la imagen cerca de contenido relacionado
El contexto importa.
Si publicamos un gráfico sobre evolución de tráfico orgánico, debería aparecer cerca del contenido que explica esos datos.
Esto beneficia tanto al usuario como a la interpretación del contenido.
Una imagen aislada sin relación clara con el texto pierde parte de su utilidad.
Asegúrate de que las imágenes puedan descubrirse
La implementación también puede afectar la capacidad de los buscadores para encontrar las imágenes.
Debemos comprobar que los recursos importantes estén correctamente incorporados a la página y sean accesibles para los sistemas que necesitan procesarlos.
En sitios con grandes catálogos visuales también puede tener sentido evaluar mecanismos adicionales de descubrimiento, como sitemaps de imágenes.
No todas las webs necesitan la misma configuración.
Dentro de una estrategia de agencia SEO, la optimización de imágenes debería combinar rendimiento, accesibilidad, contexto e implementación técnica, en lugar de limitarse a cambiar el nombre del archivo y añadir una keyword al alt text.
¿Cómo optimizar imágenes en WordPress?
WordPress puede generar automáticamente diferentes tamaños de una imagen cuando la subimos.
Además, temas y plugins pueden incorporar funciones relacionadas con:
- imágenes responsive;
- lazy loading;
- compresión;
- WebP;
- AVIF;
- caché;
- CDN.
Esto puede facilitar el trabajo, pero también debemos revisar qué está ocurriendo realmente.
Optimiza antes de subir cuando sea posible
Si descargamos una fotografía de 8 MB y 6000 píxeles de ancho, no necesitamos utilizar ese archivo original directamente.
Podemos preparar previamente una versión más apropiada.
Revisa los tamaños que utiliza tu tema
WordPress puede generar varias versiones, pero el tema debe utilizar correctamente la más adecuada.
Si una miniatura termina cargando una imagen enorme, seguimos teniendo un problema aunque WordPress haya generado tamaños alternativos.
Evita acumular plugins que hacen lo mismo
Un plugin para compresión.
Otro para WebP.
Otro para lazy loading.
Otro para caché.
Otro para CDN.
Añadir herramientas sin entender sus funciones puede generar configuraciones duplicadas o conflictos.
Primero identifica el problema.
Después elige la solución.
¿Cómo saber si las imágenes están ralentizando tu web?
No necesitamos adivinar.
Podemos utilizar herramientas de rendimiento para investigar.
Una de ellas es GTmetrix, que permite analizar recursos, métricas y el proceso de carga de una página.
Si sospechamos de las imágenes podemos revisar:
- peso total;
- archivos especialmente grandes;
- dimensiones;
- solicitudes;
- imagen relacionada con el LCP;
- recursos cargados fuera del área visible;
- secuencia de carga.
También podemos complementar el análisis con PageSpeed Insights y las herramientas del navegador.
Supongamos que GTmetrix muestra que una imagen hero pesa 1,7 MB y además es el elemento LCP.
Ahora tenemos una hipótesis mucho más concreta:
¿Podemos reducir dimensiones, utilizar un formato más eficiente, comprimirla o mejorar la forma en que se carga?
Después realizamos el cambio y repetimos la prueba.
Este proceso es más fiable que instalar una herramienta de optimización sin haber identificado el problema.
Errores frecuentes al optimizar imágenes para web
Subir la imagen en sus dimensiones originales
Las fotografías procedentes de cámaras, celulares y bancos de imágenes pueden tener dimensiones mucho mayores de las necesarias.
Revisa siempre el uso final.
Pensar que WebP automáticamente soluciona todo
Convertir una imagen pesada a WebP puede ayudar, pero no resuelve necesariamente:
- dimensiones excesivas;
- mala estrategia de carga;
- demasiadas imágenes;
- problemas de LCP;
- implementación responsive.
El formato es solo una parte de la optimización.
Comprimir hasta perder demasiada calidad
Una imagen extremadamente ligera pero visualmente deteriorada puede perjudicar la experiencia y la percepción de la marca.
Busca equilibrio.
Aplicar lazy loading a todas las imágenes
Los recursos importantes visibles al comienzo de la página pueden necesitar cargarse inmediatamente.
El lazy loading debe utilizarse según la función y ubicación de la imagen.
Utilizar el alt text para repetir keywords
El alt text no es un espacio para introducir una lista de palabras clave.
Describe el contenido o función de la imagen cuando corresponda.
Optimizar únicamente la home
Una página de inicio rápida no significa que todo el sitio esté optimizado.
También debemos revisar páginas representativas como:
- categorías;
- productos;
- servicios;
- landing pages;
- artículos.
Un ecommerce, por ejemplo, puede tener una home bien optimizada y fichas de producto con múltiples fotografías excesivamente pesadas.
Checklist para optimizar una imagen antes de publicarla
Antes de subir una imagen podemos utilizar este proceso:
Antes de publicar
- ¿Las dimensiones son adecuadas?
- ¿Estoy utilizando un formato apropiado?
- ¿La imagen está razonablemente comprimida?
- ¿La calidad visual sigue siendo suficiente?
Durante la implementación
- ¿Necesito diferentes tamaños según el dispositivo?
- ¿La página reserva sus dimensiones?
- ¿Debe cargarse inmediatamente o puede utilizar lazy loading?
- ¿Estoy enviando un archivo mayor de lo necesario?
Para SEO y accesibilidad
- ¿El nombre del archivo es descriptivo?
- ¿Necesita alt text?
- ¿El alt describe correctamente la imagen?
- ¿La imagen aparece cerca de contenido relacionado?
Después de publicar
- ¿Qué peso tiene realmente?
- ¿Está afectando el LCP?
- ¿GTmetrix o PageSpeed detectan algún problema?
- ¿La optimización produjo una mejora medible?
Este último paso es importante.
No debemos asumir que una optimización funcionó: podemos comprobarlo.
Imágenes más ligeras sin sacrificar su función
Optimizar imágenes para web no consiste en conseguir el archivo más pequeño posible.
Una fotografía de producto debe seguir permitiendo apreciar el producto. Una infografía debe continuar siendo legible. Una imagen principal debe conservar suficiente calidad para representar correctamente la marca.
La optimización busca un equilibrio.
Debemos preguntarnos:
¿Estamos entregando más información de la que el usuario necesita para ver correctamente esta imagen?
Si la respuesta es sí, podemos revisar dimensiones, formato, compresión y forma de carga.
Después podemos medir el resultado.
Ese proceso:
medir → optimizar → volver a medir
es más útil que perseguir un peso arbitrario o convertir automáticamente todos los archivos al formato de moda.
Una imagen bien optimizada no es simplemente una imagen que pesa poco.
Es una imagen que cumple su función visual utilizando los recursos necesarios, sin añadir carga innecesaria a la página.