Si usas una extension descargar imagenes web y obtienes miniaturas, duplicados o archivos vacíos, lo primero es comprobar qué imágenes está cargando realmente la página renderizada. En muchos casos la página sirve una versión reducida en el atributo src mientras el original de alta resolución está en srcset, en atributos data- o como background-image en CSS. Esta guía te lleva del síntoma al arreglo mínimo efectivo para recuperar los ficheros originales. Esta guía usa Image Downloader Pro para ese proceso.
Escenario habitual
Piensa en un catálago con 120 productos. Ejecutas la extensión y recibes 120 imágenes de 150x150 px, 50 archivos idénticos o huecos donde deberían ir fotos. Necesitas las imágenes a tamaño real para un catálogo o control visual y no puedes descargarlas a mano una por una.
Principales causas y cómo se manifiestan
- Uso de srcset o picture - la etiqueta img apunta a una miniatura en src pero lista candidatos mayores en srcset o en <picture>. Un descargador que solo lee src obtiene la versión pequeña. Ver referencia en MDN sobre imágenes adaptativas (responsive images): MDN - Responsive images.
- carga diferida (lazy loading) y atributos data- - scripts dejan la URL real en data-src, data-srcset o data-bg y la sustituyen al entrar en viewport. Si la herramienta examina el HTML estático, nunca verá la URL final. La guía de MDN sobre carga diferida lo explica: MDN - Lazy loading.
- originales de alta resolución solo en la página de producto - las listas muestran miniaturas y el detalle carga la imagen grande. Un descargador masivo debe seguir cada enlace o reconstruir el patrón de URL del detalle.
- Imágenes como background-image en CSS - no todo lo visual usa img. Los fondos en CSS pasan desapercibidos si la extensión solo inspecciona el DOM por etiquetas img.
- Scroll infinito o paginación - solo se explora la parte visible. Si no se activa la carga dinámica, muchos elementos permanecen ocultos.
- Archivos parecidos o duplicados - sitios generan varias versiones por tamaño. Si descargas por nombre sin filtrar, acabarás con muchas copias similares.
Lista rápida de comprobaciones iniciales
Antes de aplicar soluciones complejas, verifica esto por orden de facilidad.
- Abre DevTools - pestaña Red (Network) y recarga la página. ¿Aparecen peticiones a imágenes en alta resolución al hacer clic o al desplazarte?
- Inspecciona un elemento img en el panel Elementos (Elements). ¿Tiene srcset, sizes o data-src?
- Desplaza la página lentamente para activar carga diferida y vuelve a ejecutar la extensión.
- ¿Los thumbnails enlazan a una página de detalle? Si es así, extrae los enlaces y escanéalos a fondo.
- Revisa estilos computados: ¿hay background-image con URL útil?
Correcciones prácticas y cuándo aplicarlas
- Si la extensión saca miniaturas desde img src
- Solución: prioriza los candidatos de srcset o las fuentes de <picture>. Si la herramienta tiene la opción "seleccionar candidato más grande", actívala. Manualmente copia la URL mayor desde srcset y comprueba en el navegador.
- Si aparecen huecos por carga diferida
- Solución: desencadena la carga antes de escanear. Haz scroll, usa la opción "simular scroll" o "esperar a carga" en la extensión. La funcionalidad "Mass Scan" que espera scripts suele resolverlo.
- Si sólo el detalle tiene originales de alta resolución
- Solución: realiza un escaneo en dos pasos: extrae los enlaces desde la lista y luego escanéa cada detalle. Más lento pero eficaz cuando el listado oculta los originales de alta resolución.
- Si las imágenes están en CSS
- Solución: usa un modo que inspeccione estilos computados o capture las peticiones de red durante el render. Muchas extensiones ofrecen "captura de red" por esta razón.
- Si hay duplicados por tamaños
- Solución: filtra por área en píxeles o por la dimensión más larga, o aplica una plantilla de renombrado que incluya tamaño. Ejecuta una limpieza de duplicados por similitud visual si está disponible.
Modos de escaneo: cuándo usar cada uno
- Auditoría rápida de miniaturas - escaneo DOM de img src. Ideal para comprobar presencia y nombres.
- Exportación en alta calidad - seguir srcset, fuentes picture y enlaces a detalle. Para obtener los originales de alta resolución.
- Captura renderizada - captura peticiones de red durante un render o sesión de scroll. Para fondos en CSS y imágenes insertadas por JS.
- Escaneo masivo de enlaces - importa CSV de URLs y deja que la herramienta abra y espere cada página. Para catálogos grandes.
Referencia técnica: Los navegadores eligen un candidato de srcset según densidad de píxeles y condiciones de tamaños. Si sólo extraes el atributo src sin leer srcset, normalmente obtendrás la versión más pequeña. Consulta MDN para detalles de imágenes adaptativas y Chrome DevTools para observar la petición real en red. MDN - Responsive images - Chrome DevTools - Network
Dos ejemplos prácticos con pasos exactos
Ejemplo A - Lista con miniaturas con carga diferida y originales de alta resolución en detalle
- Abre la página de categoría y Red; aplica el filtro de imágenes.
- Haz clic en un producto y observa qué URL de imagen aparece en Red.
- Si el original de alta resolución carga al abrir el detalle, exporta los enlaces y ejecuta un Mass Scan que espere 500 ms después de cargar la página para dejar correr los scripts.
- Configura la extensión para elegir el candidato más grande de srcset o para capturar imágenes de la red.
Ejemplo B - Galería con scroll infinito y fondos en CSS
- Abre la página y desplázate hasta que todos los elementos se carguen. Pulsa "Cargar más" si procede.
- En panel Elementos, inspecciona el estilo computado de una tarjeta y copia la URL de background-image para probarla en nueva pestaña.
- Usa el modo de captura renderizada para que la extensión registre las descargas de background-image además de img.
Límites prácticos y ética
Algunos sitios protegen los originales de alta resolución con URLs firmadas por sesión, peticiones autenticadas o medidas anti-scraping. Ninguna extensión garantiza acceso a activos protegidos. Si una imagen sólo aparece tras una llamada API autenticada, necesitas acceso legítimo a la API o permiso del propietario para usar las imágenes.
Comprobaciones de navegador que realizar primero
- panel Elementos - revisa atributos img: src, srcset, sizes, data-src.
- Red - identifica la URL que el navegador solicitó realmente.
- estilos calculados (computed style) - confirma si la imagen viene de background-image.
- Console - busca errores que impidan la carga.
Si prefieres una herramienta que implemente este flujo, Image Downloader Pro soporta escaneo profundo con detección de imágenes con carga diferida, filtros por dimensiones y limpieza de duplicados. Prueba un modo de escaneo que capture imágenes de red cuando las miniaturas no son suficientes. Prueba la extensión aquí: Image Downloader Pro (es) y consulta la documentación localizada para configuraciones avanzadas: Documentación (es).
Fuentes útiles: la guía de MDN sobre imágenes responsivas y el apartado de red de Chrome DevTools te ayudarán a ver qué pide el navegador durante el render. Más recursos técnicos: MDN - Responsive images, MDN - Lazy loading y Chrome DevTools - Network.