# Constructor de art direction responsive Picture / srcset Genera marcado completo con recortes art-directed: elementos por breakpoint, candidatas 1x/2x o descriptores de ancho con plantilla {w}, capas AVIF/WebP opcionales, manejo de sizes, width/height anti-CLS, y sabores HTML y JSX con notas de lint basadas en la especificación. > Página canónica: https://elysiatools.com/es/tools/responsive-picture-srcset-art-direction-builder - **Categoría:** Development - **Palabras clave:** elemento picture, generador srcset, art direction, imágenes responsivas, breakpoints, avif webp ## Descripción general El Constructor de art direction responsive Picture / srcset genera código HTML y JSX optimizado para elementos con recortes adaptativos según cada breakpoint. Permite configurar resoluciones 1x/2x o descriptores de ancho con plantillas {w}, integrar capas de formatos modernos como AVIF y WebP, y definir atributos sizes y loading para evitar desplazamientos de diseño (CLS). ## Entradas - **Fuentes de art direction (una por línea: minWidth URL \[anchuras\])** (textarea): 1280 /img/hero-wide.jpg 768 /img/hero-mid.jpg 0 /img/hero-mobile.jpg - **Opcional: subir variantes recortadas en su lugar (hasta 6 imágenes)** (file): Optional — upload the narrow crop, mid crop, wide crop… - **Modo de descriptores** (select) - **Densidades** (text): 1x,2x - **Atributo sizes (modo w)** (text): (min-width: 1024px) 960px, 100vw - **URL del de reserva** (text): /img/hero-mobile.jpg - **Texto alternativo** (text): Fresh sourdough loaves on a marble counter - **Capa de formato** (select) - **Sabor de marcado** (select) - **Añadir atributos loading/decoding** (checkbox) ## Cuándo usarlo - Al implementar banners o secciones hero que requieren proporciones y recortes visuales distintos en móviles, tablets y pantallas de escritorio. - Al optimizar la entrega de imágenes sirviendo formatos modernos (AVIF y WebP) con retrocompatibilidad automática hacia formatos tradicionales. - Al migrar componentes de imágenes estáticas a React o Next.js necesitando sintaxis JSX válida con nombres de atributo camelCase como srcSet. ## Cómo funciona - Define las fuentes indicando el ancho mínimo de breakpoint, la ruta de la imagen o plantilla {w}, y opcionalmente las variantes de resolución o anchuras disponibles. - Elige el modo de descriptores entre densidad de píxeles (1x, 2x) o ancho de recurso (descriptores w con el atributo sizes correspondiente). - Selecciona la capa de formato deseada (ninguna, AVIF, o AVIF + WebP) y el sabor de marcado entre HTML estándar o JSX. - Obtén el marcado completo del elemento con sus etiquetas , fallback , y atributos de optimización como loading y decoding. ## Casos de uso - Diseño de cabeceras hero complejas que muestran encuadres verticales en dispositivos móviles y panorámicos en escritorio. - Optimización de catálogos de comercio electrónico con entrega condicional de formatos AVIF y WebP para reducir el peso de página. - Estandarización de componentes de medios responsivos en bibliotecas de diseño y aplicaciones web construidas con React. ## Preguntas frecuentes ### ¿Cuál es la diferencia entre el modo de densidad y el modo de ancho? La densidad genera sufijos como 1x y 2x para pantallas de alta resolución, mientras que el modo de ancho usa descriptores 'w' y requiere el atributo 'sizes' para que el navegador calcule el tamaño según el layout. ### ¿Cómo funciona la plantilla {w} en las fuentes? Sustituye automáticamente el comodín {w} en la URL por cada una de las anchuras numéricas especificadas en la lista de recursos. ### ¿Por qué es importante incluir una etiqueta dentro de ? El elemento sirve como fallback obligatorio donde el navegador aplica los estilos, dimensiones y el texto alternativo (alt). ### ¿Cómo ayuda este generador a prevenir el Cumulative Layout Shift (CLS)? Estructura adecuadamente los atributos y dimensiones para que el navegador reserve el espacio exacto antes de descargar la imagen. ### ¿Qué cambios aplica el formato JSX? Transforma atributos HTML al estándar de React, convirtiendo 'srcset' en 'srcSet' y cerrando adecuadamente las etiquetas autoconclusivas. ## Herramientas relacionadas - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Conversión de Imágenes en Lote](https://elysiatools.com/es/tools/batch-convert): Convertir múltiples imágenes a diferentes formatos con configuración de calidad - [Conversión de Imágenes en Lote](https://elysiatools.com/es/tools/image-batch-convert): Convierte múltiples archivos de imagen entre diferentes formatos como JPG, PNG, WebP, AVIF, TIFF, GIF con configuración de calidad y procesamiento por lotes - [Visor de Información de Imágenes en Lote](https://elysiatools.com/es/tools/image-batch-info): Vea la información básica de múltiples imágenes a la vez: dimensiones, formato, tamaño de archivo y presencia de metadatos - [Redimensionador de Imágenes](https://elysiatools.com/es/tools/image-resize): Herramienta profesional de redimensionamiento de imágenes con múltiples métodos, preservación de relación de aspecto y conversión de formato, incluida la funcionalidad de desenfoque de fondo, soportando GIF/Animated WebP/APNG y JPEG/PNG/WEBP. - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Recorte de Imágenes en Lote](https://elysiatools.com/es/tools/image-batch-crop): Recortar múltiples imágenes a dimensiones específicas o relación de aspecto con posicionamiento personalizado. Retorna imágenes recortadas como descarga ZIP. - [Composición de Imágenes](https://elysiatools.com/es/tools/image-composite): Componer múltiples imágenes juntas con control preciso sobre posición, opacidad y modos de mezcla ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web TypeScript](https://elysiatools.com/es/samples/web-image-processing-typescript): Ejemplos de procesamiento de imágenes Web TypeScript incluyendo lectura/guardado de imágenes, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Herramientas de redacción, resaltado y formato de presentación de texto](https://elysiatools.com/es/hubs/text-format): Compara herramientas para enmascarar texto sensible, detectar PII, normalizar teléfonos, resaltar frases, centrar texto y formatear diffs en un solo hub. - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de conversión de texto, codificación y normalización](https://elysiatools.com/es/hubs/text-convert): Compara conversión de mayúsculas y minúsculas, conversión de ancho de caracteres, conversión de codificación, manejo de quoted-printable y normalización de texto en un solo hub. - [Herramientas de limpieza, acabado y preparacion por lotes de imagenes](https://elysiatools.com/es/hubs/image-utility): Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales.