Qué es Generador de marcado de imagen responsive?
El marcado de imagen responsiva permite al navegador elegir un archivo de imagen adecuado para la pantalla y el diseño del visitante. Un buen marcado también incluye width, height, loading, decoding y texto alternativo útil. Los sitios estáticos se benefician de esto porque las imágenes a menudo tienen nombres de archivo exportados fijos y necesitan rutas claras en la salida de compilación final.
Respuesta rápida
Genere marcado img o picture responsivo con srcset, sizes, width, height y texto alternativo. Ayuda a evitar desplazamiento de diseño, candidatos de imagen faltantes y atributos alt inaccesibles en sitios estáticos.
Last updated: 2026-06-11
Limitaciones
- Los candidatos srcset deben existir en las rutas especificadas en la salida publicada.
- El atributo sizes afecta qué candidato srcset selecciona el navegador. Un valor incorrecto puede hacer que descargue una imagen más grande o más pequeña de lo necesario.
- La fuente WebP en un elemento picture requiere un src img de respaldo para navegadores antiguos.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese la URL de imagen predeterminada, texto alternativo, ancho y alto.
- Agregue candidatos srcset como pares de URL de imagen y ancho.
- Elija si generar una etiqueta img simple o un elemento picture con fuente WebP.
- Copie el marcado y confirme que cada archivo de imagen exista en la salida publicada.
Para qué puedes usarla
- Preparar imágenes responsivas para páginas HTML estáticas.
- Evitar atributos width y height faltantes que causan desplazamiento de diseño.
- Crear marcado picture con WebP y rutas de imagen de respaldo.