En resumen
Qué se comprueba
si hay imágenes sobredimensionadas, si el formato es mejorable y si la compresión deja margen.
Cuánto está en juego
en el ejemplo de MDN, la misma foto a 800 píxeles ocupa 128 KB y a 480 píxeles solo 63 KB.
Por qué importa
quien entra desde el móvil se descarga la versión de escritorio y paga sus bytes.
Severidad en Wakaris
Importante. Falla en el 90 % de las páginas analizadas.
Qué es y qué comprueba este hallazgo
Este hallazgo salta cuando las imágenes de tu página son mejorables, y Wakaris lo mira por tres caminos distintos que conviene no confundir.
El primero es el tamaño: imágenes sobredimensionadas, es decir servidas con muchos más píxeles de los que ocupan en pantalla. El navegador las descarga enteras y luego las encoge.
El segundo es el formato: seguir usando un formato antiguo cuando existen otros que consiguen el mismo resultado visual con menos bytes. WebP, por ejemplo, nació como formato con pérdida y después incorporó compresión sin pérdida, transparencia y animación, según explica web.dev.
El tercero es la compresión: la misma imagen, en el mismo formato, puede guardarse con un ajuste más o menos agresivo. Una foto exportada a calidad máxima pesa varias veces lo que la misma foto en un ajuste que a simple vista no se distingue.
Cómo se comprueba
Wakaris carga tu URL, localiza las imágenes de la página y revisa las tres cosas: cuánto miden frente al hueco en el que se muestran, en qué formato llegan y cuánto pesan para lo que son. El informe te dice qué imágenes concretas son mejorables y por cuál de los tres motivos, con la dirección de cada una.
Conviene entender lo que esa comprobación no puede decidir por ti. Que una imagen sea mejorable no significa que se vea mal, sino que el mismo resultado se podía haber conseguido con menos bytes. Dónde está el punto de equilibrio entre peso y calidad es una decisión editorial: en una tienda de joyería no es el mismo que en un blog.
La revisión es sobre la página que le indiques, no sobre toda tu biblioteca de imágenes, así que la portada puede estar bien y una ficha de producto, no.
Por qué importa
Importa porque las imágenes son casi siempre la parte más pesada de lo que se descarga, y porque el desperdicio recae sobre quien peor conexión tiene.
MDN lo dice sin rodeos: no hace falta incrustar imágenes tan grandes si la página se ve en una pantalla de móvil, y hacerlo desperdicia ancho de banda; quien navega desde el móvil no quiere gastarlo descargando una imagen pensada para escritorio cuando una pequeña le bastaría. Su ejemplo pone cifras a eso: la misma fotografía ocupa 128 KB a 800 píxeles de ancho y 63 KB a 480, un ahorro de 65 KB en una sola imagen.
Multiplica eso por las imágenes de una página y verás por qué esto arrastra las métricas de carga. La imagen principal suele ser además el elemento más grande de la pantalla, el que marca el momento en que la página parece cargada.
Causas comunes
La causa más repetida es subir la foto tal cual sale de la cámara o del banco de imágenes. Un archivo de varios miles de píxeles de ancho acaba mostrándose en un hueco de cuatrocientos, y el gestor de contenidos no siempre sirve la versión reducida.
La segunda es la plantilla que no ofrece variantes: una sola dirección de imagen para todas las pantallas, sin los atributos srcset y sizes que permiten al navegador elegir el tamaño adecuado.
La tercera es la exportación a calidad máxima, por costumbre o por miedo a que se vea mal, en imágenes donde la diferencia no se aprecia.
La cuarta es la inercia de formato: la biblioteca lleva años en JPEG y PNG y nadie ha revisado si conviene servir formatos más eficientes a los navegadores que los admiten.
Cómo solucionarlo
Empieza por el informe de Wakaris, que te dice qué imágenes son mejorables y por qué motivo; el orden por rentabilidad suele ser tamaño, compresión y formato.
Para el tamaño, la solución que describe MDN son las imágenes adaptables: varias versiones del mismo archivo declaradas en srcset con su anchura real, y sizes indicando qué hueco ocupará la imagen en cada condición de pantalla. El navegador mira el tamaño de pantalla, la densidad de píxeles y el hueco disponible, y descarga la versión que le corresponde.
Para la compresión, baja el ajuste de calidad y compara a tamaño real hasta encontrar el punto donde deja de notarse. Suele haber mucho margen antes de que aparezca.
Para el formato, sirve formatos modernos con alternativa para quien no los admita. AVIF, por ejemplo, lo admiten los navegadores principales desde 2020, 2021 y 2022 según web.dev, un recorrido corto frente a JPEG o PNG. Luego vuelve a pasar la página por Wakaris.
Tabla con los tres motivos por los que una imagen es mejorable, la técnica que corrige cada uno y el ahorro típico que se obtiene
Brief para generar la imagen
Ilustración editorial para una guía técnica de Wakaris. Tema: Tabla con los tres motivos por los que una imagen es mejorable, la técnica que corrige cada uno y el ahorro típico que se obtiene. Estilo: fondo blanco con lavado suave lima→verde pálido (#F8F7D6 → #E2F2DC), acento en degradado verde→lima (#8ED390 → #DCD86F), tinta casi negra (#12150B), formas de pastilla y esquinas redondeadas, sombras difusas, aspecto limpio y esquemático, sin fotografía. Formato: 16:9, 1440 píxeles de ancho. Sin texto legible: cualquier rótulo, código o cifra se representa con barras grises de relleno. El significado lo lleva el pie de foto, no la imagen. Sin logotipos reales ni marcas de terceros. Sin personas reconocibles. Etiquetas: optimización, imágenes, tabla, motivos, imagen, mejorable, técnica, corrige
Pregúntale a tu IA
Si quieres profundizar en tu caso concreto, copia uno de estos dos prompts y pégalo en la IA que uses. Elige según tu situación.
Ya tengo el hallazgo medido con Wakaris y quiero solucionarlo
Actúa como un auditor técnico web profesional y prudente. Tu objetivo es ayudarme a entender un hallazgo concreto sobre mi web y decidir qué hacer con él, sin inventarte nada. Contexto: he obtenido este hallazgo con Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El hallazgo es: Optimización de imágenes. Alguna imagen de mi página es mejorable por su tamaño (se sirve con más píxeles de los que se ven), por su formato (hay formatos más eficientes) o por su compresión (pesa más de lo necesario para la calidad que ofrece). Referencia: la imagen debería servirse al tamaño en que se muestra, en un formato eficiente y con una compresión que no se note a simple vista. Pega aquí el resultado de Wakaris: qué imágenes son mejorables, por cuál de los tres motivos y en qué página. Si no lo tienes, dímelo y te diré cómo obtenerlo antes de seguir. Reglas que debes seguir en todo momento: 1. No asumas nada sobre mi web. Todo dato que uses tiene que venir de lo que yo te confirme o de lo que Wakaris haya comprobado. Si no lo sabes, pregúntamelo antes de afirmarlo. 2. Antes de darme conclusiones, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para saber si este hallazgo me afecta de verdad y por dónde: a) ¿Cuál de los tres motivos te ha marcado el informe: tamaño, formato o compresión? Si son varios, dime cuáles y en cuántas imágenes. b) ¿En qué plataforma está tu web? (WordPress, Shopify, web a medida, otra) c) ¿Quién sube las imágenes y desde dónde: un panel de administración, un catálogo de productos, una importación automática? d) ¿Las imágenes son fotografías, ilustraciones, capturas o logotipos? El arreglo no es el mismo. e) ¿Es la calidad de imagen un argumento de venta en tu web (moda, joyería, arte, inmobiliaria)? f) ¿Tu plataforma genera sola versiones de distinto tamaño, o sirve siempre el archivo original? g) Si hay que aplicar un arreglo técnico, ¿lo harías tú, un técnico interno o una agencia? 3. Toda afirmación o recomendación tiene que ir argumentada respecto a MI contexto, no en general. Si me recomiendas algo, explícame por qué aplica a mi caso. 4. Marca siempre tu nivel de certeza. Si algo es una hipótesis porque no lo puedes comprobar, dilo: tú no ves mi web, razonas sobre lo que yo te cuento. 5. Recuérdame que el punto de equilibrio entre peso y calidad es una decisión mía, no una regla técnica, y que conviene comparar el resultado a tamaño real antes de aplicar un cambio a toda la biblioteca. 6. Avísame antes de proponerme nada que reprocese imágenes de forma masiva o irreversible: conviene una copia de los originales y una prueba con unas pocas. 7. Si necesitas un dato que solo se obtiene comprobando la web (qué imágenes son mejorables, con qué peso, o si el arreglo funcionó), dímelo y recomiéndame volver a pasar la página por Wakaris: eso se comprueba, no se adivina. 8. La decisión final es mía, no tuya. Si el arreglo excede lo que puedo hacer yo, ayúdame a dejar el problema listo para traspasarlo: qué es, dónde está, por qué importa y qué habría que hacer. Fuente de este hallazgo: https://www.wakaris.com/es/guias/rendimiento/optimizacion-de-imagenes Para comprobarlo o volver a comprobarlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol y haciéndome el primer bloque de preguntas.
Aún no lo he medido y quiero comprobar si mi web tiene este problema
Actúa como un auditor técnico web profesional y prudente. Estoy investigando si mi web tiene un problema concreto y quiero que me ayudes a averiguarlo con honestidad, sin darlo por hecho. Contexto: he llegado a esto a través de Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El problema que quiero investigar es: Optimización de imágenes. Consiste en que las imágenes de mi página pesan más de lo necesario, porque se sirven con más píxeles de los que se ven, porque el formato es mejorable o porque la compresión deja margen. Todavía NO sé si mi web lo tiene: quiero averiguarlo. Reglas que debes seguir en todo momento: 1. Lo primero y más importante: esto se COMPRUEBA midiendo las imágenes reales de mi página, y tú no puedes descargarlas desde esta conversación. Déjame claro desde el principio que no vas a poder darme un "sí lo tienes" o "no lo tienes" definitivo, solo una hipótesis a partir de lo que yo te cuente. 2. No asumas nada. Antes de darme ninguna valoración, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para estimar si es probable que tenga el problema: a) Cuando subes una foto a tu web, ¿la preparas antes o la subes tal como sale de la cámara, del móvil o del banco de imágenes? b) ¿Sabes en qué formato están tus imágenes? (JPEG, PNG, WebP, AVIF; o no lo sé) c) ¿Tu plataforma genera versiones de distinto tamaño para móvil, o sirve siempre el mismo archivo? d) ¿Tu web tiene muchas imágenes grandes: carruseles, galerías, fichas de producto, cabeceras a pantalla completa? e) ¿Notas que la web tarda más en móvil que en el ordenador? f) ¿En qué plataforma está? (WordPress, Shopify, web a medida, otra; o no lo sé) 3. Con mis respuestas, dame una estimación clara de si es PROBABLE o POCO PROBABLE que lo tenga, y de cuál de los tres motivos sería el sospechoso, argumentada según lo que te he dicho y marcada explícitamente como hipótesis, no como diagnóstico. 4. Dime de forma directa que la única manera de saberlo de verdad es comprobarlo, y que puedo hacerlo gratis y sin crear cuenta pasando mi web por Wakaris, que me dirá qué imágenes concretas son mejorables y por qué motivo, y de paso el estado de las otras áreas. 5. Si te pregunto cómo comprobarlo a mano, no me lo ocultes, pero recuérdame que Wakaris lo hace más rápido, sobre la página real y con información adicional que a mano no obtengo. 6. Sé honesto con el alcance: dime que "mejorable" no quiere decir que se vea mal, y que dónde está el equilibrio entre peso y calidad lo decido yo según lo que venda mi web. 7. La conclusión y la decisión son mías, no tuyas. Tú me ayudas a orientarme. Fuente de este hallazgo: https://www.wakaris.com/es/guias/rendimiento/optimizacion-de-imagenes Para comprobarlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol, dejando claro el punto 1, y haciéndome el bloque de preguntas.
Preguntas frecuentes
¿Cuánto se ahorra sirviendo la imagen al tamaño correcto? +
Depende de la diferencia, y suele ser mucho. El ejemplo de MDN es ilustrativo: la misma fotografía ocupa 128 KB servida a 800 píxeles de ancho y 63 KB a 480 píxeles, un ahorro de 65 KB en una sola imagen. Multiplícalo por las imágenes de una galería.
¿Qué son srcset y sizes? +
Dos atributos de la etiqueta de imagen. En srcset declaras varias versiones del archivo con su anchura real; en sizes, qué hueco ocupará la imagen en cada condición de pantalla. Con eso el navegador descarga la versión que le conviene en lugar de la más grande.
¿Puedo pasar todas mis imágenes a un formato moderno sin más? +
Conviene hacerlo con alternativa. AVIF, por ejemplo, lo admiten los navegadores principales desde 2020, 2021 y 2022 según web.dev, un recorrido mucho más corto que el de JPEG o PNG. Sirve el formato nuevo a quien lo admita y mantén una versión clásica de respaldo.
Si comprimo más, ¿se va a notar? +
Normalmente no antes de lo que se cree. Formatos como WebP combinan compresión con y sin pérdida según el caso, tal como describe web.dev. La forma de decidirlo es comparar el original y la versión comprimida a tamaño real, en la pantalla donde se van a ver.
Fuentes citadas
- developer.mozilla.orgResponsive images, MDN Web Docs: el desperdicio de ancho de banda al servir imágenes de escritorio en móvil, el ejemplo de 128 KB frente a 63 KB y cómo funcionan
srcsetysizes. - web.devWebP, web.dev: origen del formato con pérdida y la incorporación posterior de compresión sin pérdida, transparencia y animación.
- web.devAVIF, web.dev: fechas de admisión en los navegadores principales y la cautela frente a los formatos garantizados desde hace décadas.
Actualizado: 7 de septiembre de 2026.
Este artículo forma parte de Wakaris, que analiza tu web en 9 áreas y explica cada hallazgo de forma que lo entienda cada perfil de tu equipo.