Si tienes un blog de fotografía, una tienda online o una web corporativa, seguramente te has enfrentado a lo mismo: subes imágenes bonitas, con buena resolución, y de repente la página tarda una eternidad en cargar. Los visitantes se impacientan, el rebote aumenta y Google empieza a mirarte con malos ojos. La buena noticia es que optimizar imágenes para web no es complicado, y el impacto en la velocidad de carga es brutal.
En este artículo te cuento todo lo que he aprendido después de años peleándome con servidores, plugins y formatos de archivo. Sin tecnicismos innecesarios, con ejemplos prácticos y pensado para que puedas aplicarlo hoy mismo.
Cuando hablamos de velocidad de carga, las imágenes suelen ser las principales culpables. Según varios estudios, más de la mitad del peso total de una página web promedio corresponde a imágenes. Una sola foto sin comprimir puede pesar 5 MB. Multiplica eso por diez imágenes en un artículo y ya tienes 50 MB que el navegador tiene que descargar. En una conexión móvil normal, eso son varios segundos de espera.
Google lo sabe, y por eso la velocidad de carga es un factor de posicionamiento desde hace años. Además, los Core Web Vitals (especialmente el LCP, Largest Contentful Paint) miden directamente cuánto tarda en mostrarse el elemento más grande de la página, que casi siempre es una imagen. Si tu LCP es malo, tu SEO se resiente.
Pero no todo es SEO. La experiencia del usuario es lo primero. Una web que carga en menos de dos segundos se siente ágil, profesional y agradable. Una que tarda cinco segundos transmite abandono. Y en fotografía, donde la imagen lo es todo, no puedes permitirte eso.
Aquí está una de las decisiones más importantes. No todas las imágenes deben guardarse en el mismo formato. Te explico cuándo usar cada uno:
JPEG: ideal para fotografías con muchos colores y degradados. Es el formato clásico, compatible con todo. Pero no soporta transparencias y su compresión es con pérdida. Úsalo para fotos de paisajes, retratos, productos con fondo complejo.
PNG: perfecto para gráficos, logotipos, iconos y cualquier imagen que necesite fondo transparente. También para capturas de pantalla con texto. El problema es que pesa mucho más que JPEG. No lo uses para fotos normales.
WebP: el formato estrella de Google. Ofrece compresión con y sin pérdida, soporta transparencia y animación, y pesa entre un 25% y un 35% menos que JPEG o PNG con calidad similar. Hoy es compatible con todos los navegadores modernos. Si tu web es nueva, úsalo por defecto.
AVIF: el más moderno. Comprime aún mejor que WebP, especialmente en imágenes con mucho detalle. El soporte ha crecido muchísimo y ya es una opción real. Eso sí, el proceso de conversión puede ser más lento.
Mi recomendación práctica: convierte todas tus fotos a WebP. Si quieres exprimir al máximo, ofrece AVIF con fallback a WebP. Y para logotipos y gráficos vectoriales, usa SVG siempre que puedas.
Mucha gente piensa que comprimir es sinónimo de perder calidad. Y es verdad si lo haces mal. Pero una compresión bien hecha puede reducir el peso un 70% sin que el ojo humano note la diferencia.
La clave está en encontrar el equilibrio. En JPEG, una calidad del 75-85% suele ser suficiente para web. Por debajo del 70% empiezan a aparecer artefactos visibles, sobre todo en zonas de cielo o degradados suaves. En WebP, puedes bajar hasta el 70-75% con resultados excelentes.
Squoosh: gratuita, online, de Google. Arrastras la imagen, ajustas calidad y ves la comparación en tiempo real. Perfecta para pruebas rápidas.
ImageOptim: para Mac. Comprime sin pérdida y con pérdida de forma automática. Muy cómoda.
TinyPNG: online, comprime PNG y JPEG con muy buena calidad. Tiene versión de pago para lotes grandes.
Sharp: si trabajas con Node.js, es una librería brutal para procesar imágenes por lotes.
Un truco: nunca comprimas una imagen ya comprimida. Si tienes el RAW o el archivo original, trabaja desde ahí. Cada recompresión añade artefactos.
Este es el fallo que veo una y otra vez. Subes una foto de 4000 píxeles de ancho y la muestras en un contenedor de 800 píxeles. El navegador tiene que descargar toda la imagen y luego reducirla. Es un desperdicio enorme de ancho de banda.
La regla es simple: sube la imagen al tamaño máximo al que se va a mostrar. Si tu columna de contenido mide 800 píxeles, sube la imagen a 800 píxeles de ancho (o 1600 si quieres soportar pantallas retina, pero no más).
Para pantallas de alta densidad (Retina, 4K), puedes usar el atributo srcset en HTML para ofrecer varias versiones. Así el navegador elige la más adecuada según el dispositivo. Es un poco más de trabajo, pero el ahorro es notable.
En WordPress, plugins como Imagify o ShortPixel hacen esto automáticamente. Generan versiones redimensionadas y las sirven según el tamaño de pantalla.
El lazy loading es una técnica que retrasa la carga de imágenes que no están visibles en pantalla. Solo se descargan cuando el usuario hace scroll y están a punto de aparecer. Esto acelera muchísimo la carga inicial.
Hoy es facilísimo de implementar. En HTML nativo, solo tienes que añadir loading="lazy" a la etiqueta img. Los navegadores modernos lo soportan sin necesidad de JavaScript.
Importante: no apliques lazy loading a la imagen principal (la que se ve al cargar la página). Esa debe cargarse de inmediato, porque afecta al LCP. Para el resto, adelante.
En WordPress, desde la versión 5.5 ya viene nativo. Si usas un tema antiguo, revisa que no tengas plugins duplicados haciendo lo mismo.
Además del lazy loading, considera usar un CDN (Content Delivery Network). Servicios como Cloudflare, BunnyCDN o CloudFront sirven tus imágenes desde servidores cercanos al usuario, reduciendo la latencia. Muchos CDN también ofrecen optimización automática de imágenes.
Optimizar imágenes no es solo cuestión de peso. También importa el SEO. Google no "ve" las imágenes como nosotros, así que necesita pistas textuales.
El atributo alt es fundamental. Describe la imagen de forma concisa y natural. No hagas keyword stuffing. Si tienes una foto de un atardecer en la playa de Cádiz, escribe algo como "Atardecer en la playa de La Caleta, Cádiz". No "atardecer playa Cádiz foto paisaje mar".
El nombre del archivo también cuenta. En lugar de IMG_20240512_1834.jpg, usa atardecer-playa-la-caleta-cadiz.webp. Separa las palabras con guiones, no con guiones bajos.
Y no olvides el texto que rodea la imagen. Google usa el contexto para entender de qué va. Si el artículo habla de fotografía de paisaje, la imagen se beneficia de ese contexto.
Un extra: usa figcaption cuando tenga sentido. Añade información útil y mejora la accesibilidad.
Para cerrar esta parte práctica, te dejo una lista de fallos que veo constantemente:
Subir imágenes directamente de la cámara sin procesar. Pesarán 10 MB y no aportan nada.
Preguntas frecuentes
Depende del uso. Para fotografías, WebP es la mejor opción general por su equilibrio entre calidad y peso, con AVIF como alternativa superior si tu público usa navegadores modernos. Para logotipos, iconos y gráficos con transparencia, usa PNG o SVG. JPEG sigue siendo válido como fallback para navegadores antiguos, pero ya es minoritario.
No hay un número único, pero como referencia: una imagen destacada no debería superar los 150-200 KB. Las imágenes dentro del contenido, entre 50 y 100 KB. Los iconos y elementos pequeños, menos de 20 KB. Si una foto pesa más de 300 KB, probablemente puedas comprimirla más sin perder calidad visible.
No, al contrario. El lazy loading mejora la velocidad de carga, lo que beneficia al SEO. Eso sí, asegúrate de no aplicarlo a la imagen principal (la del LCP), porque retrasaría su carga y empeoraría los Core Web Vitals. Aplícalo solo a imágenes que están fuera de la pantalla inicial.
No es obligatorio, pero ayuda mucho. Los plugins como Imagify, ShortPixel o Smush automatizan la compresión, la conversión a WebP y el redimensionado. Si tienes un blog con muchas imágenes y subes contenido con frecuencia, un plugin te ahorra tiempo y evita olvidos. Si prefieres control total y subes pocas imágenes, puedes hacerlo manualmente sin problema.