Produce srcset y sizes para una imagen

Los desarrolladores front-end recurren a él cuando una imagen debe verse nítida en varias pantallas sin descargar el archivo mayor.

Produce srcset y sizes para una imagen. Todo se realiza en el navegador para entregar un resultado limpio, sin registro.

Cómo usar

Introduce el nombre del archivo de imagen, por ejemplo photo.jpg.
Escribe la anchura máxima mostrada en píxeles.
Ejecuta el generador para producir los atributos srcset y sizes.
Copia el marcado generado en tu elemento de imagen.

Ejemplo

Un integrador front-end está preparando un banner que debe verse nítido en teléfonos y pantallas grandes. Introduce photo.jpg y una anchura máxima de 1200 píxeles, y luego genera los atributos. El código se pega en la plantilla para que el navegador pueda elegir. También prepara los archivos de imagen con las anchuras sugeridas por la salida.

Entrada

photo.jpg
1200

Límites y formatos

La herramienta crea marcado para una imagen; no redimensiona archivos de imagen.
Las variantes de imagen deben existir con las anchuras sugeridas en la salida.
La elección final también depende del navegador y de la densidad de pantalla.
Comprueba las rutas y los nombres de los archivos antes de publicar el marcado.
El código generado no sustituye las comprobaciones visuales en varios dispositivos.

Dónde se procesa

Los datos que escribes se procesan dentro de tu navegador para crear el marcado adaptable. No se sube ningún archivo de imagen y no se envía información fuera. Puedes copiar el resultado en cuanto aparezca.

Preguntas frecuentes

¿Esta herramienta redimensiona mi imagen?

No, no modifica el archivo de imagen en sí. Solo genera los atributos srcset y sizes a partir del nombre y la anchura que proporcionas. Prepara las distintas versiones de la imagen con una herramienta de redimensionado aparte.

¿Por qué se enumeran varias anchuras?

El navegador elige la versión que mejor se adapta a la pantalla y a la densidad de píxeles. Ofrecer varias anchuras ayuda a evitar enviar un archivo grande a un dispositivo pequeño. Los valores exactos siguen la anchura máxima que introdujiste.

¿Puedo usar esto para una imagen de fondo CSS?

Los atributos srcset y sizes son para elementos de imagen, no para fondos CSS. Para fondos, usa consultas de medios o técnicas de CSS adaptable. Adapta el método a cómo se muestra la imagen.