¿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.

Elysia Tools

Navegación

Development

Constructor de art direction responsive Picture / srcset

Genera marcado <picture> completo con recortes art-directed: elementos <source media> 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.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

2 ejemplos

Hero clásico de tres recortes, modo densidad

Una línea por recorte de art direction: hero ancho desde 1280px, recorte medio desde 768px y el recorte vertical estrecho como fallback del <img>. Las densidades 1x,2x generan candidatas @2x al estilo retina.js, y los atributos loading/decoding mantienen el hero fuera del camino crítico.

<section class="pb-wrap">breakpoint ladder 1280→768→img · <picture> HTML block with two media sources (1x/@2x candidates) and a lazy fallback img · JSX twin · clean lint banner</section>

Descriptores de ancho + sizes + capas AVIF/WebP en JSX

Plantilla de URL con {w} y anchuras reales de archivo (800/1024/1600), atributo sizes para que el navegador elija por ancho de layout en vez de asumir 100vw, y capas AVIF+WebP que repiten la fuente por tipo MIME — salida en JSX de React con srcSet camelCase y etiquetas autocerradas.

<section class="pb-wrap">breakpoint ladder 1024→img · JSX block: three <source> elements (avif/webp/original) each with srcSet="…{800w,1024w,1600w}" and sizes · lint note about combining art-direction media with media conditions inside sizes</section>

Entradas

Las opciones están agrupadas para que los formularios largos sean más fáciles de revisar.

10 opciones

ArchivosSube los archivos fuente para este flujo.1

Opcional: subir variantes recortadas en su lugar (hasta 6 imágenes)fileOpcional

Tamaño máximo por cada archivo: 20 MB / Máx. archivos: 6Tipos admitidos: image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

ContenidoPega o escribe los valores principales.5

Fuentes de art direction (una por línea: minWidth URL [anchuras])textareaOpcionalDensidadestextOpcionalAtributo sizes (modo w)textOpcionalURL del <img> de reservatextOpcionalTexto alternativotextOpcional

AjustesAjusta formatos, rangos, números y modos.3

Modo de descriptoresselectObligatorioCapa de formatoselectObligatorioSabor de marcadoselectObligatorio

InterruptoresActiva o desactiva comportamientos opcionales.1

Añadir atributos loading/decodingcheckboxOpcionalActivado si está marcado

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Continuar con herramientas y temas relacionados

sources: "768 /img/hero-mid.jpg\n1280 /img/hero-wide.jpg", descriptorMode: "density", densities: "1x,2x", fallbackUrl: "/img/hero-mobile.jpg", altText: "Pan recién horneado", formatLayer: "none", flavor: "html", lazyAttrs: true

Constructor de art direction responsive Picture / srcset

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Hero de tres breakpoints con densidades de pantalla

2. Imagen de producto en React con capas AVIF/WebP y descriptores de ancho

Preguntas frecuentes

Ejemplos de Procesamiento de Imágenes Web Python

Ejemplos de Procesamiento de Imágenes Web TypeScript

Ejemplos de Procesamiento de Imágenes Android Java

Ejemplos de Procesamiento de Imágenes Android Kotlin

Generador de Data URI

Conversión de Imágenes en Lote

Conversión de Imágenes en Lote

Visor de Información de Imágenes en Lote

Herramientas de redacción, resaltado y formato de presentación de texto

Herramientas de conversion de formatos de imagen y exportacion animada

Herramientas de conversión de texto, codificación y normalización

Herramientas de limpieza, acabado y preparacion por lotes de imagenes