Resumen
Esta herramienta analiza HTML y saca los elementos de imagen a un resultado limpio que puedes revisar o copiar. Cada entrada puede incluir la fuente de la imagen, el texto alternativo, el ancho, el alto y otros atributos presentes en la etiqueta, lo que ayuda cuando necesitas revisar el marcado con precisión. Es especialmente útil cuando los datos de imagen están ocultos en exportaciones de CMS, plantillas de correo o fragmentos largos con contenido mezclado. Como el análisis se hace localmente en el navegador, puedes trabajar con marcado privado sin enviarlo a otro sitio.
Casos de uso
- Revisar alt faltantesComprueba un export de página para detectar etiquetas img sin un valor alt útil antes de publicar el contenido.
- Reunir URLs de imágenesSaca todas las fuentes de imagen de una plantilla de newsletter o de un fragmento de CMS en una lista simple.
- Verificar dimensiones declaradasInspecciona width y height para detectar imágenes estiradas, cambiadas o mal dimensionadas.
- Inspeccionar marcado con lazy loadEncuentra rutas de imagen almacenadas en data-src u otros patrones parecidos de plantillas.
- Extraer imágenes de HTML mixtoSepara los datos de imagen de fragmentos largos que también contienen enlaces, texto y estructura.
Como funciona
- 1
Pega tu HTML en el campo de entrada.
- 2
El analizador busca elementos img en el marcado.
- 3
Extrae src, alt, width, height y atributos relacionados cuando existen.
- 4
Revisa la lista y copia los datos de imagen extraídos si lo necesitas.
Ejemplos
Una sola etiqueta img
Entrada: <img src="/assets/hero.jpg" alt="Horizonte de la ciudad al atardecer" width="1440" height="900">
Salida: 1) src: /assets/hero.jpg | alt: Horizonte de la ciudad al atardecer | width: 1440 | height: 900
Un elemento img estándar se divide en campos separados.
Imagen sin width explícito
Entrada: <figure><img src="product.png" alt="Vista frontal del producto"></figure>
Salida: 1) src: product.png | alt: Vista frontal del producto
Solo se devuelven los atributos que realmente existen en la etiqueta.
Imagen de plantilla con atributo data
Entrada: <img data-src="/img/gallery-03.jpg" alt="Elemento de galería 3" loading="lazy">
Salida: 1) data-src: /img/gallery-03.jpg | alt: Elemento de galería 3 | loading: lazy
Útil para plantillas que guardan la ruta real en un atributo data.
FAQ
¿El extractor lee solo etiquetas img?
Sí. Se centra en elementos img del HTML y no inspecciona imágenes de fondo en CSS ni imágenes cargadas por scripts.
¿Qué pasa si una etiqueta de imagen está incompleta?
La herramienta devuelve los atributos que puede encontrar, así que una etiqueta con solo src y alt dará un resultado más corto que una completa.
¿Puedo usarlo en un fragmento con muchas imágenes repetidas?
Sí. Cada elemento img coincidente se extrae por separado, incluso si varias etiquetas usan la misma fuente.
¿Por qué a veces veo data-src en lugar de src?
Algunas plantillas guardan la ruta real en data-src, data-original o un atributo similar. El extractor puede mostrar esos valores cuando aparecen en el marcado.
¿La herramienta modifica el HTML?
No. Solo lee el marcado e informa de los atributos relacionados con imágenes. No reescribe etiquetas ni adivina valores que faltan.