Cuando una web carga despacio, lo más habitual es que la culpa la tengan las imágenes. Una foto de cámara subida tal cual, un banner exportado en PNG o una galería que descarga cuarenta fotos de golpe pueden pesar más que todo el resto de la página junto. Y la imagen principal suele ser, además, el elemento que el navegador cuenta para medir lo rápido que se siente la carga.
Este artículo trata de rendimiento: cuánto pesan las imágenes, cuándo se cargan y cómo evitar que la página se mueva mientras lo hacen. No es lo mismo que el SEO de imágenes (texto alternativo, nombres de archivo), que es otro tema.
WebP y AVIF frente a JPEG y PNG
JPEG funciona bien para fotos y PNG para gráficos con transparencia, pero ambos son más pesados que las alternativas modernas. WebP comprime mejor que JPEG y PNG y admite transparencia. AVIF suele comprimir todavía más, aunque tarda más en generarse. Los navegadores actuales soportan los dos.
Para logotipos, iconos e ilustraciones sencillas, usa SVG: pesa muy poco y se ve nítido a cualquier tamaño. Si necesitas cubrir navegadores antiguos, el elemento picture permite ofrecer AVIF o WebP y dejar un JPEG de reserva. Y no te pases con la compresión: una calidad demasiado baja se nota en degradados y bordes, y el ahorro extra casi nunca compensa.
Dimensiones correctas y srcset
El error más frecuente es servir una imagen de 4000 píxeles de ancho para un hueco que en pantalla ocupa 600. El navegador la descarga entera y la reduce al mostrarla. La regla sencilla: calcula el ancho máximo al que se verá y, para pantallas de alta densidad, duplícalo. Redimensiona antes de subir.
Como una misma imagen se ve más pequeña en móvil que en ordenador, srcset permite ofrecer varias versiones (por ejemplo, de 400, 800 y 1200 píxeles) y dejar que el navegador elija la que necesita. Se acompaña de sizes, que le dice qué ancho ocupará la imagen en cada tamaño de pantalla. Sin sizes, el navegador asume que ocupa todo el ancho y suele escoger una versión más grande de la necesaria.
Carga diferida (lazy loading)
La carga diferida consiste en no descargar una imagen hasta que el visitante está a punto de verla al hacer scroll. Hoy se activa con un atributo nativo, loading="lazy", sin librerías extra. Es muy útil para imágenes que quedan lejos del inicio de la página: galerías, listados de productos largos, secciones inferiores.
El error clásico es aplicarlo a todo. La imagen principal (la del banner o la cabecera, la primera que se ve) no debe cargarse en diferido: si la difieres, el navegador la deja para más tarde justo cuando más prisa hay. Esa imagen debe cargar cuanto antes; muchas veces conviene marcarla con fetchpriority="high". Lo mismo vale para cualquier imagen visible sin hacer scroll.
width y height: evita que la página dé saltos
Si una imagen no declara sus dimensiones, el navegador no sabe cuánto espacio reservarle hasta que se descarga. Cuando llega, empuja el texto hacia abajo y el contenido da un salto. Es lo que mide el indicador CLS (cambio acumulado de diseño), uno de los Core Web Vitals, y resulta muy molesto: pulsas un botón y justo se mueve.
La solución es poner los atributos width y height con las dimensiones reales de la imagen. Con ellos el navegador calcula la proporción y reserva el hueco antes de descargarla. Si tu CSS la hace adaptable (max-width: 100% y height: auto), seguirá escalándose bien en cualquier pantalla.
Cómo comprobarlo
Abre las herramientas de desarrollo del navegador, ve a la pestaña Red y filtra por imágenes: verás el tipo, el peso transferido y cuándo se pide cada una. Desde la terminal, curl -I sobre la URL de una imagen te muestra su content-type y su content-length. PageSpeed Insights o Lighthouse avisan de imágenes demasiado grandes, de formatos mejorables y te indican cuál es el elemento principal de la carga. Si ahí aparece con loading="lazy", ya sabes qué corregir.
Preguntas frecuentes
¿Tengo que eliminar mis JPEG y PNG?
No hace falta eliminarlos, pero conviene servir WebP o AVIF por defecto. Si quieres cubrir navegadores muy antiguos, conserva el JPEG o PNG como reserva dentro de picture.
¿Puedo poner lazy loading en todas las imágenes?
No. Úsalo en las que están fuera de la primera pantalla. Las que se ven nada más abrir la página, sobre todo la imagen principal, deben cargarse de forma normal y con prioridad.
¿Esto es lo mismo que el SEO de imágenes?
No. Aquí hablamos de peso, tiempos de carga y estabilidad visual. El SEO de imágenes se ocupa de que los buscadores entiendan qué muestran: texto alternativo, nombres de archivo, contexto. Ayudan a objetivos distintos y conviene cuidar los dos.