Generador de srcset y sizes para imágenes responsive
Genera los atributos srcset y sizes de una imagen responsive (HTML), en tu navegador.
Name your files photo-320w.jpg, photo-640w.jpg, etc. Adjust “sizes” to your layout.
🔒 100 % en el cliente — no se envía ningún dato
Genera los atributos srcset y sizes para tus imágenes HTML responsive y sirve la resolución adecuada a cada pantalla. La herramienta se ejecuta 100 % en tu navegador, sin subir imágenes ni enviar datos. Una forma sencilla de mejorar el rendimiento y la puntuación Core Web Vitals de tus páginas.
What is it for?
- ▸ Servir imágenes optimizadas para móviles y pantallas Retina
- ▸ Reducir el peso de la página y mejorar el LCP
- ▸ Generar el marcado srcset para una etiqueta img o picture
- ▸ Definir puntos de ruptura de sizes coherentes con tu maquetación
FAQ
¿Para qué sirve el atributo srcset?
El atributo srcset ofrece al navegador varias versiones de una imagen en distintas resoluciones; este elige la más adecuada según el tamaño de pantalla y la densidad de píxeles, evitando descargar una imagen sobredimensionada.
¿Cuál es la diferencia entre srcset y sizes?
srcset enumera las imágenes disponibles con sus anchos, mientras que sizes indica al navegador el ancho de visualización previsto para cada maquetación. Ambos son necesarios para una elección óptima.
¿Debo usar srcset con la etiqueta picture?
srcset funciona directamente en una etiqueta img para el cambio de resolución, y dentro de las etiquetas source de un elemento picture cuando además quieres intercambiar imágenes por condición (art direction).