Las imágenes son, casi siempre, lo que más pesa de una web. Y una web cargada de imágenes pesadas va lenta, y una web lenta pierde visitas antes de mostrarse. La buena noticia es que optimizar las imágenes es de las mejoras más fáciles y de las que más velocidad ganan por menos esfuerzo. No hace falta ser técnico, solo saber qué formato usar, qué tamaño y con qué herramienta. Vamos a ello, con cabeza y sin pelearte con tecnicismos que no necesitas.
Por qué el peso de las imágenes manda
Cuando alguien abre tu web, el navegador tiene que descargar todo lo que hay en la página, y las imágenes suelen ser, con diferencia, lo más pesado. Una sola foto sin optimizar puede pesar más que todo el resto de la página junta. Por eso las imágenes son la causa número uno de webs lentas, y optimizarlas, la victoria más rápida en velocidad.
El peso de las imágenes afecta directamente a lo que tu cliente nota: cuánto tarda en aparecer el contenido principal de la página, que es justo una de las métricas que Google mide y que más pesa en móvil. Una imagen grande y pesada en la cabecera retrasa toda la carga, y esos segundos de más se traducen en gente que se va. Lo vemos al hablar de cómo leer PageSpeed Insights y de por qué un WordPress va lento.
Y hay un error tan común como fácil de evitar: servir una imagen gigante en un hueco pequeño. Subes una foto de tres mil píxeles de ancho, sacada de la cámara o el móvil, y la pones en un espacio de la web de trescientos. El navegador descarga la imagen enorme entera y luego la encoge para mostrarla, desperdiciando todo ese peso para nada. Como referencia, una imagen rara vez necesita más de unos mil novecientos píxeles de ancho para una pantalla grande, y bastante menos para móvil. Ajustar el tamaño antes de subirla es de lo que más peso ahorra, y casi nadie lo hace.
Qué formato usar según el caso
Aquí está lo que ninguna guía te explica con claridad: el formato correcto depende del tipo de imagen. No hay un formato mejor para todo, hay uno mejor para cada caso. Este es el criterio.
Para una foto, una imagen con muchos colores y detalle, usa WebP o AVIF. Son formatos modernos que comprimen mucho mejor que el clásico JPEG, ahorrando en torno a un 25 o 30 % de peso con la misma calidad visible. WebP está soportado en todas partes y es la opción segura; AVIF comprime aún más pero tiene sus matices, que veremos al final.
Para un logo, un icono o un dibujo de líneas, lo ideal es SVG, un formato que no se pixela nunca por mucho que se amplíe y que pesa muy poco, porque es un dibujo, no una foto. Si tu logo es un SVG, se verá nítido en cualquier pantalla y ocupará una miseria. Es el gran olvidado de las guías de optimización.
Para una imagen que necesita fondo transparente, como un logo recortado sobre cualquier color, usa PNG o, mejor, WebP, que también admite transparencia y pesa menos que el PNG. El PNG de toda la vida funciona, pero pesa más, así que si puedes pasarlo a WebP, mejor.
La regla práctica: fotos a WebP o AVIF, logos e iconos a SVG, transparencias a WebP. Con ese criterio aciertas en casi todos los casos y evitas el error habitual de meterlo todo en JPEG o, peor, en PNG pesados.
Cómo convertir y comprimir sin perder calidad
Sabido el formato, toca convertir las imágenes que ya tienes y comprimir las nuevas. Hay dos caminos según cuántas imágenes manejes.
Para imágenes sueltas, a mano, la mejor herramienta gratuita es Squoosh, una web donde arrastras la imagen, eliges el formato de salida como WebP o AVIF, ajustas la compresión viendo el antes y el después en pantalla, y descargas. Es visual, gratis y te deja ver cuánta calidad pierdes, que casi siempre es ninguna apreciable. Otras opciones para comprimir rápido son TinyPNG o iLoveIMG, con sus límites de imágenes por tanda en la versión gratuita.
Para una web con muchas imágenes, sobre todo en WordPress, lo cómodo es un plugin que convierta y comprima automáticamente todo lo que subes, como ShortPixel, Imagify, Smush o EWWW. Lo instalas, lo configuras una vez para que sirva las imágenes en WebP, y se encarga de optimizar lo nuevo y, normalmente, también lo viejo de golpe. Tienen versiones gratuitas con un límite mensual de imágenes que para una pyme suele bastar.
El ahorro es real y notable. Pasar las fotos a WebP bien comprimido recorta una parte grande del peso de la página, y eso se nota en la velocidad de carga sin que el visitante perciba pérdida de calidad. Comprimir bien no es estropear la imagen, es quitarle el peso que el ojo no ve. Si lo haces manual con Squoosh, comprueba el resultado; si lo haces con plugin, déjalo en una compresión media, que da el mejor equilibrio entre peso y calidad.
Lazy load, y la imagen que no debes cargar perezosa
El lazy load, o carga diferida, es una técnica que hace que las imágenes se carguen solo cuando el usuario va a verlas, al bajar por la página, en lugar de todas de golpe al abrir. Acelera mucho la carga inicial, porque la página no descarga de entrada las imágenes que están más abajo y que quizá ni se lleguen a ver. Y la buena noticia es que WordPress ya lo aplica solo, de forma nativa, en las versiones modernas, así que normalmente no tienes que hacer nada.
Pero hay una excepción importante que casi nadie cuenta, y que si se ignora empeora justo lo que se quería mejorar: la imagen principal de la cabecera no debe llevar lazy load. Esa imagen grande que se ve nada más abrir, la primera que el usuario percibe, tiene que cargar cuanto antes, porque es la que marca la sensación de velocidad y la métrica que Google mide al respecto. Si le aplicas carga diferida, le estás diciendo al navegador que la cargue «con calma», y el resultado es que la página parece tardar más en aparecer.
Así que el criterio es: lazy load sí para todas las imágenes que están más abajo, pero no para la imagen principal de arriba, que conviene cargar con prioridad. WordPress suele gestionarlo bien por defecto, pero si has tocado la configuración o usas un plugin de optimización, comprueba que la imagen de cabecera no esté con carga diferida. Es un detalle pequeño con un efecto grande en cómo de rápida parece tu web.
Cuándo no merece la pena pelearse con AVIF
AVIF es el formato que más comprime, mejor incluso que WebP, así que la tentación es pasarlo todo a AVIF y listo. Pero conviene saber cuándo no merece la pena complicarse, porque a veces el esfuerzo no compensa la ganancia.
AVIF tiene dos pegas. Una, que aunque su soporte ya es muy amplio, todavía hay algún navegador o situación donde no se muestra, así que para curarte en salud habría que servir AVIF con una alternativa en WebP por debajo, lo que añade complejidad técnica. Dos, que convertir a AVIF consume más recursos del servidor, y en hostings modestos eso puede dar guerra. La diferencia de peso entre un WebP bien comprimido y un AVIF, además, no siempre justifica el lío.
Por eso, para la mayoría de webs de pyme, WebP es la opción sensata: comprime de maravilla, se ve en todas partes sin alternativas, y es fácil de generar. AVIF tiene sentido si exprimes el rendimiento al máximo, tienes muchas imágenes pesadas y cuentas con quien lo configure bien con su alternativa. Pero si te estás peleando con AVIF para ahorrar un poco más de peso sobre un WebP que ya iba bien, probablemente estás invirtiendo esfuerzo donde no compensa. Mejor un WebP bien hecho en toda la web que un AVIF a medias que falla en algún navegador.
Preguntas frecuentes
¿Qué es mejor, WebP o JPG? WebP, para casi todo. Comprime en torno a un 25 o 30 % mejor que JPEG con la misma calidad visible, así que tus fotos pesan menos y la web va más rápida. Y está soportado en todos los navegadores actuales. El JPEG sigue funcionando, pero si puedes servir tus imágenes en WebP, ganarás velocidad sin que el visitante note pérdida de calidad. Es de las mejoras más fáciles.
¿AVIF o WebP? AVIF comprime algo más que WebP, pero es más complejo de servir bien y consume más recursos al generarlo. Para la mayoría de webs, WebP es la opción sensata: comprime de sobra, se ve en todas partes y es fácil. AVIF tiene sentido si exprimes el rendimiento al máximo y tienes quien lo configure con una alternativa por debajo. Si dudas, WebP bien hecho gana al AVIF a medias.
¿Cómo convierto mis imágenes a WebP? Para imágenes sueltas, con Squoosh: arrastras la imagen, eliges WebP, ajustas la compresión viendo el resultado y descargas. Para una web con muchas, en WordPress un plugin como ShortPixel, Imagify, Smush o EWWW convierte y sirve todo en WebP automáticamente. Manual para casos puntuales, plugin para una web entera. Las dos vías son gratuitas dentro de un límite que a una pyme suele bastarle.
¿Qué tamaño y peso debe tener una imagen en la web? En dimensiones, rara vez necesitas más de unos mil novecientos píxeles de ancho para pantalla grande, y bastante menos para móvil. En peso, depende, pero una foto bien optimizada en WebP debería quedar muy por debajo de lo que pesa la original de cámara o móvil. La regla de oro: no subas una imagen gigante para mostrarla en un hueco pequeño, ajústala antes.
¿Qué es el lazy load y lo necesito? Es la carga diferida: que las imágenes se carguen solo cuando vas a verlas al bajar por la página, en lugar de todas de golpe. Acelera la carga inicial, y WordPress moderno ya lo aplica solo. La única excepción es la imagen principal de la cabecera, que no debe llevar lazy load para que cargue cuanto antes. No tienes que activarlo a mano, solo comprobar que la imagen de arriba no esté diferida.
¿Comprimir las imágenes les baja la calidad? Bien hecho, no de forma apreciable. Comprimir quita el peso que el ojo no percibe, no la calidad que sí ves. Una compresión media en WebP recorta mucho peso manteniendo una calidad que el visitante no distingue de la original. Solo si comprimes en exceso empiezan a verse defectos, por eso conviene revisar el resultado, o dejar el plugin en una compresión media equilibrada.
Por dónde empezar a optimizar tus imágenes
Mira tu web y localiza las imágenes más pesadas, sobre todo la de la cabecera. Pásalas a WebP con Squoosh o instala un plugin que lo haga en toda la web, ajusta el tamaño para no servir imágenes gigantes en huecos pequeños, y comprueba que la imagen principal no lleve carga diferida. Con eso ganas velocidad de forma notable y casi sin esfuerzo.
Si tu web va lenta y no sabes si el problema son las imágenes u otra cosa, o quieres que alguien deje la web optimizada de verdad, es parte de lo que hacemos en auditoría y optimización web. Las imágenes son la victoria fácil, pero a veces el peso esconde otros problemas que conviene mirar con calma.