Para que las imágenes no ralenticen tu web, usa formatos modernos como WebP o AVIF, redimensiónalas al tamaño real al que se van a mostrar, comprímelas con una calidad razonable y cárgalas de forma inteligente: la principal, con prioridad; las demás, solo cuando el usuario se acerca a ellas. Con estas cuatro medidas, una página puede pasar a pesar una fracción de lo que pesaba, sin que nadie note la diferencia de calidad.
Por qué las imágenes son el primer sospechoso
En la mayoría de webs, las imágenes son lo que más pesa con diferencia. Una foto sacada con un móvil actual puede ocupar varios megas; si la subes tal cual a la portada, cada visitante tiene que descargarla entera, aunque se muestre en un hueco de unos pocos cientos de píxeles.
Eso afecta a tres cosas:
- La experiencia del usuario, sobre todo en el móvil y con mala cobertura.
- El posicionamiento en Google, que tiene en cuenta la velocidad a través de las Core Web Vitals.
- Las conversiones: cuanto más tarda una página, más gente se va antes de verla.
Si te suenan a chino las Core Web Vitals, aquí las tienes explicadas sin tecnicismos.
Qué formato usar: guía rápida
| Formato | Para qué | Ventajas | Inconvenientes |
|---|---|---|---|
| AVIF | Fotos y gráficos | Suele ser el que más comprime con buena calidad | Codificar es más lento; algunas herramientas antiguas no lo admiten |
| WebP | Fotos y gráficos | Mucho más ligero que JPG y PNG, compatible con todos los navegadores actuales | Algo menos eficiente que AVIF |
| JPG | Fotos | Universal | Pesa más a igual calidad |
| PNG | Gráficos con transparencia, capturas | Sin pérdida de calidad | Muy pesado para fotografías |
| SVG | Logotipos, iconos, ilustraciones sencillas | Vectorial: nítido a cualquier tamaño y muy ligero | No sirve para fotos |
Nuestra recomendación práctica: SVG para logotipos e iconos; AVIF o WebP para todo lo demás, con JPG como respaldo si tu sistema lo necesita. Y nunca PNG para una fotografía.
El tamaño importa (más que el formato)
El error más habitual no es el formato, sino subir imágenes enormes. Si el hueco donde se muestra la foto tiene 800 píxeles de ancho, no tiene sentido subir una de 4.000.
Algunas referencias orientativas:
- Imagen de cabecera a ancho completo: entre 1.600 y 2.000 píxeles de ancho suele ser suficiente.
- Imágenes dentro del contenido: al ancho de la columna de texto, con margen para pantallas de alta densidad.
- Miniaturas y tarjetas: unos pocos cientos de píxeles.
Lo ideal es ofrecer varias versiones de cada imagen y dejar que el navegador elija la adecuada según la pantalla. Eso se consigue con los atributos srcset y sizes en HTML. WordPress lo hace automáticamente con las imágenes que subes a la biblioteca de medios, siempre que el tema lo respete.
Compresión: el punto justo
Comprimir es eliminar información que el ojo apenas percibe. Una calidad intermedia suele ser indistinguible del original en pantalla y pesa muchísimo menos. Prueba, compara y quédate con el ajuste más bajo que no notes.
Herramientas útiles:
- Squoosh, gratuita y desde el navegador, para comparar formatos y calidades lado a lado.
- Plugins de optimización en WordPress que convierten a WebP o AVIF y comprimen al subir.
- Procesos automáticos en webs a medida, que generan todas las versiones al publicar.
Cómo cargar las imágenes sin bloquear la página
Carga diferida para lo que está abajo
Con el atributo loading="lazy", el navegador no descarga una imagen hasta que el usuario se acerca a ella al hacer scroll. Ideal para galerías, artículos largos y fichas de producto.
Prioridad para la imagen principal
La imagen grande de la parte superior (la que suele determinar el LCP, el tiempo en que se muestra el contenido principal) no debe llevar carga diferida. Al contrario: conviene indicarle al navegador que es importante con fetchpriority="high". Es un error muy común aplicar «lazy» a todas las imágenes, incluida la de cabecera, y empeorar justo lo que se quería mejorar.
Ancho y alto siempre declarados
Indica width y height en cada imagen. Así el navegador reserva el hueco antes de descargarla y evitas que el contenido «salte» mientras carga, algo que molesta mucho al usuario y que Google mide.
No olvides el texto alternativo
El atributo alt describe la imagen para personas que usan lectores de pantalla y para los buscadores. Escribe lo que se ve y su función, sin rellenarlo de palabras clave: «Cocina reformada con encimera de madera y azulejo blanco» es mucho mejor que «reformas cocinas Salamanca baratas». Es una cuestión de accesibilidad web y, de paso, ayuda a tu SEO.
Lista rápida para revisar tu web
- ¿Hay fotos en PNG que deberían ser WebP o AVIF?
- ¿Se suben imágenes mucho más grandes de lo que se muestran?
- ¿Las imágenes de abajo usan carga diferida?
- ¿La imagen principal se carga con prioridad y sin «lazy»?
- ¿Todas tienen ancho, alto y texto alternativo?
- ¿Qué dice PageSpeed Insights sobre tus imágenes?
En resumen
Formatos modernos, tamaño justo, compresión razonable y carga inteligente: con eso, las imágenes dejan de ser el lastre de tu web y siguen luciendo igual de bien. En nuestros proyectos de desarrollo web a medida todo este proceso es automático, para que tú solo tengas que subir la foto. Si tu web va lenta y sospechas de las imágenes, hablamos.
¿Hablamos?